@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/faceted-filter-bar/index.css

@@ -23,8 +23,17 @@
   .cinder-faceted-filter-bar__facet {
     position: relative;
     display: inline-flex;
-    flex-shrink: 0;
     align-items:  center;
+    gap: var(--cinder-space-1);
+    flex-shrink: 0;
+  }
+
+  .cinder-faceted-filter-bar__facet-label {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    line-height: var(--cinder-leading-tight);
+    white-space: nowrap;
   }
 
   .cinder-faceted-filter-bar__select {

package/dist/server/components/faceted-filter-bar/index.js

@@ -4,6 +4,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/faceted-filter-bar/faceted-filter-bar.svelte
 import * as $8 from "svelte/internal/server";
+import { tick } from "svelte";
 
 // src/components/_visually-hidden-live-region.svelte
 import * as $ from "svelte/internal/server";
@@ -593,18 +594,25 @@ function Faceted_filter_bar($$renderer, $$props) {
       ...rest
     } = $$props;
     const searchId = $8.derived(() => `${generatedId}-search`);
+    let rootElement = undefined;
     let internalSearchQuery = "";
     const isSearchControlled = $8.derived(() => searchQuery !== undefined);
     const currentSearchQuery = $8.derived(() => isSearchControlled() ? searchQuery ?? "" : internalSearchQuery);
     function resolveFacetValue(key) {
       return appliedFilters.find((filter) => filter.key === key)?.value ?? "";
     }
+    function resolveFilterDisplayValue(key, value) {
+      const facet = facets.find((candidate) => candidate.key === key);
+      if (facet?.type !== "select")
+        return value;
+      return facet.options.find((option) => option.value === value)?.label ?? value;
+    }
     const hasAppliedFilters = $8.derived(() => appliedFilters.length > 0 || currentSearchQuery().length > 0);
     const totalActiveCount = $8.derived(() => appliedFilters.length);
     const summaryMessage = $8.derived(() => {
       if (totalActiveCount() === 0)
         return "";
-      const parts = appliedFilters.map((filter) => `${filter.label}: ${filter.value}`);
+      const parts = appliedFilters.map((filter) => `${filter.label}: ${resolveFilterDisplayValue(filter.key, filter.value)}`);
       return `${totalActiveCount()} active filter${totalActiveCount() === 1 ? "" : "s"}: ${parts.join(", ")}`;
     });
     function handleSearchInput(value) {
@@ -613,8 +621,16 @@ function Faceted_filter_bar($$renderer, $$props) {
       }
       onsearchchange?.(value);
     }
-    function handleFilterRemove(key) {
+    async function handleFilterRemove(key) {
+      const filterIndex = appliedFilters.findIndex((filter) => filter.key === key);
+      const facetFallbackKey = appliedFilters[filterIndex]?.key;
       onfilterremove?.(key);
+      await tick();
+      const removeButtons = Array.from(rootElement?.querySelectorAll(".cinder-chip__remove") ?? []);
+      const nextRemoveButton = removeButtons[Math.min(filterIndex, removeButtons.length - 1)];
+      const facetSelect = facetFallbackKey ? document.getElementById(`${generatedId}-facet-${facetFallbackKey}`) : null;
+      const searchInput = document.getElementById(searchId());
+      (nextRemoveButton ?? facetSelect ?? searchInput)?.focus();
     }
     function handleClearAll() {
       if (!isSearchControlled()) {
@@ -648,7 +664,7 @@ function Faceted_filter_bar($$renderer, $$props) {
       if (facet.type === "select") {
         $$renderer2.push("<!--[0-->");
         const selectFacet = facet;
-        $$renderer2.push(`<div class="cinder-faceted-filter-bar__facet"><label class="cinder-faceted-filter-bar__facet-label cinder-sr-only"${$8.attr("for", `${generatedId}-facet-${selectFacet.key}`)}>${$8.escape(selectFacet.label)}</label> `);
+        $$renderer2.push(`<div class="cinder-faceted-filter-bar__facet"><label class="cinder-faceted-filter-bar__facet-label"${$8.attr("for", `${generatedId}-facet-${selectFacet.key}`)}>${$8.escape(selectFacet.label)}</label> `);
         $$renderer2.select({
           id: `${generatedId}-facet-${selectFacet.key}`,
           class: "cinder-faceted-filter-bar__select",
@@ -696,10 +712,11 @@ function Faceted_filter_bar($$renderer, $$props) {
       const each_array_2 = $8.ensure_array_like(appliedFilters);
       for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
         let filter = each_array_2[$$index_2];
+        const displayValue = resolveFilterDisplayValue(filter.key, filter.value);
         Chip($$renderer2, {
           mode: "removable",
-          label: `${filter.label}: ${filter.value}`,
-          removeAriaLabel: `Remove filter: ${filter.label}: ${filter.value}`,
+          label: `${filter.label}: ${displayValue}`,
+          removeAriaLabel: `Remove filter: ${filter.label}: ${displayValue}`,
           disabled,
           onremove: () => handleFilterRemove(filter.key)
         });
@@ -710,6 +727,7 @@ function Faceted_filter_bar($$renderer, $$props) {
         size: "sm",
         class: "cinder-faceted-filter-bar__clear-all",
         disabled,
+        "aria-label": "Clear all filters",
         onclick: handleClearAll,
         children: ($$renderer3) => {
           $$renderer3.push(`<!---->Clear all`);
@@ -733,4 +751,4 @@ export {
   Faceted_filter_bar as FacetedFilterBar
 };
 
-//# debugId=7A46104A6C0BE8F164756E2164756E21
+//# debugId=917A1283287327BB64756E2164756E21

package/dist/server/components/file-upload/index.css

@@ -18,7 +18,7 @@
     border-radius: var(--cinder-radius-lg);
     background: var(--cinder-file-upload-background);
     padding: var(--cinder-space-4);
-    transition: border-color .15s, background-color .15s, box-shadow .15s;
+    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard), background-color var(--cinder-duration-fast) var(--cinder-ease-standard), box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .cinder-file-upload__dropzone[data-drag-active] {
@@ -33,7 +33,7 @@
   }
 
   .cinder-file-upload__dropzone:focus-within {
-    outline: 2px solid #0000;
+    outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
@@ -166,8 +166,8 @@
   .cinder-file-upload__progress-fill {
     background: var(--cinder-file-upload-progress-fill);
     inline-size: calc(clamp(0, var(--cinder-file-upload-progress, 0), 100) * 1%);
+    transition: inline-size var(--cinder-duration-fast) var(--cinder-ease-standard);
     block-size: 100%;
-    transition: inline-size .15s;
   }
 
   .cinder-file-upload__error {

package/dist/server/components/floating-action-button/floating-action-button.schema.js

@@ -7,9 +7,9 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
-    variant: {
+    shape: {
       enum: ["filled", "extended"],
-      description: "Visual variant. `filled` = circle, `extended` = pill.",
+      description: "Shape. `filled` = circle, `extended` = pill.",
       default: "filled"
     },
     size: {
@@ -17,7 +17,7 @@ var schema = {
       description: "Size of the FAB.",
       default: "md"
     },
-    color: {
+    variant: {
       enum: ["primary", "secondary", "surface"],
       description: "Color palette.",
       default: "primary"
@@ -42,7 +42,7 @@ var schema = {
       {
         name: "children",
         reason: "function-or-snippet",
-        description: "The icon (or icon + label for extended variant). Always provide `aria-label` when\nthe FAB renders an icon without visible text — i.e. the `filled` variant."
+        description: "The icon (or icon + label for extended shape). Always provide `aria-label` when\nthe FAB renders an icon without visible text — i.e. the `filled` shape."
       }
     ]
   }
@@ -52,4 +52,4 @@ export {
   floating_action_button_schema_default as default
 };
 
-//# debugId=D37AC0F1218E81EB64756E2164756E21
+//# debugId=5A81B038475AC92364756E2164756E21

package/dist/server/components/floating-action-button/index.css

@@ -45,11 +45,11 @@
     font-size: var(--cinder-text-xs);
   }
 
-  .cinder-fab[data-cinder-size="sm"][data-cinder-variant="filled"] {
+  .cinder-fab[data-cinder-size="sm"][data-cinder-shape="filled"] {
     inline-size: var(--cinder-space-10);
   }
 
-  .cinder-fab[data-cinder-size="sm"][data-cinder-variant="extended"] {
+  .cinder-fab[data-cinder-size="sm"][data-cinder-shape="extended"] {
     padding-inline: var(--cinder-space-4);
   }
 
@@ -58,11 +58,11 @@
     font-size: var(--cinder-text-sm);
   }
 
-  .cinder-fab[data-cinder-size="md"][data-cinder-variant="filled"] {
+  .cinder-fab[data-cinder-size="md"][data-cinder-shape="filled"] {
     inline-size: var(--cinder-space-12);
   }
 
-  .cinder-fab[data-cinder-size="md"][data-cinder-variant="extended"] {
+  .cinder-fab[data-cinder-size="md"][data-cinder-shape="extended"] {
     padding-inline: var(--cinder-space-6);
   }
 
@@ -71,41 +71,41 @@
     font-size: var(--cinder-text-lg);
   }
 
-  .cinder-fab[data-cinder-size="lg"][data-cinder-variant="filled"] {
+  .cinder-fab[data-cinder-size="lg"][data-cinder-shape="filled"] {
     inline-size: var(--cinder-space-16);
   }
 
-  .cinder-fab[data-cinder-size="lg"][data-cinder-variant="extended"] {
+  .cinder-fab[data-cinder-size="lg"][data-cinder-shape="extended"] {
     padding-inline: var(--cinder-space-8);
   }
 
-  .cinder-fab[data-cinder-color="primary"] {
+  .cinder-fab[data-cinder-variant="primary"] {
     --_cinder-fab-ring: var(--cinder-ring-on-accent);
     background: var(--cinder-accent);
     color: var(--cinder-accent-contrast);
   }
 
-  .cinder-fab[data-cinder-color="primary"]:disabled, .cinder-fab[data-cinder-color="primary"][aria-disabled="true"] {
+  .cinder-fab[data-cinder-variant="primary"]:disabled, .cinder-fab[data-cinder-variant="primary"][aria-disabled="true"] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
 
-  .cinder-fab[data-cinder-color="secondary"] {
+  .cinder-fab[data-cinder-variant="secondary"] {
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
   }
 
-  .cinder-fab[data-cinder-color="secondary"]:disabled, .cinder-fab[data-cinder-color="secondary"][aria-disabled="true"] {
+  .cinder-fab[data-cinder-variant="secondary"]:disabled, .cinder-fab[data-cinder-variant="secondary"][aria-disabled="true"] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
 
-  .cinder-fab[data-cinder-color="surface"] {
+  .cinder-fab[data-cinder-variant="surface"] {
     background: var(--cinder-surface);
     color: var(--cinder-text);
   }
 
-  .cinder-fab[data-cinder-color="surface"]:disabled, .cinder-fab[data-cinder-color="surface"][aria-disabled="true"] {
+  .cinder-fab[data-cinder-variant="surface"]:disabled, .cinder-fab[data-cinder-variant="surface"][aria-disabled="true"] {
     background: var(--cinder-surface-inset);
     color: var(--cinder-text-disabled);
   }
@@ -115,20 +115,20 @@
       --_cinder-fab-elevation: var(--cinder-shadow-lg);
     }
 
-    .cinder-fab[data-cinder-color="primary"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    .cinder-fab[data-cinder-variant="primary"]:hover:not(:disabled):not([aria-disabled="true"]) {
       background: var(--cinder-accent-hover);
     }
 
-    .cinder-fab[data-cinder-color="secondary"]:hover:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-color="surface"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    .cinder-fab[data-cinder-variant="secondary"]:hover:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-variant="surface"]:hover:not(:disabled):not([aria-disabled="true"]) {
       background: var(--cinder-surface-hover);
     }
   }
 
-  .cinder-fab[data-cinder-color="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
+  .cinder-fab[data-cinder-variant="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
     background: var(--cinder-accent-active-on-fill);
   }
 
-  .cinder-fab[data-cinder-color="secondary"]:active:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-color="surface"]:active:not(:disabled):not([aria-disabled="true"]) {
+  .cinder-fab[data-cinder-variant="secondary"]:active:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-variant="surface"]:active:not(:disabled):not([aria-disabled="true"]) {
     background: var(--cinder-surface-pressed);
   }
 

package/dist/server/components/floating-action-button/index.js

@@ -25,9 +25,9 @@ function devWarn(message, ...args) {
 function Floating_action_button($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     const {
-      variant = "filled",
+      shape = "filled",
       size = "md",
-      color = "primary",
+      variant = "primary",
       disabled = false,
       children,
       class: customClassName,
@@ -43,9 +43,9 @@ function Floating_action_button($$renderer, $$props) {
     const resolvedTabindex = $.derived(() => disabled ? -1 : tabindex);
     const mergedClassName = $.derived(() => classNames("cinder-fab", customClassName));
     const dataAttributes = $.derived(() => ({
-      "data-cinder-variant": variant,
+      "data-cinder-shape": shape,
       "data-cinder-size": size,
-      "data-cinder-color": color
+      "data-cinder-variant": variant
     }));
     const resolvedAriaLabel = $.derived(() => typeof ariaLabel === "string" && ariaLabel.trim().length > 0 ? ariaLabel : undefined);
     const resolvedAriaLabelledBy = $.derived(() => typeof ariaLabelledBy === "string" && ariaLabelledBy.trim().length > 0 ? ariaLabelledBy : undefined);
@@ -103,4 +103,4 @@ export {
   Floating_action_button as FloatingActionButton
 };
 
-//# debugId=D448C32D9E6DD07164756E2164756E21
+//# debugId=F93C8E7DEB93BD9064756E2164756E21

package/dist/server/components/form-field/index.css

@@ -24,16 +24,6 @@
     cursor: not-allowed;
   }
 
-  .cinder-form-field__required {
-    display: inline-block;
-    background-color: var(--cinder-danger);
-    border-radius: 50%;
-    flex-shrink: 0;
-    align-self:  center;
-    width: 6px;
-    height: 6px;
-  }
-
   .cinder-form-field__description {
     font-size: var(--cinder-text-xs);
     line-height: var(--cinder-leading-normal);

package/dist/server/components/form-field/index.js

@@ -116,7 +116,7 @@ function Form_field($$renderer, $$props) {
     $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-form-field", className)))}><label${$.attr("id", labelId())}${$.attr("for", id)} class="cinder-form-field__label"${$.attr("data-disabled", disabled || undefined)}>${$.escape(label)} `);
     if (required) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<span class="cinder-form-field__required" aria-hidden="true"></span>`);
+      $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -147,4 +147,4 @@ export {
   Form_field as FormField
 };
 
-//# debugId=47FF2123A07D5A7664756E2164756E21
+//# debugId=CFEF45E9C323B39064756E2164756E21

package/dist/server/components/input/index.js

@@ -80,6 +80,13 @@ function devWarn(message, ...args) {
   console.warn(message, ...args);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/input/input.svelte
 function calendarIcon($$renderer) {
   $$renderer.push(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
@@ -89,6 +96,7 @@ function Input($$renderer, $$props) {
     let {
       id,
       value = "",
+      onValueChange,
       label,
       description,
       error,
@@ -101,44 +109,80 @@ function Input($$renderer, $$props) {
       leadingInteractive = false,
       trailingInteractive = false,
       "aria-describedby": consumerDescribedBy,
+      "aria-invalid": consumerInvalid,
+      oninput: consumerOninput,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getFormFieldContext();
-    const defaultDescriptionId = $.derived(() => describeId(id, !!description));
-    const defaultErrorId = $.derived(() => errorId(id, !!error));
-    const ownDescriptionId = $.derived(() => description && defaultDescriptionId() === context?.descriptionId ? `${id}-input-description` : defaultDescriptionId());
-    const ownErrorId = $.derived(() => error && defaultErrorId() === context?.errorId ? `${id}-input-error` : defaultErrorId());
-    const resolvedDescriptionId = $.derived(() => ownDescriptionId() ?? context?.descriptionId);
-    const resolvedErrorId = $.derived(() => ownErrorId() ?? context?.errorId);
-    const describedBy = $.derived(() => composeDescribedBy(resolvedDescriptionId(), resolvedErrorId(), consumerDescribedBy));
-    const resolvedAriaInvalid = $.derived(() => error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-    const resolvedRequired = $.derived(() => required ?? context?.required ?? false);
-    const resolvedDisabled = $.derived(() => disabled ?? context?.disabled ?? false);
+    const field = $.derived(() => resolveFieldControl({
+      id,
+      generatedId: id,
+      context,
+      hasDescription: !!description,
+      hasError: !!error,
+      localIdNamespace: "input",
+      consumerDescribedBy,
+      consumerInvalid,
+      required,
+      disabled
+    }));
+    const ownDescriptionId = $.derived(() => field().ownDescriptionId);
+    const ownErrorId = $.derived(() => field().ownErrorId);
+    const describedBy = $.derived(() => field().describedBy);
+    const resolvedAriaInvalid = $.derived(() => field().ariaInvalid);
+    const resolvedRequired = $.derived(() => field().required);
+    const resolvedDisabled = $.derived(() => field().disabled);
     const isNativeDateInput = $.derived(() => type === "date");
     const rendersNativeDateIcon = $.derived(() => isNativeDateInput() && !trailing);
     const hasTrailing = $.derived(() => !!trailing || isNativeDateInput());
     const hasGroupWrapper = $.derived(() => !!leading || hasTrailing());
-    const isInvalid = $.derived(() => resolvedAriaInvalid() === "true" || resolvedAriaInvalid() === true);
+    const isInvalid = $.derived(() => resolvedAriaInvalid() === "true");
+    let inputNode = undefined;
+    let resetSyncTimeout;
+    function syncValueAfterFormReset() {
+      if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+      resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (inputNode)
+          value = inputNode.value;
+      }, 0);
+    }
+    function handleInput(event) {
+      const target = event.currentTarget;
+      const committed = commitValue(target.value, onValueChange, (next) => {
+        value = next;
+      });
+      target.value = committed;
+      consumerOninput?.(event);
+    }
     function inputElement($$renderer3) {
       $$renderer3.push(`<input${$.attributes({
         id,
         type,
+        ...rest,
         disabled: resolvedDisabled(),
         required: resolvedRequired(),
         value,
         class: $.clsx(classNames("cinder-input", className)),
         "data-cinder-native-date": rendersNativeDateIcon() ? "" : undefined,
         "aria-invalid": resolvedAriaInvalid(),
-        "aria-describedby": describedBy(),
-        ...rest
+        "aria-describedby": describedBy()
       }, undefined, undefined, undefined, 4)}/>`);
     }
     $$renderer2.push(`<div class="cinder-input-field">`);
     if (label) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)}</label>`);
+      $$renderer2.push(`<label${$.attr("for", id)} class="cinder-input-field__label"${$.attr("data-disabled", resolvedDisabled() || undefined)}>${$.escape(label)} `);
+      if (resolvedRequired()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></label>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
@@ -201,4 +245,4 @@ export {
   Input
 };
 
-//# debugId=C09808FE7D42CD9C64756E2164756E21
+//# debugId=EE5C64C16D83099964756E2164756E21

package/dist/server/components/input/input.schema.js

@@ -56,6 +56,11 @@ var schema = {
         name: "leading",
         reason: "function-or-snippet"
       },
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed value before the bindable value is written. Return a replacement value to transform it."
+      },
       {
         name: "trailing",
         reason: "function-or-snippet"
@@ -74,4 +79,4 @@ export {
   input_schema_default as default
 };
 
-//# debugId=81C3F4D2D9692D7464756E2164756E21
+//# debugId=4E671CC2AFDFB84A64756E2164756E21

package/dist/server/components/invocation-rule-builder/index.css

@@ -32,6 +32,36 @@
     overflow-wrap: anywhere;
     flex: auto;
     min-inline-size: 0;
+    margin: 0;
+  }
+
+  .cinder-invocation-rule-builder__rule-label-field {
+    flex: auto;
+    min-inline-size: 0;
+  }
+
+  .cinder-invocation-rule-builder__rule-label-input {
+    min-block-size: var(--cinder-control-height-sm, 2rem);
+    padding-inline: var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background: var(--cinder-surface);
+    color: var(--cinder-text);
+    font: inherit;
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+    inline-size: 100%;
+  }
+
+  .cinder-invocation-rule-builder__rule-label-input:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-invocation-rule-builder__rule-label-input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
   }
 
   .cinder-invocation-rule-builder__rule-controls {
@@ -45,9 +75,8 @@
     display: block;
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-semibold);
-    letter-spacing: .05em;
     text-transform: uppercase;
-    color: var(--cinder-text-muted);
+    color: var(--cinder-text);
     margin-block-end: var(--cinder-space-2);
   }
 
@@ -66,7 +95,6 @@
 
   .cinder-invocation-rule-builder__condition-select {
     block-size: var(--cinder-control-height-sm, 2rem);
-    padding-inline: var(--cinder-space-2);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-surface);
@@ -74,8 +102,14 @@
     font-size: var(--cinder-text-sm);
     cursor: pointer;
     appearance: none;
+    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
+    background-position: calc(100% - .85rem), calc(100% - .55rem);
+    background-repeat: no-repeat;
+    background-size: .3rem .3rem, .3rem .3rem;
     flex: 8rem;
     min-inline-size: 6rem;
+    padding-inline-start: var(--cinder-space-2);
+    padding-inline-end: var(--cinder-space-7);
     font-family: inherit;
   }
 
@@ -128,7 +162,6 @@
 
   .cinder-invocation-rule-builder__action-select {
     block-size: var(--cinder-control-height-sm, 2rem);
-    padding-inline: var(--cinder-space-2);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-surface);
@@ -136,10 +169,22 @@
     font-size: var(--cinder-text-sm);
     cursor: pointer;
     appearance: none;
+    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
+    background-position: calc(100% - .85rem), calc(100% - .55rem);
+    background-repeat: no-repeat;
+    background-size: .3rem .3rem, .3rem .3rem;
     flex: auto;
+    padding-inline-start: var(--cinder-space-2);
+    padding-inline-end: var(--cinder-space-7);
     font-family: inherit;
   }
 
+  .cinder-invocation-rule-builder__validation {
+    margin: 0 0 var(--cinder-space-2);
+    color: var(--cinder-color-warning-fg);
+    font-size: var(--cinder-text-xs);
+  }
+
   .cinder-invocation-rule-builder__action-select:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
     box-shadow: var(--_cinder-focus-ring-shadow);
@@ -161,8 +206,8 @@
     flex-shrink: 0;
     justify-content: center;
     align-items:  center;
-    block-size: 1.75rem;
-    inline-size: 1.75rem;
+    block-size: 2rem;
+    inline-size: 2rem;
     padding: 0;
     font-family: inherit;
   }