@flowdrop/flowdrop 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/components/NodeSwapPicker.svelte

@@ -313,9 +313,7 @@
   }
 
   .swap-picker__input:focus {
-    outline: none;
     border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
   }
 
   .swap-picker__input::placeholder {

package/dist/components/PortMappingRow.svelte

@@ -136,9 +136,7 @@
   }
 
   .port-mapping-row__select:focus {
-    outline: none;
     border-color: var(--fd-ring);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
   }
 
   .port-mapping-row__select--dropped {

package/dist/components/SchemaForm.svelte

@@ -473,11 +473,6 @@
     color: var(--fd-foreground);
   }
 
-  .schema-form__button--secondary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .schema-form__button--primary {
     background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
@@ -498,13 +493,6 @@
     transform: translateY(0);
   }
 
-  .schema-form__button--primary:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.4),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
   .schema-form__button-spinner {
     width: 1rem;
     height: 1rem;

package/dist/components/SettingsModal.svelte

@@ -259,11 +259,6 @@
     color: var(--fd-foreground);
   }
 
-  .flowdrop-settings-modal__close:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   /* Content */
   .flowdrop-settings-modal__content {
     flex: 1;

package/dist/components/SettingsPanel.svelte

@@ -198,7 +198,8 @@
           description: 'Visual style and layout of the editor',
           oneOf: [
             { const: 'default', title: 'Default' },
-            { const: 'minimal', title: 'Minimal' }
+            { const: 'minimal', title: 'Minimal' },
+            { const: 'drafter', title: 'Drafter' }
           ],
           default: 'default'
         }
@@ -538,11 +539,6 @@
     color: var(--fd-primary-foreground);
   }
 
-  .flowdrop-settings-panel__tab:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   :global(.flowdrop-settings-panel__tab-icon) {
     font-size: var(--fd-text-base);
   }

package/dist/components/ThemeToggle.svelte

@@ -135,11 +135,6 @@
     border-color: var(--fd-border-strong);
   }
 
-  .flowdrop-theme-toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   .flowdrop-theme-toggle:active {
     transform: scale(0.98);
   }

package/dist/components/UniversalNode.svelte

@@ -17,6 +17,9 @@
 
   const fd = getInstance();
 
+  // Element ref used only to reach xyflow's node wrapper (our ancestor).
+  let universalNodeEl: HTMLDivElement;
+
   let {
     data,
     selected = false
@@ -61,6 +64,34 @@
     shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
   );
 
+  // Keyboard activation lives on xyflow's node wrapper — the single focusable,
+  // arrow-movable element SvelteFlow manages. Because the wrapper is our
+  // ancestor, its keydown events never bubble down into our markup, so we bind
+  // directly to it. Enter/Space opens the node's config, mirroring the
+  // double-click (and single-click for square/atom) mouse paths. Node selection
+  // and arrow-key movement remain SvelteFlow's job.
+  $effect(() => {
+    const wrapper = universalNodeEl?.closest<HTMLElement>('.svelte-flow__node');
+    if (!wrapper) return;
+
+    function onWrapperKeydown(event: KeyboardEvent): void {
+      // Only when the node itself is focused — not an inner field (e.g. an
+      // editable note) — so we don't hijack typing.
+      if (event.target !== wrapper) return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        data.onConfigOpen?.({
+          id: data.nodeId ?? 'unknown',
+          type: resolvedComponentName,
+          data
+        });
+      }
+    }
+
+    wrapper.addEventListener('keydown', onWrapperKeydown);
+    return () => wrapper.removeEventListener('keydown', onWrapperKeydown);
+  });
+
   /**
    * Get the node component for the given type from the registry.
    *
@@ -129,7 +160,7 @@
   }
 </script>
 
-<div class="universal-node">
+<div class="universal-node" bind:this={universalNodeEl}>
   <!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
   {#if nodeComponent}
     <!-- Svelte 5 dynamic component limitation; reactivity maintained via $derived -->

package/dist/components/WorkflowEditor.svelte

@@ -26,7 +26,7 @@
   import CanvasController from './CanvasController.svelte';
   import FlowDropZone from './FlowDropZone.svelte';
   import EdgeRefresher from './EdgeRefresher.svelte';
-  import { tick, untrack } from 'svelte';
+  import { tick, untrack, onMount } from 'svelte';
   import type { EndpointConfig } from '../config/endpoints.js';
   import type { AuthProvider } from '../types/auth.js';
   import ConnectionLine from './ConnectionLine.svelte';
@@ -34,6 +34,7 @@
   import { m } from '../messages/index.js';
   import { provideInstance } from '../stores/getInstance.svelte.js';
   import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
+  import type { FlowDropGridVariant } from '../types/theme.js';
   import UniversalNode from './UniversalNode.svelte';
   import {
     EdgeStylingHelper,
@@ -56,7 +57,8 @@
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import { createEditorStateMachine } from '../stores/editorStateMachine.svelte.js';
-  import Icon from '@iconify/svelte';
+  import CanvasIconButton from './CanvasIconButton.svelte';
+  import CommandLineIcon from './icons/CommandLineIcon.svelte';
   import { DEV } from 'esm-env';
 
   interface Props {
@@ -85,6 +87,23 @@
     onToggleConsole?: () => void;
     /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
     instance?: FlowDropInstance;
+    /**
+     * Canvas background grid pattern. Supplied by App from the active theme's
+     * `config.canvas.grid` default; any theme can opt into 'lines' / 'cross'.
+     * Color is driven separately by the `--fd-grid-pattern-color` token.
+     * @default 'dots'
+     */
+    gridVariant?: FlowDropGridVariant;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template)
+     * on this instance's field registry. Batteries-included by default — node
+     * config fields with `format: 'markdown' | 'code' | 'template'` render real
+     * CodeMirror editors. The chunks are code-split (loaded lazily here), so
+     * the `/editor` static bundle stays light. Set `false` to keep the textarea
+     * fallback or register your own field components. See `features.builtinEditors`.
+     * @default true
+     */
+    builtinEditors?: boolean;
   }
 
   let props: Props = $props();
