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

package/dist/components/WorkflowEditor.svelte

@@ -26,13 +26,15 @@
   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';
   import FlowDropEdge from './FlowDropEdge.svelte';
   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,
@@ -55,11 +57,14 @@
   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 {
     endpointConfig?: EndpointConfig;
+    /** Auth provider applied to this instance's API requests. */
+    authProvider?: AuthProvider;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
     /**
      * Editor interaction mode. `'edit'` allows node drag/connect/select and
@@ -82,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();
@@ -92,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
@@ -596,7 +644,7 @@
   // Configure endpoints when props change
   $effect(() => {
     if (props.endpointConfig) {
-      ConfigurationHelper.configureEndpoints(fd.api, props.endpointConfig);
+      ConfigurationHelper.configureEndpoints(fd.api, props.endpointConfig, props.authProvider);
     }
   });
 
@@ -872,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 />
@@ -1003,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

@@ -1,9 +1,13 @@
 import '@xyflow/svelte/dist/style.css';
 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. */
+    authProvider?: AuthProvider;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
     /**
      * Editor interaction mode. `'edit'` allows node drag/connect/select and
@@ -24,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

@@ -369,7 +369,12 @@
         history: history.slice(0, -1) // all except current message
       };
 
-      const response = await chatService.sendMessage(fd.api.config, workflowId, request);
+      const response = await chatService.sendMessage(
+        fd.api.config,
+        workflowId,
+        request,
+        fd.api.authProvider
+      );
       const displayMsg = processResponse(response.content);
       displayMessages.push(displayMsg);
     } catch (err) {
@@ -547,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

@@ -25,7 +25,7 @@
   import Icon from '@iconify/svelte';
   import type { AutocompleteConfig, AuthProvider } from '../../types/index.js';
   import type { FieldOption } from './types.js';
-  import { buildFetchHeaders } from '../../utils/fetchWithAuth.js';
+  import { authenticatedFetch } from '../../utils/fetchWithAuth.js';
   import { logger } from '../../utils/logger.js';
   import { m } from '../../messages/index.js';
 
@@ -245,16 +245,15 @@
 
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
     try {
-      // Build headers with authentication (call getter to get current value)
-      const headers = await buildFetchHeaders(getAuthProvider?.());
-
       timeoutId = setTimeout(() => controller.abort(), 5000);
 
-      const response = await fetch(buildUrl(query), {
-        method: 'GET',
-        headers,
-        signal: controller.signal
-      });
+      // authenticatedFetch merges auth headers (call getter for current value)
+      // and applies the 401/403 lifecycle consistently with the rest of the lib.
+      const response = await authenticatedFetch(
+        buildUrl(query),
+        { method: 'GET', signal: controller.signal },
+        { authProvider: getAuthProvider?.() }
+      );
 
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -788,7 +787,6 @@
   }
 
   .form-autocomplete--disabled {
-    opacity: 0.6;
     pointer-events: none;
   }
 
@@ -805,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;
@@ -818,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

@@ -48,6 +48,8 @@
   const fd = getInstance();
   import type { FieldSchema } from './types.js';
   import { getSchemaOptions } from './types.js';
+  import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+  import type { AuthProvider } from '../../types/auth.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -60,11 +62,33 @@
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
   }
 
-  let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
+  let {
+    fieldKey,
+    schema,
+    value,
+    required = false,
+    animationIndex = 0,
+    node,
+    nodes,
+    edges,
+    workflowId,
+    authProvider,
+    onChange
+  }: Props = $props();
 
   /**
    * Computed description ID for ARIA association
@@ -209,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.';
     }
@@ -246,6 +270,11 @@
         variables={schema.variables}
         placeholderExample={schema.placeholderExample as string | undefined}
         autocomplete={schema.autocomplete}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
         onChange={(val: unknown) => onChange(val)}
       />
     {:else if fieldType === 'checkbox-group'}

package/dist/components/form/FormFieldLight.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { FieldSchema } from './types.js';
+import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
+import type { AuthProvider } from '../../types/auth.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;
@@ -10,6 +12,16 @@ interface Props {
     required?: boolean;
     /** Animation delay index for staggered animations */
     animationIndex?: number;
+    /** Current workflow node (optional, forwarded to registered editors for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, forwarded to registered editors for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, forwarded to registered editors for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, forwarded to registered editors for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, forwarded to registered editors for API requests) */
+    authProvider?: AuthProvider;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
 }

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 {