@lostgradient/cinder 0.2.0 → 0.4.0

package/src/highlighters/shiki/index.ts

@@ -108,6 +108,15 @@ function plaintextBlock(code: string): string {
   return `<pre class="shiki shiki-plaintext"><code>${escapeHtml(code)}</code></pre>`;
 }
 
+function stripRootPreTabIndex(html: string): string {
+  const openingPre = /^<pre\b[^>]*>/i.exec(html);
+  if (openingPre === null) return html;
+  return (
+    openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '') +
+    html.slice(openingPre[0].length)
+  );
+}
+
 type CodeToHtmlFunction = typeof import('shiki').codeToHtml;
 type BundledLanguages = typeof import('shiki').bundledLanguages;
 
@@ -188,10 +197,11 @@ export function shikiHighlighter(options: ShikiHighlighterOptions = {}): Highlig
     }
 
     try {
-      return await shiki.codeToHtml(code, {
+      const html = await shiki.codeToHtml(code, {
         lang: normalizedLang,
         ...buildThemeOption(theme),
       });
+      return stripRootPreTabIndex(html);
     } catch (error) {
       // Grammar load failure, theme miss, etc. — log once per language and
       // fall back to plaintext.

package/src/index.ts

@@ -1,3 +1,6 @@
+export { default as AccessGate } from './components/access-gate/index.ts';
+export type { AccessGateProps, AccessGateVariant } from './components/access-gate/index.ts';
+
 export { default as AccordionItem } from './components/accordion-item/index.ts';
 export type { AccordionItemProps } from './components/accordion-item/index.ts';
 
@@ -10,6 +13,19 @@ export type { AlertProps, AlertVariant } from './components/alert/index.ts';
 export { default as AlertDialog } from './components/alert-dialog/index.ts';
 export type { AlertDialogProps } from './components/alert-dialog/index.ts';
 
+export { default as ApprovalCard } from './components/approval-card/index.ts';
+export type {
+  ApprovalCardCallbacks,
+  ApprovalCardProps,
+  ApprovalCardSchemaProps,
+  ApprovalOperation,
+  ApprovalOperationKind,
+  ApprovalSandbox,
+  ApprovalState,
+  ApprovalTool,
+  ApprovalToolRisk,
+} from './components/approval-card/index.ts';
+
 export { default as AreaChart } from './components/area-chart/index.ts';
 export type { AreaChartProps, AreaChartSchemaProps } from './components/area-chart/index.ts';
 
@@ -40,7 +56,12 @@ export type {
 } from './components/avatar-group/index.ts';
 
 export { default as Badge } from './components/badge/index.ts';
-export type { BadgeProps, BadgeSize, BadgeVariant } from './components/badge/index.ts';
+export type {
+  BadgeProps,
+  BadgeSize,
+  BadgeSubscriptionState,
+  BadgeVariant,
+} from './components/badge/index.ts';
 
 export { default as Backdrop } from './components/backdrop/index.ts';
 export type { BackdropProps } from './components/backdrop/index.ts';
@@ -94,6 +115,21 @@ export type { CardPadding, CardProps, CardTone, CardVariant } from './components
 export { default as Chat } from './components/chat/index.ts';
 export type { ChatProps } from './components/chat/index.ts';
 
+export { default as ChatConversationHeader } from './components/chat-conversation-header/index.ts';
+export type {
+  ChatConversationHeaderHeadingLevel,
+  ChatConversationHeaderProps,
+} from './components/chat-conversation-header/index.ts';
+
+export {
+  default as ChatConversationList,
+  deriveConversationSummary,
+} from './components/chat-conversation-list/index.ts';
+export type {
+  ChatConversationListProps,
+  ConversationSummary,
+} from './components/chat-conversation-list/index.ts';
+
 export { default as ChoiceGrid } from './components/choice-grid/index.ts';
 export type {
   ChoiceGridColumns,
@@ -164,12 +200,6 @@ export type { CommandPaletteProps } from './components/command-palette/index.ts'
 export { default as ConfirmDialog } from './components/confirm-dialog/index.ts';
 export type { ConfirmDialogProps } from './components/confirm-dialog/index.ts';
 
-export { default as ConnectionIndicator } from './components/connection-indicator/index.ts';
-export type {
-  ConnectionIndicatorProps,
-  ConnectionState,
-} from './components/connection-indicator/index.ts';
-
 export { default as Container } from './components/container/index.ts';
 export type {
   ContainerElement,
@@ -191,6 +221,17 @@ export { copyToClipboard } from './utilities/clipboard.ts';
 export { default as DataList } from './components/data-list/index.ts';
 export type { DataListProps } from './components/data-list/index.ts';
 
+export { default as DataGrid } from './components/data-grid/index.ts';
+export type {
+  DataGridCellContext,
+  DataGridColumnDef,
+  DataGridColumnPin,
+  DataGridColumnPinning,
+  DataGridColumnSizing,
+  DataGridDensity,
+  DataGridProps,
+} from './components/data-grid/index.ts';
+
 export { default as DataTable } from './components/data-table/index.ts';
 export type {
   DataTableColumn,
@@ -198,6 +239,14 @@ export type {
   DataTableRow,
 } from './components/data-table/index.ts';
 
+export { default as DateRangeField } from './components/date-range-field/index.ts';
+export type {
+  DateRangeDatePreset,
+  DateRangeFieldProps,
+  DateRangeGranularity,
+  DateRangeValue,
+} from './components/date-range-field/index.ts';
+
 export { default as DescriptionList } from './components/description-list/index.ts';
 export type {
   DescriptionListItem,
@@ -215,8 +264,8 @@ export type {
 export { default as DiffViewer } from './components/diff-viewer/index.ts';
 export type {
   DiffToolbarContext,
+  DiffViewerMode,
   DiffViewerProps,
-  ViewMode,
 } from './components/diff-viewer/index.ts';
 
 export { default as Divider } from './components/divider/index.ts';
@@ -258,6 +307,30 @@ export type { DropdownTriggerProps } from './components/dropdown-trigger/index.t
 export { default as EmptyState } from './components/empty-state/index.ts';
 export type { EmptyStateProps } from './components/empty-state/index.ts';
 
+export { default as EventStreamViewer } from './components/event-stream-viewer/index.ts';
+export type {
+  EventSeverity,
+  EventStreamEntry,
+  EventStreamSchemaDetailValue,
+  EventStreamSchemaEntry,
+  EventStreamSchemaEvent,
+  EventStreamState,
+  EventStreamViewerProps,
+  EventStreamViewerSchemaProps,
+  StreamEvent,
+  StreamReconnectedBoundary,
+} from './components/event-stream-viewer/index.ts';
+
+export { default as FacetedFilterBar } from './components/faceted-filter-bar/index.ts';
+export type {
+  AppliedFilter,
+  CustomFacet,
+  FacetDefinition,
+  FacetOption,
+  FacetedFilterBarProps,
+  SelectFacet,
+} from './components/faceted-filter-bar/index.ts';
+
 export { default as FeedEvent } from './components/feed-event/index.ts';
 export type { FeedEventProps, FeedEventVariant } from './components/feed-event/index.ts';
 
@@ -266,8 +339,8 @@ export type { FeedProps } from './components/feed/index.ts';
 
 export { default as FloatingActionButton } from './components/floating-action-button/index.ts';
 export type {
-  FloatingActionButtonColor,
   FloatingActionButtonProps,
+  FloatingActionButtonShape,
   FloatingActionButtonSize,
   FloatingActionButtonVariant,
 } from './components/floating-action-button/index.ts';
@@ -292,6 +365,12 @@ export type { FormSectionHeadingLevel, FormSectionProps } from './components/for
 
 export type { FormFieldContext } from './_internal/form-field-context.ts';
 
+export { default as Grid } from './components/grid/index.ts';
+export type { GridColumns, GridProps } from './components/grid/index.ts';
+
+export { default as GridItem } from './components/grid-item/index.ts';
+export type { GridItemProps } from './components/grid-item/index.ts';
+
 export { default as GridList } from './components/grid-list/index.ts';
 export type { GridListProps } from './components/grid-list/index.ts';
 
@@ -323,6 +402,16 @@ export type {
   JsonSchemaValue,
 } from './components/json-schema-editor/index.ts';
 
+export { default as InvocationRuleBuilder } from './components/invocation-rule-builder/index.ts';
+export type {
+  InvocationRule,
+  InvocationRuleAction,
+  InvocationRuleBuilderProps,
+  InvocationRuleChange,
+  InvocationRuleCondition,
+  InvocationRuleOption,
+} from './components/invocation-rule-builder/index.ts';
+
 export { default as JsonViewer } from './components/json-viewer/index.ts';
 export type { JsonViewerProps } from './components/json-viewer/index.ts';
 
@@ -364,6 +453,9 @@ export type { LinkColor, LinkProps, LinkUnderline } from './components/link/inde
 export { default as LineChart } from './components/line-chart/index.ts';
 export type { LineChartProps, LineChartSchemaProps } from './components/line-chart/index.ts';
 
+export { default as LocaleProvider } from './components/locale-provider/index.ts';
+export type { LocaleProviderProps, TextDirection } from './components/locale-provider/index.ts';
+
 export { default as LoadMore } from './components/load-more/index.ts';
 export type { LoadMoreProps } from './components/load-more/index.ts';
 
@@ -398,12 +490,17 @@ export { default as MatrixChart } from './components/matrix-chart/index.ts';
 export type { MatrixChartProps, MatrixChartSchemaProps } from './components/matrix-chart/index.ts';
 export type { MatrixColorScale } from './components/matrix-chart/matrix-chart.types.ts';
 
+export { default as Masonry } from './components/masonry/index.ts';
+export type { MasonryProps } from './components/masonry/index.ts';
+
 export { default as Modal } from './components/modal/index.ts';
 export type { ModalProps } from './components/modal/index.ts';
 
 export { default as NavigationBar } from './components/navigation-bar/index.ts';
 export type {
   NavigationBarItemsContext,
+  NavigationBarLabelVisibility,
+  NavigationBarPlacement,
   NavigationBarProps,
   NavigationBarToggleAttributes,
   NavigationVariant,
@@ -420,6 +517,22 @@ export type { NumberInputProps } from './components/number-input/index.ts';
 export { default as Pagination } from './components/pagination/index.ts';
 export type { PaginationProps } from './components/pagination/index.ts';
 
+export { default as PayloadInspector } from './components/payload-inspector/index.ts';
+export type {
+  PayloadInspectorMeta,
+  PayloadInspectorProps,
+  PayloadInspectorView,
+} from './components/payload-inspector/index.ts';
+
+export { default as PermissionMatrix } from './components/permission-matrix/index.ts';
+export type {
+  PermissionMatrixAxisItem,
+  PermissionMatrixCellState,
+  PermissionMatrixProps,
+  PermissionMatrixSchemaProps,
+  PermissionMatrixStateLabels,
+} from './components/permission-matrix/index.ts';
+
 export { default as PhoneInput } from './components/phone-input/index.ts';
 export type {
   PhoneInputChange,
@@ -453,6 +566,15 @@ export type {
 export { default as Rating } from './components/rating/index.ts';
 export type { RatingPrecision, RatingProps } from './components/rating/index.ts';
 
+export { default as RunStepTimeline } from './components/run-step-timeline/index.ts';
+export type {
+  RunStep,
+  RunStepDetail,
+  RunStepLink,
+  RunStepStatus,
+  RunStepTimelineProps,
+} from './components/run-step-timeline/index.ts';
+
 export { default as ResizablePanels } from './components/resizable-panels/index.ts';
 export type {
   ResizablePanelDefinition,
@@ -493,6 +615,14 @@ export {
 } from './components/review-editor/index.ts';
 export type { ReviewEditorProps } from './components/review-editor/index.ts';
 
+export { default as SchemaForm, readSchemaFormData } from './components/schema-form/index.ts';
+export type {
+  SchemaFormOutput,
+  SchemaFormProps,
+  SchemaFormSchema,
+  SchemaFormSubmitHandler,
+} from './components/schema-form/index.ts';
+
 export { default as ScrollArea } from './components/scroll-area/index.ts';
 export type {
   ScrollAreaDirection,
@@ -502,6 +632,9 @@ export type {
 export { default as SearchField } from './components/search-field/index.ts';
 export type { SearchFieldProps } from './components/search-field/index.ts';
 
+export { default as SecretValueField } from './components/secret-value-field/index.ts';
+export type { SecretValueFieldProps } from './components/secret-value-field/index.ts';
+
 export { default as SectionHeading } from './components/section-heading/index.ts';
 export type {
   SectionHeadingLevel,
@@ -584,6 +717,19 @@ export type {
 export { default as Spinner } from './components/spinner/index.ts';
 export type { SpinnerProps, SpinnerSize } from './components/spinner/index.ts';
 
+export { default as SpeedDial } from './components/speed-dial/index.ts';
+export type {
+  SpeedDialContext,
+  SpeedDialDirection,
+  SpeedDialProps,
+} from './components/speed-dial/index.ts';
+
+export { default as SpeedDialAction } from './components/speed-dial-action/index.ts';
+export type {
+  SpeedDialActionLabelPlacement,
+  SpeedDialActionProps,
+} from './components/speed-dial-action/index.ts';
+
 export { default as Steps } from './components/steps/index.ts';
 export type { StepItem, StepsOrientation, StepsProps } from './components/steps/index.ts';
 
@@ -599,17 +745,12 @@ export type {
 
 export { default as StatusDot } from './components/status-dot/index.ts';
 export type {
+  StatusDotConnectionState,
   StatusDotProps,
   StatusDotSize,
   StatusDotStatus,
 } from './components/status-dot/index.ts';
 
-export { default as SubscriptionBadge } from './components/subscription-badge/index.ts';
-export type {
-  SubscriptionBadgeProps,
-  SubscriptionState,
-} from './components/subscription-badge/index.ts';
-
 export { default as Surface } from './components/surface/index.ts';
 export type { SurfaceProps, SurfaceTone } from './components/surface/index.ts';
 
@@ -657,6 +798,13 @@ export type { TabsContext, TabsOrientation, TabsProps } from './components/tabs/
 export { default as Textarea } from './components/textarea/index.ts';
 export type { TextareaProps } from './components/textarea/index.ts';
 
+export { default as TimeField } from './components/time-field/index.ts';
+export type {
+  TimeFieldChange,
+  TimeFieldGranularity,
+  TimeFieldProps,
+} from './components/time-field/index.ts';
+
 export { default as ToastRegion } from './components/toast-region/index.ts';
 export type {
   ToastApi,
@@ -667,6 +815,13 @@ export type {
   ToastVariant,
 } from './components/toast-region/index.ts';
 
+export { default as TransferList } from './components/transfer-list/index.ts';
+export type {
+  TransferListItem,
+  TransferListProps,
+  TransferListSchemaProps,
+} from './components/transfer-list/index.ts';
+
 export { useAnnouncer } from './utilities/use-announcer.svelte.ts';
 export type { Announcer, AnnouncerOptions } from './utilities/use-announcer.svelte.ts';
 
@@ -692,9 +847,6 @@ export type { Highlighter } from './utilities/highlighter.ts';
 export { default as Timeline } from './components/timeline/index.ts';
 export type { TimelineProps } from './components/timeline/index.ts';
 
-export { default as TimelineItem } from './components/timeline-item/index.ts';
-export type { TimelineItemProps } from './components/timeline-item/index.ts';
-
 export { default as Toggle } from './components/toggle/index.ts';
 export type { ToggleProps } from './components/toggle/index.ts';
 
@@ -726,6 +878,20 @@ export type {
   TypographyVariant,
 } from './components/typography/index.ts';
 
+export {
+  default as VirtualList,
+  getFixedVirtualWindow,
+  parsePixelLength,
+  resolveVirtualItemHeight,
+  resolveVirtualOverscan,
+} from './components/virtual-list/index.ts';
+export type {
+  FixedVirtualWindow,
+  FixedVirtualWindowItem,
+  VirtualListProps,
+  VirtualListRowContext,
+} from './components/virtual-list/index.ts';
+
 export { default as VisuallyHidden } from './components/visually-hidden/index.ts';
 export type {
   VisuallyHiddenElement,

package/src/schema-types.ts

@@ -13,6 +13,16 @@
 export interface ComponentSchemaUnsupportedProp {
   readonly name: string;
   readonly reason: string;
+  /**
+   * `true` when the prop is required on the component; omitted when it is
+   * optional. Present for props that the JSON schema cannot express but that are
+   * still part of the component's API (e.g. a required `onselect: () => void`
+   * callback), so tooling and docs can report them faithfully. An absent value
+   * is treated as not-required.
+   */
+  readonly required?: boolean;
+  /** The prop's authored JSDoc description, when one exists. */
+  readonly description?: string;
 }
 
 export interface ComponentSchemaMetadata {

package/src/styles/all.css.d.ts

@@ -0,0 +1,7 @@
+// Type stub for the CSS-only `@lostgradient/cinder/styles[...]` subpath. The
+// matching `types` condition in package.json#exports points here so a
+// side-effect `import` of the stylesheet typechecks under
+// `moduleResolution: bundler` (an ambient `declare module` in the consumer is
+// ignored once the specifier resolves to a real file). `export {}` makes this
+// a module (not a global script) exposing no bindings — a CSS side-effect import.
+export {};

package/src/styles/base-guard.ts

@@ -0,0 +1,95 @@
+/**
+ * Dev-only guard for the "import cinder/styles first" rule.
+ *
+ * When a consumer imports a per-component CSS subpath (e.g. `@lostgradient/cinder/badge/styles`)
+ * WITHOUT first importing `@lostgradient/cinder/styles`, the `@layer` order declaration is
+ * never established. CSS cascade layers get created in insertion order instead of
+ * the declared order (`cinder.tokens → cinder.foundation → cinder.components →
+ * cinder.utilities`), silently inverting cascade priority: utilities can no longer
+ * override component defaults, and token rules may lose to component rules.
+ *
+ * The guard detects this by reading `--cinder-base-loaded` from `:root`. This
+ * custom property is set by `src/styles/index.css` (the `@lostgradient/cinder/styles` entry
+ * point) inside a `@layer cinder.tokens` block that appears AFTER all `@import`
+ * rules — CSS-spec-valid placement. The property is intentionally NOT set by
+ * `src/styles/tokens.css`, which is also exported independently as
+ * `@lostgradient/cinder/styles/tokens`. This ensures that importing only `@lostgradient/cinder/styles/tokens`
+ * does not falsely satisfy the guard.
+ * If the property is absent when this module executes, the base was not loaded
+ * first and a warning fires once.
+ *
+ * This module is browser-only: `getComputedStyle` does not exist on the server.
+ * The `DEV` constant from `esm-env` is replaced at build time with `false` in
+ * production builds, so the entire warning block is dead code in prod and gets
+ * tree-shaken by any bundler that handles constant folding (Vite, esbuild, Rollup,
+ * Bun).
+ *
+ * Usage — add this import alongside your component style imports at your app entry:
+ *
+ * ```ts
+ * import '@lostgradient/cinder/styles';          // base: layer order + tokens + foundation + utilities
+ * import '@lostgradient/cinder/styles/guard';    // dev-only: warns if the above import was skipped
+ * import '@lostgradient/cinder/badge/styles';
+ * import '@lostgradient/cinder/button/styles';
+ * ```
+ *
+ * The guard is a no-op in production and when `@lostgradient/cinder/styles` is correctly loaded
+ * first. It adds zero runtime cost in the happy path: the `DEV` branch is
+ * eliminated by the bundler before it reaches the browser.
+ */
+
+import { BROWSER, DEV } from 'esm-env';
+
+/**
+ * The CSS custom property set by `@lostgradient/cinder/styles` on `:root` inside
+ * `@layer cinder.tokens`. Presence of this property on the document root
+ * indicates the base stylesheet was loaded and the `@layer` order is declared.
+ */
+export const BASE_LOADED_PROPERTY = '--cinder-base-loaded';
+
+/**
+ * Returns `true` when `@lostgradient/cinder/styles` has been loaded — i.e. when the
+ * `--cinder-base-loaded` custom property is present on the supplied root
+ * element.
+ *
+ * Accepts an `Element` parameter so tests can inject a mock element with the
+ * property set or absent, making the check hermetic without a real browser.
+ * Production callers always pass `document.documentElement`.
+ */
+export function isBaseLoaded(root: Element): boolean {
+  return getComputedStyle(root).getPropertyValue(BASE_LOADED_PROPERTY).trim() === '1';
+}
+
+/**
+ * The warning message emitted once when the guard detects a missing base import.
+ * Exported so tests can assert the exact text without duplicating the string.
+ */
+export const MISSING_BASE_WARNING =
+  '[cinder] `@lostgradient/cinder/styles` was not imported before a per-component style subpath. ' +
+  'The `@layer` cascade order is undefined — utilities may not override component ' +
+  "defaults. Fix: add `import '@lostgradient/cinder/styles'` before any `import '@lostgradient/cinder/<component>/styles'` " +
+  'in your app entry.';
+
+// Module-level side-effect: warn once when the guard detects the base is absent.
+// The `DEV && BROWSER` guard ensures:
+//   - In production (`DEV === false`): the entire block is dead code, tree-shaken.
+//   - On the server (`BROWSER === false`): `getComputedStyle` is unavailable; skip.
+//   - In the browser during development: check once at module evaluation time.
+if (DEV && BROWSER) {
+  // `requestAnimationFrame` defers the check one tick so any same-module-chunk
+  // CSS that was co-imported with this guard has a chance to be applied before
+  // we read computed styles. Without the deferral, the check races the
+  // stylesheet application in some bundlers.
+  requestAnimationFrame(() => {
+    // Skip the check entirely when no stylesheets are attached to the document.
+    // A test environment (jsdom, Bun's browser-condition test runner) loads no
+    // real CSS, so `getComputedStyle` custom properties always return `""` —
+    // indistinguishable from "base not loaded." When no stylesheets are present,
+    // the cascade ordering question is moot: nothing is fighting over layers yet.
+    if (document.styleSheets.length === 0) return;
+
+    if (!isBaseLoaded(document.documentElement)) {
+      console.warn(MISSING_BASE_WARNING);
+    }
+  });
+}

package/src/styles/components/_dismiss-button.css

@@ -50,7 +50,7 @@
    * doesn't "stick" after tap. */
   @media (hover: hover) {
     .cinder-_dismiss-button:hover {
-      background: color-mix(in oklch, currentColor, transparent 80%);
+      background: color-mix(in oklch, currentColor, transparent 75%);
     }
   }
 }

package/src/styles/components/_field-label.css

@@ -0,0 +1,20 @@
+@layer cinder.components {
+  /* Shared required-field marker. One definition consumed by every form
+     control's inline label, by FormField, and by the standalone Label so the
+     indicator can never drift between surfaces.
+
+     A visible asterisk (not a color-only dot) so the "required" meaning is
+     conveyed by glyph shape, satisfying WCAG 1.4.1 for users who cannot
+     perceive the red color. The span is `aria-hidden` in markup — the field's
+     native `required`/`aria-required` attribute is the single signal exposed
+     to assistive technology, so the asterisk does not double-announce. */
+  .cinder-_required-marker {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    color: var(--cinder-danger);
+    font-size: var(--cinder-text-sm);
+    line-height: 0;
+    flex-shrink: 0;
+  }
+}

package/src/styles/components/_floating-surface.css

@@ -37,6 +37,23 @@
     background: var(--cinder-surface-hover);
   }
 
+  /*
+   * The keyboard cursor (`data-cinder-active`) gets a geometric ring on top of
+   * the background tint. The `--cinder-surface-hover` fill is intentionally a
+   * subtle ~1.1:1 step against the panel's `--cinder-surface-raised` — fine for
+   * pointer hover, but on its own it fails WCAG 1.4.11 (3:1 non-text contrast)
+   * for the *sole* keyboard-position indicator. `--cinder-ring-color` is the
+   * system focus-ring token (light arm clamped to L 0.58 specifically to clear
+   * 3:1 against near-white surfaces), so an inset ring makes the active row
+   * unambiguous in both themes. An inset `box-shadow` (not `outline`) is used so
+   * the ring follows the row's `border-radius`. Scoped to `data-cinder-active`
+   * only: `aria-selected` is the committed choice and must stay visually
+   * distinct from the transient keyboard cursor.
+   */
+  .cinder-_option-row[data-cinder-active] {
+    box-shadow: inset 0 0 0 1px var(--cinder-ring-color);
+  }
+
   .cinder-_option-row[aria-disabled='true'],
   .cinder-_option-row[data-cinder-disabled] {
     color: var(--cinder-text-disabled);
@@ -49,10 +66,23 @@
       box-shadow: none;
     }
 
-    .cinder-_option-row[data-cinder-active],
-    .cinder-_option-row[aria-selected='true'] {
+    /*
+     * Forced-colors strips `box-shadow`, so the keyboard cursor falls back to a
+     * system `Highlight` outline. A selected-but-not-active row is reset to no
+     * outline so the committed choice does not masquerade as the keyboard
+     * cursor. The `:not([data-cinder-active])` guard is load-bearing: a row that
+     * is BOTH selected and the cursor must keep its `Highlight` outline (equal
+     * specificity means a bare `[aria-selected='true']` reset would win on
+     * source order and erase the only forced-colors position indicator).
+     */
+    .cinder-_option-row[data-cinder-active] {
+      box-shadow: none;
       outline: 1px solid Highlight;
       outline-offset: -1px;
     }
+
+    .cinder-_option-row[aria-selected='true']:not([data-cinder-active]) {
+      outline: none;
+    }
   }
 }

package/src/styles/components/_input-frame.css

@@ -20,6 +20,21 @@
     border-color: var(--cinder-danger);
   }
 
+  /* On focus, swap the danger border for a danger-colored focus ring so the
+     invalid state still reads as an error (the neutral box-shadow ring alone
+     does not signal "error"). Zeroing the border without this replacement —
+     as an earlier pass did — left a focused invalid Select with no error
+     affordance at all. Mirrors the danger ring in textarea.css. */
+  .cinder-_input-frame[aria-invalid='true']:focus-visible,
+  .cinder-_input-frame[aria-invalid='true']:focus-within,
+  .cinder-_input-frame[data-invalid]:focus-visible,
+  .cinder-_input-frame[data-invalid]:focus-within {
+    border-color: transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-danger);
+  }
+
   .cinder-_input-frame:disabled,
   .cinder-_input-frame[data-disabled] {
     background: var(--cinder-surface-inset);
@@ -40,5 +55,20 @@
       outline: var(--cinder-ring-width) solid ButtonText;
       outline-offset: 3px;
     }
+
+    /* In forced-colors mode the box-shadow danger ring is suppressed and
+       --cinder-danger is not a system color, so the focused invalid state
+       above would otherwise read as a plain neutral focus outline with no
+       error signal. Restore an error-emphasis affordance with the `Mark`
+       system color (the WHCM keyword for flagged/annotated content). */
+    .cinder-_input-frame[aria-invalid='true']:focus-visible,
+    .cinder-_input-frame[aria-invalid='true']:focus-within,
+    .cinder-_input-frame[data-invalid]:focus-visible,
+    .cinder-_input-frame[data-invalid]:focus-within {
+      border-color: Mark;
+      outline: var(--cinder-ring-width) solid Mark;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
   }
 }