@@ -95,10 +114,36 @@
   // svelte-ignore state_referenced_locally
   const fd = provideInstance(props.instance);
 
+  // Batteries-included: register the built-in heavy form editors (markdown /
+  // code / template) on this instance's field registry so node config fields
+  // render real editors out of the box. Dynamic import is deliberate — the
+  // bundle guard only inspects *static* imports, and `form/markdown`/`form/code`
+  // statically re-export their CodeMirror components, so a static import here
+  // would leak CodeMirror into the light `/editor` entry. Importing lazily on
+  // mount keeps the static graph clean while the chunks load on demand.
+  // register*Field is idempotent per registry, so re-mounts are safe.
+  onMount(() => {
+    if (props.builtinEditors === false) return;
+    void (async () => {
+      const [code, markdown] = await Promise.all([
+        import('../form/code.js'),
+        import('../form/markdown.js')
+      ]);
+      code.registerCodeEditorField(fd.fields);
+      code.registerTemplateEditorField(fd.fields);
+      markdown.registerMarkdownEditorField(fd.fields);
+    })();
+  });
+
   // `mode` is the public API; the canvas only needs to know whether editing is
   // enabled. 'readonly' and 'locked' both disable interaction identically.
   const canvasEditable = $derived((props.mode ?? 'edit') === 'edit');
 
+  // Canvas grid pattern, supplied by the active theme's config.canvas.grid
+  // (App passes it down). BackgroundVariant's enum values are the same strings
+  // ('dots' | 'lines' | 'cross'), so the theme config maps straight through.
+  const gridVariant = $derived((props.gridVariant ?? 'dots') as BackgroundVariant);
+
   // ---------------------------------------------------------------------------
   // Editor State Machine
   // Centralizes reactive guards — replaces scattered boolean flags
