@lostgradient/cinder 0.9.0 → 0.12.0

package/src/components/confirm-dialog/confirm-dialog.svelte

@@ -4,11 +4,25 @@ export {};
 
 <script lang="ts">
 import Button from '../button/button.svelte';
+import Input from '../input/input.svelte';
 import Modal from '../modal/modal.svelte';
 import { classNames } from '../../utilities/class-names.ts';
 const descriptionId = $props.id();
-let { open = $bindable(false), title, description, cancelLabel = 'Cancel', confirmLabel, destructive = false, onconfirm, oncancel, triggerRef = null, class: className, } = $props();
+const typedConfirmationId = `${descriptionId}-typed-confirmation`;
+let { open = $bindable(false), title, description, cancelLabel = 'Cancel', confirmLabel, destructive = false, typeToConfirm, typeToConfirmLabel, onconfirm, oncancel, triggerRef = null, class: className, } = $props();
 const describedById = $derived(description ? descriptionId : undefined);
+const normalizedTypeToConfirm = $derived(typeToConfirm?.trim() || undefined);
+const normalizedTypeToConfirmLabel = $derived(typeToConfirmLabel?.trim() || undefined);
+let typedConfirmation = $state('');
+let previousOpen = open;
+const typedConfirmationMatches = $derived(normalizedTypeToConfirm === undefined ||
+    typedConfirmation.trim().toLowerCase() === normalizedTypeToConfirm.toLowerCase());
+$effect(() => {
+    if (open === previousOpen)
+        return;
+    previousOpen = open;
+    typedConfirmation = '';
+});
 function handleCancel() {
     // Mirror Modal's dismiss() ordering: state first, then callback. No try/catch —
     // consumer errors must propagate so tests, error boundaries, and observability see them.
@@ -34,10 +48,24 @@ function handleConfirm() {
     <p id={descriptionId} class="cinder-confirm-dialog__description">{description}</p>
   {/if}
 
+  {#if normalizedTypeToConfirm !== undefined}
+    <Input
+      id={typedConfirmationId}
+      class="cinder-confirm-dialog__typed-confirmation"
+      bind:value={typedConfirmation}
+      label={normalizedTypeToConfirmLabel ?? `Type "${normalizedTypeToConfirm}" to confirm`}
+      autocomplete="off"
+    />
+  {/if}
+
   {#snippet footer()}
     <Button variant="secondary" autofocus onclick={handleCancel}>{cancelLabel}</Button>
-    <Button variant={destructive ? 'danger' : 'primary'} onclick={handleConfirm}
-      >{confirmLabel}</Button
+    <Button
+      variant={destructive ? 'danger' : 'primary'}
+      disabled={!typedConfirmationMatches}
+      onclick={handleConfirm}
     >
+      {confirmLabel}
+    </Button>
   {/snippet}
 </Modal>

package/src/components/confirm-dialog/confirm-dialog.types.ts

@@ -36,6 +36,13 @@ export type ConfirmDialogProps = {
    * receives default focus regardless — color is never the sole destructive signal.
    */
   destructive?: boolean;
+  /**
+   * When set, renders a labelled text input and disables the confirm button until the
+   * trimmed input matches this value case-insensitively.
+   */
+  typeToConfirm?: string;
+  /** Visible label for the typed-confirmation input. Defaults to `Type "<value>" to confirm`. */
+  typeToConfirmLabel?: string;
   /** Fired when the user activates the confirm button. Required. Component closes itself after. */
   onconfirm: () => void;
   /**

package/src/components/connection-indicator/connection-indicator.css

@@ -0,0 +1,136 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  /* ========================================
+ * CONNECTION INDICATOR
+ *
+ * Small standalone status pill for a live connection. Color is driven
+ * exclusively from the `data-cinder-status` attribute via the existing
+ * semantic status tokens (`--cinder-success`, `--cinder-warning`,
+ * `--cinder-text-muted`) — never hard-code hex values when consuming this
+ * component. `polling` is deliberately quieter than `live`: it carries no
+ * motion and a lighter font-weight so it can never be mistaken for push,
+ * even under grayscale or forced-colors rendering where the color
+ * difference disappears.
+ * ======================================== */
+
+  .cinder-connection-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1-5);
+    padding: var(--cinder-space-0-5) var(--cinder-space-2-5);
+    border-radius: var(--cinder-radius-full);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    line-height: 1.25;
+    vertical-align: middle;
+  }
+
+  .cinder-connection-indicator__dot {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-radius: var(--cinder-radius-full);
+    background: currentColor;
+  }
+
+  .cinder-connection-indicator[data-cinder-status='live'] .cinder-connection-indicator__dot {
+    animation: cinder-connection-indicator-pulse 1.4s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-connection-indicator[data-cinder-status='live'] .cinder-connection-indicator__dot {
+      animation: none;
+    }
+  }
+
+  @keyframes cinder-connection-indicator-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  .cinder-connection-indicator__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    inline-size: 0.8125rem;
+    block-size: 0.8125rem;
+    color: currentColor;
+  }
+
+  /* connecting and reconnecting both spin the icon wrapper to signal in-progress work. This
+ * targets the wrapper span (not the inner svg with a :global() selector) because this file is
+ * a plain CSS asset imported from index.ts — the Svelte compiler never processes it, so
+ * :global() has no effect here and browsers drop the whole rule as an unknown pseudo-class.
+ * Rotating the wrapper rotates its svg child identically. */
+  .cinder-connection-indicator[data-cinder-status='connecting'] .cinder-connection-indicator__icon,
+  .cinder-connection-indicator[data-cinder-status='reconnecting']
+    .cinder-connection-indicator__icon {
+    animation: cinder-connection-indicator-spin var(--cinder-duration-spin) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-connection-indicator[data-cinder-status='connecting']
+      .cinder-connection-indicator__icon,
+    .cinder-connection-indicator[data-cinder-status='reconnecting']
+      .cinder-connection-indicator__icon {
+      animation: none;
+    }
+  }
+
+  @keyframes cinder-connection-indicator-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .cinder-connection-indicator__label {
+    color: inherit;
+  }
+
+  .cinder-connection-indicator__attempt {
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-normal);
+  }
+
+  /* ----------------------------------------
+ * Status → semantic token mapping
+ *
+ * `polling` reuses the same muted tone as `closed` but is disambiguated by
+ * its icon, its lack of motion (see above), and its label text — color is
+ * never the sole signal (WCAG 1.4.1).
+ * ---------------------------------------- */
+
+  .cinder-connection-indicator[data-cinder-status='connecting'] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='live'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='reconnecting'] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='polling'] {
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-normal);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='stale'] {
+    color: var(--cinder-info);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='closed'] {
+    color: var(--cinder-text-muted);
+  }
+}

