@lostgradient/cinder 0.1.1 → 0.3.0

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';
 
@@ -89,11 +92,37 @@ export { default as Callout } from './components/callout/index.ts';
 export type { CalloutProps, CalloutVariant } from './components/callout/index.ts';
 
 export { default as Card } from './components/card/index.ts';
-export type { CardProps, CardTone, CardVariant } from './components/card/index.ts';
+export type { CardPadding, CardProps, CardTone, CardVariant } from './components/card/index.ts';
 
 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,
+  ChoiceGridContext,
+  ChoiceGridItemState,
+  ChoiceGridProps,
+} from './components/choice-grid/index.ts';
+
+export { default as ChoiceGridItem } from './components/choice-grid-item/index.ts';
+export type { ChoiceGridItemProps } from './components/choice-grid-item/index.ts';
+
 export { default as Chip } from './components/chip/index.ts';
 export type {
   ChipDensity,
@@ -180,6 +209,31 @@ 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,
+  DataTableProps,
+  DataTableRow,
+} from './components/data-table/index.ts';
+
+export { default as DateRangeField } from './components/date-range-field/index.ts';
+export type {
+  DateRangeDatePreset,
+  DateRangeFieldProps,
+  DateRangeValue,
+} from './components/date-range-field/index.ts';
+
 export { default as DescriptionList } from './components/description-list/index.ts';
 export type {
   DescriptionListItem,
@@ -215,7 +269,12 @@ export type {
 } from './components/dropdown/index.ts';
 
 export { default as DropdownItem } from './components/dropdown-item/index.ts';
-export type { DropdownItemProps, DropdownItemVariant } from './components/dropdown-item/index.ts';
+export type {
+  DropdownItemAnchorProps,
+  DropdownItemButtonProps,
+  DropdownItemProps,
+  DropdownItemVariant,
+} from './components/dropdown-item/index.ts';
 
 export { default as DropdownGroup } from './components/dropdown-group/index.ts';
 export type { DropdownGroupProps } from './components/dropdown-group/index.ts';
@@ -235,6 +294,24 @@ 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,
+  EventStreamState,
+  EventStreamViewerProps,
+  StreamEvent,
+} 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';
 
@@ -269,6 +346,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';
 
@@ -300,9 +383,26 @@ 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';
 
+export { default as CapabilityGate } from './components/capability-gate/index.ts';
+export type {
+  CapabilityGateProps,
+  CapabilityGateState,
+  CapabilityGateVariant,
+} from './components/capability-gate/index.ts';
+
 export { default as KanbanBoard } from './components/kanban-board/index.ts';
 export type {
   KanbanBoardCardContext,
@@ -318,6 +418,13 @@ export type {
 export { default as Kbd } from './components/kbd/index.ts';
 export type { KbdProps } from './components/kbd/index.ts';
 
+export { default as KeyboardShortcuts } from './components/keyboard-shortcuts/index.ts';
+export type {
+  KeyboardShortcutEntry,
+  KeyboardShortcutGroup,
+  KeyboardShortcutsProps,
+} from './components/keyboard-shortcuts/index.ts';
+
 export { default as Label } from './components/label/index.ts';
 export type { LabelProps } from './components/label/index.ts';
 
@@ -330,6 +437,9 @@ export type { LineChartProps, LineChartSchemaProps } from './components/line-cha
 export { default as LoadMore } from './components/load-more/index.ts';
 export type { LoadMoreProps } from './components/load-more/index.ts';
 
+export { default as MediaControls } from './components/media-controls/index.ts';
+export type { MediaControlsLayout, MediaControlsProps } from './components/media-controls/index.ts';
+
 export { default as MarkdownEditor } from './components/markdown-editor/index.ts';
 export type {
   EditorHandle,
@@ -354,12 +464,21 @@ export type {
 export { default as Message } from './components/message/index.ts';
 export type { MessageProps, MessageRole } from './components/message/index.ts';
 
+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,
@@ -376,6 +495,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,
@@ -391,6 +526,9 @@ export type { PinInputMode, PinInputProps } from './components/pin-input/index.t
 export { default as Popover } from './components/popover/index.ts';
 export type { PopoverPlacement, PopoverProps, PopoverRole } from './components/popover/index.ts';
 
+export { default as PricingCard } from './components/pricing-card/index.ts';
+export type { PricingCardProps } from './components/pricing-card/index.ts';
+
 export { default as Progress } from './components/progress/index.ts';
 export type { ProgressProps, ProgressSize, ProgressVariant } from './components/progress/index.ts';
 
@@ -406,6 +544,14 @@ 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,
+  RunStepStatus,
+  RunStepTimelineProps,
+} from './components/run-step-timeline/index.ts';
+
 export { default as ResizablePanels } from './components/resizable-panels/index.ts';
 export type {
   ResizablePanelDefinition,
@@ -446,6 +592,15 @@ 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,
+  SchemaFormStandardSchema,
+  SchemaFormSubmitHandler,
+} from './components/schema-form/index.ts';
+
 export { default as ScrollArea } from './components/scroll-area/index.ts';
 export type {
   ScrollAreaDirection,
@@ -455,6 +610,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,
@@ -476,9 +634,15 @@ export type {
   SelectionPopoverProps,
 } from './components/selection-popover/index.ts';
 
+export { default as ShareCard } from './components/share-card/index.ts';
+export type { ShareCardAction, ShareCardProps } from './components/share-card/index.ts';
+
 export { default as Sheet } from './components/sheet/index.ts';
 export type { SheetProps } from './components/sheet/index.ts';
 
+export { default as ShortcutHint } from './components/shortcut-hint/index.ts';
+export type { ShortcutHintProps } from './components/shortcut-hint/index.ts';
+
 export { default as SideNavigation } from './components/side-navigation/index.ts';
 export type { SideNavigationProps } from './components/side-navigation/index.ts';
 
@@ -502,6 +666,9 @@ export type {
 export { default as Skeleton } from './components/skeleton/index.ts';
 export type { SkeletonProps } from './components/skeleton/index.ts';
 
+export { default as SkipLink } from './components/skip-link/index.ts';
+export type { SkipLinkProps, SkipLinkSchemaProps } from './components/skip-link/index.ts';
+
 export { default as Slider } from './components/slider/index.ts';
 export type { SliderMode, SliderProps, SliderValue } from './components/slider/index.ts';
 
@@ -511,9 +678,36 @@ export type {
   StackedListItemProps,
 } from './components/stacked-list-item/index.ts';
 
+export { default as Spectrogram } from './components/spectrogram/index.ts';
+export type {
+  SpectrogramFrame,
+  SpectrogramProps,
+  SpectrogramSchemaProps,
+} from './components/spectrogram/index.ts';
+
+export { default as SpectrumChart } from './components/spectrum-chart/index.ts';
+export type {
+  SpectrumBin,
+  SpectrumChartProps,
+  SpectrumChartSchemaProps,
+} from './components/spectrum-chart/index.ts';
+
 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';
 
@@ -534,6 +728,12 @@ export type {
   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';
 
@@ -591,6 +791,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';
 
@@ -616,9 +823,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';
 
@@ -650,8 +854,29 @@ 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,
   VisuallyHiddenProps,
 } from './components/visually-hidden/index.ts';
+
+export { default as Waveform } from './components/waveform/index.ts';
+export type {
+  WaveformProps,
+  WaveformRenderMode,
+  WaveformSchemaProps,
+} from './components/waveform/index.ts';

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/_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,19 @@
       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-color: Mark;
+      box-shadow: none;
+    }
   }
 }