@@ -875,23 +920,26 @@
             >
               <Controls />
               {#if canvasEditable && props.onToggleConsole}
-                <button
+                <CanvasIconButton
                   class="flowdrop-console-toggle"
-                  class:flowdrop-console-toggle--active={props.consoleOpen}
+                  label={m().layout.commandConsole}
+                  active={props.consoleOpen}
                   onclick={props.onToggleConsole}
-                  aria-label={m().layout.commandConsole}
-                  title={m().layout.commandConsole}
-                  type="button"
                 >
-                  <Icon icon="heroicons:command-line" width="18" height="18" />
-                </button>
+                  {#snippet icon()}
+                    <CommandLineIcon />
+                  {/snippet}
+                </CanvasIconButton>
               {/if}
               <!-- Always render Background for consistent bg color in dark/light mode -->
               <Background
                 gap={getEditorSettings().gridSize}
-                bgColor="var(--fd-background)"
-                variant={BackgroundVariant.Dots}
-                patternColor={getEditorSettings().showGrid ? undefined : 'transparent'}
+                bgColor="var(--fd-canvas-bg)"
+                variant={gridVariant}
+                lineWidth={1}
+                patternColor={getEditorSettings().showGrid
+                  ? 'var(--fd-grid-pattern-color)'
+                  : 'transparent'}
               />
               {#if getEditorSettings().showMinimap}
                 <MiniMap />
@@ -1006,48 +1054,11 @@
     justify-content: space-between;
   }
 
-  .flowdrop-console-toggle {
-    position: absolute;
+  /* Console toggle — placement only; visuals live in CanvasIconButton */
+  :global(.flowdrop-console-toggle) {
     bottom: 140px;
     left: 12px;
     z-index: 5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
-    color: var(--fd-muted-foreground);
-    cursor: pointer;
-    box-shadow: var(--fd-shadow-sm);
-    transition:
-      color var(--fd-transition-fast),
-      background-color var(--fd-transition-fast),
-      box-shadow var(--fd-transition-fast);
-  }
-
-  .flowdrop-console-toggle:hover {
-    color: var(--fd-foreground);
-    background-color: var(--fd-subtle);
-    box-shadow: var(--fd-shadow-md);
-  }
-
-  .flowdrop-console-toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
-  .flowdrop-console-toggle--active {
-    color: var(--fd-primary);
-    background-color: var(--fd-primary-muted);
-    border-color: var(--fd-primary);
-  }
-
-  .flowdrop-console-toggle--active:hover {
-    color: var(--fd-primary);
-    background-color: var(--fd-primary-muted);
   }
 
   :global(.flowdrop-workflow-editor .svelte-flow__node:hover) {

package/dist/components/WorkflowEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
+import type { FlowDropGridVariant } from '../types/theme.js';
 interface Props {
     endpointConfig?: EndpointConfig;
     /** Auth provider applied to this instance's API requests. */
@@ -27,6 +28,23 @@ interface Props {
     onToggleConsole?: () => void;
     /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
     instance?: FlowDropInstance;
+    /**
+     * Canvas background grid pattern. Supplied by App from the active theme's
+     * `config.canvas.grid` default; any theme can opt into 'lines' / 'cross'.
+     * Color is driven separately by the `--fd-grid-pattern-color` token.
+     * @default 'dots'
+     */
+    gridVariant?: FlowDropGridVariant;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template)
+     * on this instance's field registry. Batteries-included by default — node
+     * config fields with `format: 'markdown' | 'code' | 'template'` render real
+     * CodeMirror editors. The chunks are code-split (loaded lazily here), so
+     * the `/editor` static bundle stays light. Set `false` to keep the textarea
+     * fallback or register your own field components. See `features.builtinEditors`.
+     * @default true
+     */
+    builtinEditors?: boolean;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
     updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;

package/dist/components/chat/AIChatPanel.svelte

@@ -552,7 +552,7 @@
 
   .ai-chat-panel__messages::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .ai-chat-panel__messages::-webkit-scrollbar-thumb:hover {

package/dist/components/console/ConsoleAutocomplete.svelte

@@ -98,7 +98,7 @@
 
   .console-autocomplete::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 3px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-autocomplete__item {

package/dist/components/console/ConsoleOutput.svelte

@@ -68,12 +68,12 @@
 
   .console-output::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-output::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-output::-webkit-scrollbar-thumb:hover {

package/dist/components/form/FormArray.svelte

@@ -670,9 +670,7 @@
   }
 
   .form-array__item-toggle:focus-visible {
-    outline: none;
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   }
 
   .form-array__item-toggle :global(svg) {
@@ -717,11 +715,6 @@
     height: 1rem;
   }
 
-  .form-array__action-btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
-  }
-
   .form-array__action-btn:disabled {
     opacity: 0.35;
     cursor: not-allowed;
@@ -800,9 +793,7 @@
   }
 
   .form-array__input:focus {
-    outline: none;
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
   }
 
   .form-array__input--number {
@@ -837,9 +828,7 @@
   }
 
   .form-array__select:focus {
-    outline: none;
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
   }
 
   /* ============================================
@@ -1002,11 +991,6 @@
     color: var(--fd-success-hover);
   }
 
-  .form-array__add-btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
-  }
-
   .form-array__add-btn:active:not(:disabled) {
     background-color: var(--fd-success);
   }

package/dist/components/form/FormAutocomplete.svelte

@@ -787,7 +787,6 @@
   }
 
   .form-autocomplete--disabled {
-    opacity: 0.6;
     pointer-events: none;
   }
 
@@ -804,7 +803,7 @@
     font-size: var(--fd-text-sm);
     font-family: inherit;
     color: var(--fd-foreground);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
     cursor: text;
@@ -817,11 +816,16 @@
   }
 
   .form-autocomplete__field--focused {
-    border-color: var(--fd-primary);
+    border-color: var(--fd-ring);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+  }
+
+  .form-autocomplete--disabled .form-autocomplete__field {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-muted);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+    opacity: 1;
   }
 
   /* Multiple mode - textarea-like styling */

package/dist/components/form/FormCheckboxGroup.svelte

@@ -143,10 +143,6 @@
     transform: scale(1);
   }
 
-  .form-checkbox__input:focus-visible + .form-checkbox__custom {
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .form-checkbox__label {
     font-size: var(--fd-text-sm);
     color: var(--fd-foreground);

package/dist/components/form/FormCodeEditor.svelte

@@ -364,7 +364,9 @@
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-lg);
     overflow: hidden;
-    background-color: var(--fd-muted);
+    /* Match plain form fields (FormTextField/Textarea/Select): rest on the
+       input surface, not the recessed --fd-muted. */
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
   }
@@ -374,12 +376,15 @@
     background-color: var(--fd-background);
   }
 
+  /* Compound widget: the focusable CodeMirror lives inside this container, so
+     the standard ring (centralized for simple elements) is drawn here via
+     :focus-within using the same --fd-ring tokens. Outline paints outside the
+     container's overflow, so it isn't clipped. */
   .form-code-editor__container:focus-within {
     border-color: var(--fd-primary);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   .form-code-editor--error .form-code-editor__container {
@@ -388,9 +393,6 @@
 
   .form-code-editor--error .form-code-editor__container:focus-within {
     border-color: var(--fd-error);
-    box-shadow:
-      0 0 0 3px rgba(239, 68, 68, 0.12),
-      var(--fd-shadow-sm);
   }
 
   /* Dark theme overrides */

package/dist/components/form/FormFieldLight.svelte

@@ -233,11 +233,11 @@
   function getEditorHint(editorType: string): string {
     switch (editorType) {
       case 'code-editor-fallback':
-        return "Code editor requires: import { registerCodeEditorField } from '@flowdrop/flowdrop/form/code'; registerCodeEditorField();";
+        return "Code editor not registered. Register it on the instance's field registry: import { registerCodeEditorField } from '@flowdrop/flowdrop/form/code'; registerCodeEditorField(instance.fields);";
       case 'markdown-editor-fallback':
-        return "Markdown editor requires: import { registerMarkdownEditorField } from '@flowdrop/flowdrop/form/markdown'; registerMarkdownEditorField();";
+        return "Markdown editor not registered. Register it on the instance's field registry: import { registerMarkdownEditorField } from '@flowdrop/flowdrop/form/markdown'; registerMarkdownEditorField(instance.fields);";
       case 'template-editor-fallback':
-        return "Template editor requires: import { registerTemplateEditorField } from '@flowdrop/flowdrop/form/code'; registerTemplateEditorField();";
+        return "Template editor not registered. Register it on the instance's field registry: import { registerTemplateEditorField } from '@flowdrop/flowdrop/form/code'; registerTemplateEditorField(instance.fields);";
       default:
         return 'This field type requires additional registration.';
     }

package/dist/components/form/FormMarkdownEditor.svelte

@@ -641,7 +641,8 @@
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-lg);
     overflow: hidden;
-    background-color: var(--fd-muted);
+    /* Match plain form fields: rest on the input surface, not --fd-muted. */
+    background-color: var(--fd-background);
     transition: border-color var(--fd-transition-normal);
   }
 
@@ -655,12 +656,13 @@
     border-color: var(--fd-border-strong);
   }
 
+  /* Compound widget: ring drawn on the body via :focus-within, using the
+     standard --fd-ring tokens (outline isn't clipped by the container overflow). */
   .form-markdown-editor__body:focus-within {
     border-color: var(--fd-primary);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px var(--fd-primary-muted),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   /* ── Status bar ────────────────────────────────── */
@@ -702,7 +704,8 @@
 
   .form-markdown-editor__body :global(.cm-editor) {
     height: var(--editor-height, 300px);
-    background-color: var(--fd-muted) !important;
+    /* Match plain form fields: white input surface (overrides oneDark in dark mode). */
+    background-color: var(--fd-background) !important;
     color: var(--fd-foreground) !important;
   }
 

package/dist/components/form/FormNumberField.svelte

@@ -102,11 +102,7 @@
   }
 
   .form-number-field:focus {
-    outline: none;
     border-color: var(--fd-primary);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
   }
 </style>

package/dist/components/form/FormRangeField.svelte

@@ -165,12 +165,6 @@
       0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  .form-range-field:focus::-webkit-slider-thumb {
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.2),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
   /* Firefox - Track */
   .form-range-field::-moz-range-track {
     height: 6px;
@@ -205,20 +199,7 @@
       0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  .form-range-field:focus::-moz-range-thumb {
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.2),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
-  /* Focus styles */
-  .form-range-field:focus {
-    outline: none;
-  }
-
-  .form-range-field:focus-visible {
-    outline: none;
-  }
+  /* Focus ring is centralized in base.css (outline on the range input). */
 
   /* Value display row */
   .form-range-values {

package/dist/components/form/FormSelect.svelte

@@ -85,7 +85,7 @@
     font-size: var(--fd-text-sm);
     font-family: inherit;
     color: var(--fd-foreground);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
     cursor: pointer;
@@ -98,12 +98,16 @@
   }
 
   .form-select:focus {
-    outline: none;
-    border-color: var(--fd-primary);
+    border-color: var(--fd-ring);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+  }
+
+  .form-select:disabled {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-muted);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+    opacity: 1;
   }
 
   .form-select__icon {