package/src/components/connection-indicator/connection-indicator.examples.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "connection-indicator",
+  "import": "@lostgradient/cinder/connection-indicator",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Basic connection indicator",
+      "description": "A live connection pill with its default icon and label.",
+      "code": "<script lang=\"ts\">\n  import { ConnectionIndicator } from '@lostgradient/cinder/connection-indicator';\n</script>\n\n<ConnectionIndicator status=\"live\" />\n"
+    },
+    {
+      "id": "polling",
+      "title": "Polling vs live",
+      "description": "Polling reads quieter and different from live through icon, motion, and font-weight — not color alone.",
+      "code": "<script lang=\"ts\">\n  import { ConnectionIndicator } from '@lostgradient/cinder/connection-indicator';\n</script>\n\n<div class=\"example-preview-row\">\n  <ConnectionIndicator status=\"live\" />\n  <ConnectionIndicator status=\"polling\" />\n</div>\n"
+    },
+    {
+      "id": "reconnecting",
+      "title": "Reconnecting with attempt count",
+      "description": "The reconnecting state showing a retry attempt via the attempt snippet.",
+      "code": "<script lang=\"ts\">\n  import { ConnectionIndicator } from '@lostgradient/cinder/connection-indicator';\n</script>\n\n<ConnectionIndicator status=\"reconnecting\">\n  {#snippet attempt()}\n    attempt 3 of 5\n  {/snippet}\n</ConnectionIndicator>\n"
+    },
+    {
+      "id": "states",
+      "title": "All connection states",
+      "description": "Each of the six states with its own icon and text label. Colors come from shared semantic tokens, so some states intentionally share a tone (e.g. connecting/reconnecting) — the icon and text carry the distinction, never color alone.",
+      "code": "<script lang=\"ts\">\n  import { ConnectionIndicator } from '@lostgradient/cinder/connection-indicator';\n</script>\n\n<div class=\"example-preview-row\">\n  <ConnectionIndicator status=\"connecting\" />\n  <ConnectionIndicator status=\"live\" />\n  <ConnectionIndicator status=\"reconnecting\" />\n  <ConnectionIndicator status=\"polling\" />\n  <ConnectionIndicator status=\"stale\" />\n  <ConnectionIndicator status=\"closed\" />\n</div>\n"
+    }
+  ]
+}

package/src/components/connection-indicator/connection-indicator.schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "status": {
+      "enum": ["connecting", "live", "reconnecting", "polling", "stale", "closed"],
+      "description": "Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`."
+    },
+    "label": {
+      "type": "string",
+      "description": "Optional human label override. Replaces the default text for `status` (and the \"Connection: …\" accessible name)."
+    },
+    "class": {
+      "type": "string",
+      "description": "Extra classes appended to the root element."
+    }
+  },
+  "additionalProperties": false,
+  "required": ["status"],
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "attempt",
+        "reason": "function-or-snippet",
+        "description": "Attempt-count content rendered next to the label when `status` is `'reconnecting'`, e.g. \"attempt 3 of 5\". Ignored for other states."
+      }
+    ]
+  }
+}

package/src/components/connection-indicator/connection-indicator.schema.ts

@@ -0,0 +1,36 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    status: {
+      enum: ['connecting', 'live', 'reconnecting', 'polling', 'stale', 'closed'],
+      description:
+        'Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`.',
+    },
+    label: {
+      type: 'string',
+      description:
+        'Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name).',
+    },
+    class: {
+      type: 'string',
+      description: 'Extra classes appended to the root element.',
+    },
+  },
+  additionalProperties: false,
+  required: ['status'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'attempt',
+        reason: 'function-or-snippet',
+        description:
+          'Attempt-count content rendered next to the label when `status` is `\'reconnecting\'`, e.g. "attempt 3 of 5". Ignored for other states.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/connection-indicator/connection-indicator.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Loader from 'lucide-svelte/icons/loader';
+import RefreshCcwDot from 'lucide-svelte/icons/refresh-ccw-dot';
+import RefreshCw from 'lucide-svelte/icons/refresh-cw';
+import TriangleAlert from 'lucide-svelte/icons/triangle-alert';
+import Wifi from 'lucide-svelte/icons/wifi';
+import WifiOff from 'lucide-svelte/icons/wifi-off';
+import { classNames } from '../../utilities/class-names.ts';
+const statusLabels = {
+    connecting: 'Connecting',
+    live: 'Live',
+    reconnecting: 'Reconnecting',
+    polling: 'Polling',
+    stale: 'Stale',
+    closed: 'Closed',
+};
+const statusIcons = {
+    connecting: Loader,
+    live: Wifi,
+    reconnecting: RefreshCw,
+    polling: RefreshCcwDot,
+    stale: TriangleAlert,
+    closed: WifiOff,
+};
+let { status, label, attempt, class: className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = $props();
+// Normalize empty/whitespace-only ARIA name props to `undefined` so an empty
+// attribute is never emitted (which would suppress the accessible-name
+// fallback). A provided aria-labelledby takes precedence, so the automatic
+// aria-label default steps aside for it.
+const normalizedAriaLabel = $derived(ariaLabel?.trim() ? ariaLabel.trim() : undefined);
+const normalizedAriaLabelledby = $derived(ariaLabelledby?.trim() ? ariaLabelledby.trim() : undefined);
+const resolvedLabel = $derived(label?.trim() ? label.trim() : statusLabels[status]);
+const resolvedAriaLabel = $derived(normalizedAriaLabelledby !== undefined
+    ? undefined
+    : (normalizedAriaLabel ?? `Connection: ${resolvedLabel}`));
+const Icon = $derived(statusIcons[status]);
+</script>
+
+<div
+  {...rest}
+  class={classNames('cinder-connection-indicator', className)}
+  data-cinder-status={status}
+  role="status"
+  aria-live="polite"
+  aria-atomic="true"
+  aria-label={resolvedAriaLabel}
+  aria-labelledby={normalizedAriaLabelledby}
+>
+  {#if status === 'live'}
+    <span class="cinder-connection-indicator__dot" aria-hidden="true"></span>
+  {/if}
+  <span class="cinder-connection-indicator__icon" aria-hidden="true">
+    <Icon size={13} strokeWidth={2.25} />
+  </span>
+  <span class="cinder-connection-indicator__label">{resolvedLabel}</span>
+  {#if status === 'reconnecting' && attempt}
+    <span class="cinder-connection-indicator__attempt">{@render attempt()}</span>
+  {/if}
+</div>

package/src/components/connection-indicator/connection-indicator.types.ts

@@ -0,0 +1,58 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * The six connection lifecycle states ConnectionIndicator understands.
+ *
+ * Stamped directly onto the root as `data-cinder-status` and driving color
+ * exclusively through `connection-indicator.css` — there are no hard-coded
+ * color classes on the component. Each state also carries its own icon and
+ * text label so status is never communicated by color alone (WCAG 1.4.1).
+ *
+ * - `connecting` — initial handshake in progress, no data yet.
+ * - `live` — connected and actively receiving pushed updates.
+ * - `reconnecting` — a previously live connection dropped and is retrying.
+ * - `polling` — receiving updates via interval polling rather than push.
+ * - `stale` — connected but data has not refreshed within an expected window.
+ * - `closed` — the connection is intentionally or terminally closed.
+ */
+export type ConnectionIndicatorStatus =
+  | 'connecting'
+  | 'live'
+  | 'reconnecting'
+  | 'polling'
+  | 'stale'
+  | 'closed';
+
+/**
+ * Props for ConnectionIndicator.
+ *
+ * The component always renders `role="status"` with a computed accessible
+ * name of the form "Connection: {label}" (overridable via `aria-label`), so
+ * assistive technology gets the same signal as sighted users regardless of
+ * which visual treatment (icon, motion, font-weight) carries the difference
+ * between states.
+ */
+export type ConnectionIndicatorProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'class' | 'children'
+> & {
+  /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+  status: ConnectionIndicatorStatus;
+  /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+  label?: string;
+  /** Attempt-count content rendered next to the label when `status` is `'reconnecting'`, e.g. "attempt 3 of 5". Ignored for other states. */
+  attempt?: Snippet;
+  /** Extra classes appended to the root element. */
+  class?: string;
+};
+
+/** Schema-facing mirror of {@link ConnectionIndicatorProps}, omitting the non-serializable `attempt` snippet and native HTML attribute passthrough. */
+export interface ConnectionIndicatorSchemaProps {
+  /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+  status: ConnectionIndicatorStatus;
+  /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+  label?: string;
+  /** Extra classes appended to the root element. */
+  class?: string;
+}

package/src/components/connection-indicator/connection-indicator.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/connection-indicator/connection-indicator.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/connection-indicator/index.ts

@@ -0,0 +1,10 @@
+import './connection-indicator.css';
+import ConnectionIndicator from './connection-indicator.svelte';
+
+export default ConnectionIndicator;
+export type {
+  ConnectionIndicatorProps,
+  ConnectionIndicatorSchemaProps,
+  ConnectionIndicatorStatus,
+} from './connection-indicator.types.ts';
+export { ConnectionIndicator };

package/src/components/container/container.schema.json

@@ -19,6 +19,9 @@
     "as": {
       "enum": [
         "object",
+        "slot",
+        "style",
+        "title",
         "a",
         "abbr",
         "address",
@@ -94,11 +97,9 @@
         "search",
         "section",
         "select",
-        "slot",
         "small",
         "span",
         "strong",
-        "style",
         "sub",
         "summary",
         "sup",
@@ -111,7 +112,6 @@
         "th",
         "thead",
         "time",
-        "title",
         "tr",
         "u",
         "ul",

package/src/components/container/container.schema.ts

@@ -21,6 +21,9 @@ const schema = {
     as: {
       enum: [
         'object',
+        'slot',
+        'style',
+        'title',
         'a',
         'abbr',
         'address',
@@ -96,11 +99,9 @@ const schema = {
         'search',
         'section',
         'select',
-        'slot',
         'small',
         'span',
         'strong',
-        'style',
         'sub',
         'summary',
         'sup',
@@ -113,7 +114,6 @@ const schema = {
         'th',
         'thead',
         'time',
-        'title',
         'tr',
         'u',
         'ul',

package/src/components/faceted-filter-bar/faceted-filter-bar.schema.json

@@ -10,6 +10,10 @@
       "type": "string",
       "description": "Current text search query. When provided, the search field is controlled."
     },
+    "showSearch": {
+      "type": "boolean",
+      "description": "Whether to render the leading search field. Defaults to `true`."
+    },
     "searchPlaceholder": {
       "type": "string",
       "description": "Placeholder text shown in the leading search field."

package/src/components/faceted-filter-bar/faceted-filter-bar.schema.ts

@@ -12,6 +12,10 @@ const schema = {
       type: 'string',
       description: 'Current text search query. When provided, the search field is controlled.',
     },
+    showSearch: {
+      type: 'boolean',
+      description: 'Whether to render the leading search field. Defaults to `true`.',
+    },
     searchPlaceholder: {
       type: 'string',
       description: 'Placeholder text shown in the leading search field.',

package/src/components/faceted-filter-bar/faceted-filter-bar.svelte

@@ -10,7 +10,7 @@ import Chip from '../chip/chip.svelte';
 import Button from '../button/button.svelte';
 import { classNames } from '../../utilities/class-names.ts';
 const generatedId = $props.id();
-let { 'aria-label': ariaLabel = 'Filters', searchQuery, searchPlaceholder = 'Search…', searchAriaLabel = 'Search', facets = [], appliedFilters = [], disabled = false, class: className, onsearchchange, onfacetchange, onfilterremove, onclearall, ...rest } = $props();
+let { 'aria-label': ariaLabel = 'Filters', searchQuery, showSearch = true, searchPlaceholder = 'Search…', searchAriaLabel = 'Search', facets = [], appliedFilters = [], disabled = false, class: className, onsearchchange, onfacetchange, onfilterremove, onclearall, ...rest } = $props();
 const searchId = $derived(`${generatedId}-search`);
 let rootElement = $state();
 // Internal uncontrolled search value when searchQuery is not provided.
@@ -32,7 +32,7 @@ function resolveFilterDisplayValue(key, value) {
         return value;
     return facet.options.find((option) => option.value === value)?.label ?? value;
 }
-const hasAppliedFilters = $derived(appliedFilters.length > 0 || currentSearchQuery.length > 0);
+const hasAppliedFilters = $derived(appliedFilters.length > 0 || (showSearch && currentSearchQuery.length > 0));
 const totalActiveCount = $derived(appliedFilters.length);
 // Live region summary message — always in DOM, content changes when filters change.
 const summaryMessage = $derived.by(() => {
@@ -81,15 +81,17 @@ function getFacetCurrentValue(key) {
 >
   <!-- Controls row: search field + facet selects -->
   <div class="cinder-faceted-filter-bar__controls">
-    <SearchField
-      id={searchId}
-      class="cinder-faceted-filter-bar__search"
-      value={currentSearchQuery}
-      placeholder={searchPlaceholder}
-      aria-label={searchAriaLabel}
-      {disabled}
-      oninput={handleSearchInput}
-    />
+    {#if showSearch}
+      <SearchField
+        id={searchId}
+        class="cinder-faceted-filter-bar__search"
+        value={currentSearchQuery}
+        placeholder={searchPlaceholder}
+        aria-label={searchAriaLabel}
+        {disabled}
+        oninput={handleSearchInput}
+      />
+    {/if}
 
     {#each facets as facet (facet.key)}
       {#if facet.type === 'select'}

package/src/components/faceted-filter-bar/faceted-filter-bar.types.ts

@@ -69,6 +69,8 @@ export type FacetedFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'
   'aria-label'?: string;
   /** Current text search query. When provided, the search field is controlled. */
   searchQuery?: string;
+  /** Whether to render the leading search field. Defaults to `true`. */
+  showSearch?: boolean;
   /** Placeholder text shown in the leading search field. */
   searchPlaceholder?: string;
   /** Accessible label for the search input. Defaults to 'Search'. */

package/src/components/invocation-rule-builder/index.ts

@@ -5,10 +5,14 @@ export default InvocationRuleBuilder;
 export type {
   InvocationRule,
   InvocationRuleAction,
+  InvocationRuleBuilderMode,
   InvocationRuleBuilderProps,
   InvocationRuleBuilderSchemaProps,
   InvocationRuleChange,
   InvocationRuleCondition,
+  InvocationRuleConditionsOnlyOperator,
+  InvocationRuleFieldType,
   InvocationRuleOption,
+  InvocationRuleValueChoice,
 } from './invocation-rule-builder.types.ts';
 export { InvocationRuleBuilder };

package/src/components/invocation-rule-builder/invocation-rule-builder.css

@@ -160,6 +160,34 @@
     }
   }
 
+  /* ---- Typed condition value controls (conditions-only mode) ---- */
+
+  /* Enum values reuse the select chrome but keep the value input's wider flex-basis. */
+  .cinder-invocation-rule-builder__condition-value-select {
+    flex: 2 1 10rem;
+    min-inline-size: 6rem;
+  }
+
+  .cinder-invocation-rule-builder__condition-value-checkbox {
+    flex: 0 0 auto;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    accent-color: var(--cinder-accent);
+    cursor: pointer;
+  }
+
+  .cinder-invocation-rule-builder__condition-value-checkbox:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-invocation-rule-builder__condition-value-checkbox:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
+  }
+
   /* ---- Action rows ---- */
 
   .cinder-invocation-rule-builder__actions {

package/src/components/invocation-rule-builder/invocation-rule-builder.examples.json

@@ -9,6 +9,12 @@
       "description": "Configure which code review agents run based on pull request conditions such as changed paths, labels, and author membership.",
       "code": "<script lang=\"ts\">\n  import {\n    InvocationRuleBuilder,\n    type InvocationRule,\n    type InvocationRuleChange,\n    type InvocationRuleOption,\n  } from '@lostgradient/cinder/invocation-rule-builder';\n\n  const fieldOptions: InvocationRuleOption[] = [\n    { value: 'path', label: 'Path' },\n    { value: 'label', label: 'Label' },\n    { value: 'author-role', label: 'Author role' },\n    { value: 'event-type', label: 'Event type' },\n    { value: 'check-status', label: 'Check status' },\n  ];\n\n  const operatorOptions: InvocationRuleOption[] = [\n    { value: 'matches', label: 'matches' },\n    { value: 'is', label: 'is' },\n    { value: 'is-not', label: 'is not' },\n    { value: 'contains', label: 'contains' },\n    { value: 'failed', label: 'failed' },\n  ];\n\n  const actionOptions: InvocationRuleOption[] = [\n    { value: 'security-reviewer', label: 'Security Reviewer' },\n    { value: 'code-quality', label: 'Code Quality Agent' },\n    { value: 'dependency-audit', label: 'Dependency Audit' },\n    { value: 'performance-review', label: 'Performance Review' },\n  ];\n\n  let rules = $state<InvocationRule[]>([\n    {\n      id: 'rule-security',\n      label: 'Security review for sensitive paths',\n      conditions: [\n        { id: 'c1', field: 'path', operator: 'matches', value: 'src/auth/**' },\n        { id: 'c2', field: 'path', operator: 'matches', value: 'src/crypto/**' },\n      ],\n      actions: [{ id: 'a1', target: 'security-reviewer' }],\n    },\n    {\n      id: 'rule-deps',\n      label: 'Dependency changes',\n      conditions: [{ id: 'c3', field: 'path', operator: 'matches', value: 'package.json' }],\n      actions: [{ id: 'a2', target: 'dependency-audit' }],\n    },\n  ]);\n\n  function handleChange(nextRules: InvocationRule[], _change: InvocationRuleChange): void {\n    rules = nextRules;\n  }\n</script>\n\n<InvocationRuleBuilder\n  {rules}\n  onchange={handleChange}\n  {fieldOptions}\n  {operatorOptions}\n  {actionOptions}\n  label=\"PR routing rules\"\n/>\n"
     },
+    {
+      "id": "conditions-only",
+      "title": "Conditions-only mode",
+      "description": "Build alert-filter conditions with typed value inputs and a fixed comparison-operator set — no action targets, for cases like saved searches or alert filters that have nothing to invoke.",
+      "code": "<script lang=\"ts\">\n  import {\n    InvocationRuleBuilder,\n    type InvocationRule,\n    type InvocationRuleChange,\n    type InvocationRuleOption,\n  } from '@lostgradient/cinder/invocation-rule-builder';\n\n  const fieldOptions: InvocationRuleOption[] = [\n    { value: 'retry-count', label: 'Retry count', type: 'number' },\n    { value: 'is-flaky', label: 'Flaky', type: 'boolean' },\n    {\n      value: 'severity',\n      label: 'Severity',\n      type: 'enum',\n      options: [\n        { value: 'low', label: 'Low' },\n        { value: 'medium', label: 'Medium' },\n        { value: 'high', label: 'High' },\n      ],\n    },\n    { value: 'owner', label: 'Owner' },\n  ];\n\n  let rules = $state<InvocationRule[]>([\n    {\n      id: 'rule-flaky-high-severity',\n      label: 'Flaky high-severity retries',\n      conditions: [\n        { id: 'c1', field: 'is-flaky', operator: 'eq', value: 'true' },\n        { id: 'c2', field: 'severity', operator: 'eq', value: 'high' },\n        { id: 'c3', field: 'retry-count', operator: 'gte', value: '3' },\n      ],\n      actions: [],\n    },\n  ]);\n\n  function handleChange(nextRules: InvocationRule[], _change: InvocationRuleChange): void {\n    rules = nextRules;\n  }\n</script>\n\n<InvocationRuleBuilder\n  {rules}\n  onchange={handleChange}\n  {fieldOptions}\n  mode=\"conditions\"\n  label=\"Alert filter conditions\"\n/>\n"
+    },
     {
       "id": "readonly",
       "title": "Readonly rule summary",