@motion-proto/live-tokens 0.49.1 → 0.52.1

package/src/editor/ui/ThemePanel.svelte

@@ -22,8 +22,12 @@
     exportTheme,
     importTheme,
   } from '../core/themes/themeService';
+  import {
+    THEME_APPLIED_EVENT,
+    type AppliedThemeDetail,
+  } from '../core/themes/themeDocumentSync';
   import { countComponentsOffLook, lookProductionState } from '../core/themes/lookSummary';
-  import { previewTheme, previewColorsAndType, revertPreview } from '../core/preview/lookPreview';
+  import { commitPreview, previewTheme, previewColorsAndType, revertPreview } from '../core/preview/lookPreview';
   import {
     deleteColorsAndType,
     hydrateColorsAndType,
@@ -41,10 +45,17 @@
   } from '../core/themes/loadRows';
   import {
     listComponents,
+    componentConfigFromState,
+    writeWorkingComponentConfig,
     type ComponentSummary,
   } from '../core/components/componentConfigService';
   import { fontPairingLabel } from '../core/fonts/fontPairing';
-  import { componentDirty, editorState, colorsAndTypeDirty } from '../core/store/editorStore';
+  import {
+    componentDirty,
+    editorState,
+    colorsAndTypeDirty,
+    markComponentSaved,
+  } from '../core/store/editorStore';
   import { openThemeSlug } from '../core/store/editorConfigStore';
   import { editorView } from '../core/store/editorViewStore';
   import {
@@ -53,12 +64,14 @@
     bumpProductionRevision,
     liveMovedSinceBake,
     productionTheme,
+    bumpComponentActiveRevision,
   } from '../core/productionPulse';
   import { flashStatus } from '../core/flashStatus';
   import UIInfoPopover from './UIInfoPopover.svelte';
   import UIPillButton from './UIPillButton.svelte';
   import FileLoadList from './FileLoadList.svelte';
   import FilePill from './FilePill.svelte';
+  import UIDialog from './UIDialog.svelte';
   import SaveAsDialog from '../component-editor/scaffolding/SaveAsDialog.svelte';
 
   interface Props {
@@ -75,6 +88,9 @@
   let rows = $derived(buildLoadRows(files, colorsFiles));
   let showFileList = $state(false);
   let saveAsDialog = $state(false);
+  let saveComponentsDialog = $state(false);
+  let pendingComponentSave: (() => Promise<void>) | null = null;
+  let pendingComponentCount = $state(0);
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
 
   let currentDisplayName = $state('Motion Proto');
@@ -171,6 +187,19 @@
     await refreshProduction();
   });
 
+  // A consumer can load a theme from the host while this iframe stays open.
+  // The cross-document bridge hydrates this document's typed store; keep the
+  // panel's local identity/summary state on that same payload as well.
+  onMount(() => {
+    const handleThemeApplied = (event: Event) => {
+      const { result } = (event as CustomEvent<AppliedThemeDetail>).detail;
+      currentDisplayName = result.theme.name;
+      lookConfigs = result.theme.componentConfigs;
+    };
+    document.addEventListener(THEME_APPLIED_EVENT, handleThemeApplied);
+    return () => document.removeEventListener(THEME_APPLIED_EVENT, handleThemeApplied);
+  });
+
   // Re-read whenever an Adopt fires, here or in a component editor: it saves
   // the open theme and moves the production pointer, so the identity, the
   // component summary and the production state shown here all need to track.
@@ -188,10 +217,10 @@
     refreshComponents();
   });
 
-  // A capture reads the server's live state, so the colors and type on screen
-  // go to their buffer first — that is what makes Save and Adopt mean the look
-  // in front of you. A component's edits live in its own editor's state, which
-  // this panel cannot write, so those are the only ones a capture leaves behind.
+  // A capture reads the server's live state, so colors and type go to their
+  // buffer first. Component editors retain their own save boundary; when any
+  // are dirty, the theme panel offers to flush all of them in one explicit
+  // step before continuing.
   //
   // The gate is `colorsAndTypeDirty`, not history: history counts every entry,
   // components included, so it would flush the colors over component-only work.
@@ -200,20 +229,45 @@
     await persistColorsAndType(get(editorState), currentDisplayName);
   }
 
-  function confirmUnsavedComponents(action: string): boolean {
-    if (dirtyComponentCount === 0) return true;
-    const n = dirtyComponentCount;
-    return window.confirm(
-      `${n === 1 ? '1 component has' : `${n} components have`} unsaved edits. Those stay out `
-        + `until you save them in the component editor. ${action}`,
-    );
+  async function flushComponents(displayName = currentDisplayName): Promise<void> {
+    const dirtyComponents = Object.entries(get(componentDirty))
+      .filter(([, dirty]) => dirty)
+      .map(([component]) => component);
+    if (dirtyComponents.length === 0) return;
+
+    const state = get(editorState);
+    await Promise.all(dirtyComponents.map((component) =>
+      writeWorkingComponentConfig(
+        component,
+        componentConfigFromState(state, component, displayName),
+      ),
+    ));
+    for (const component of dirtyComponents) markComponentSaved(component);
+    bumpComponentActiveRevision();
   }
 
-  async function handleSave() {
-    if (activeIsProtected) return;
-    if (!confirmUnsavedComponents('Save the theme anyway?')) return;
+  function continueWithComponentChoice(action: () => Promise<void>): void {
+    const dirtyCount = Object.values(get(componentDirty)).filter(Boolean).length;
+    if (dirtyCount === 0) {
+      void action();
+      return;
+    }
+    pendingComponentCount = dirtyCount;
+    pendingComponentSave = action;
+    saveComponentsDialog = true;
+  }
+
+  async function confirmSaveAllComponents(): Promise<void> {
+    const action = pendingComponentSave;
+    pendingComponentSave = null;
+    saveComponentsDialog = false;
+    if (action) await action();
+  }
+
+  async function runSave(saveComponents: boolean) {
     saveStatus = 'saving';
     try {
+      if (saveComponents) await flushComponents();
       await flushColors();
       await saveActiveTheme(currentDisplayName);
       await refreshActive();
@@ -223,10 +277,21 @@
     }
   }
 
+  function handleSave() {
+    if (activeIsProtected) return;
+    continueWithComponentChoice(() => runSave(true));
+  }
+
   function openSaveAs() {
-    if (!confirmUnsavedComponents('Save the theme anyway?')) return;
-    showFileList = false;
-    saveAsDialog = true;
+    continueWithComponentChoice(async () => {
+      try {
+        await flushComponents();
+        showFileList = false;
+        saveAsDialog = true;
+      } catch {
+        flashStatus(setSaveStatus, 'error');
+      }
+    });
   }
 
   async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
@@ -266,10 +331,9 @@
     return 'Save this theme and ship it to production';
   });
 
-  async function handleAdopt() {
+  function handleAdopt() {
     if (production.inProduction || adoptStatus === 'adopting') return;
-    if (!confirmUnsavedComponents('Ship the theme anyway?')) return;
-    await runAdopt();
+    continueWithComponentChoice(() => runAdopt(true));
   }
 
   /**
@@ -278,9 +342,10 @@
    * Adopt, and which file holds the look is bookkeeping they should not have
    * to think about, so it forks to a theme of their own first.
    */
-  async function runAdopt() {
+  async function runAdopt(saveComponents = false) {
     adoptStatus = 'adopting';
     try {
+      if (saveComponents) await flushComponents();
       await flushColors();
       if (activeIsProtected) {
         const taken = new Set((await listThemes()).map((m) => m.fileName));
@@ -329,6 +394,13 @@
     previewLayer = null;
   }
 
+  function acceptPreview() {
+    commitPreview();
+    previewRow = null;
+    previewLook = null;
+    previewLayer = null;
+  }
+
   /** Paint whatever is selected, through the engine the mode calls for. A
    *  theme's colors and type are the slice embedded in it, so one look
    *  previews either way. */
@@ -386,26 +458,54 @@
     if (!row) return;
     if (unsavedEdits) {
       const ok = window.confirm(
-        'Loading a theme will reload the editor and discard unsaved changes. Continue?',
+        'Loading a theme will replace the editor’s current state and discard unsaved changes. Continue?',
       );
       if (!ok) return;
     }
-    // The window stays open until the page reloads: closing it would revert the
-    // preview and flash the outgoing look while Apply is in flight.
+    // The exact theme being opened is already painted. Hand that preview to
+    // the store load without restoring the old look across the request.
+    acceptPreview();
+    let result: Awaited<ReturnType<typeof applyTheme>>;
     try {
-      const result = await applyTheme(row.slug);
+      result = await applyTheme(row.slug);
       if (result.skippedComponents.length > 0) {
         window.alert(
           `Loaded "${row.name}". These components are not installed here, so their `
             + `saved settings were skipped:\n\n${result.skippedComponents.join(', ')}`,
         );
       }
-      // applyTheme opens the theme: it clears working deltas and points
-      // `themes/_active.json` at it. Reload to rehydrate through the resolver.
-      window.location.reload();
+      currentDisplayName = result.theme.name;
+      lookConfigs = result.theme.componentConfigs;
+      showFileList = false;
     } catch (err) {
       window.alert(`Failed to load theme: ${(err as Error).message}`);
+      // The selection remains visible after a failed request; put its preview
+      // back so the dialog and page continue to agree.
+      previewRow = row;
+      previewLook = row.kind === 'look' ? await loadTheme(row.slug).catch(() => null) : null;
+      if (previewLook) await repaint();
+      return;
+    }
+
+    // The picker is a one-step choose-and-ship flow. Package/user presets are
+    // already saved documents, so adopting can publish them directly. The
+    // protected baseline cannot be production's editable document; mirror the
+    // normal Adopt behavior and fork it first when it is selected.
+    adoptStatus = 'adopting';
+    try {
+      if (row.slug === 'default') {
+        const taken = new Set((await listThemes()).map((m) => m.fileName));
+        await saveAsTheme(freshName('my-theme', taken), 'My Theme');
+        await refreshActive();
+      }
+      await adoptLook();
+      bumpProductionRevision();
+      flashStatus(setAdoptStatus, 'done');
+    } catch (err) {
+      window.alert(`Theme loaded, but could not be adopted: ${(err as Error).message}`);
+      flashStatus(setAdoptStatus, 'error', { durationMs: 3000 });
     }
+    await Promise.all([refreshFiles(), refreshComponents(), refreshProduction()]);
   }
 
   /**
@@ -554,6 +654,11 @@
     if (showFileList) refreshFiles();
   }
 
+  function openThemePicker() {
+    showFileList = true;
+    refreshFiles();
+  }
+
   function rowBadge(row: LoadRow) {
     return row.kind === 'layer'
       ? { label: 'colors & type', title: 'Holds colors and type only, no shapes' }
@@ -575,7 +680,7 @@
         <strong>Load</strong> opens the list. Picking a theme shows it on the page as a preview, so you can try each look with nothing written to disk. Pick another to compare, or <strong>Cancel</strong> to go back to where you were.
       </p>
       <p>
-        <strong>Save</strong> opens the previewed theme: the editor works on it from then on, and components it does not carry go back to their defaults. Trying a theme never changes what your site ships.
+        <strong>Save</strong> opens and adopts the previewed theme: the editor works on it from then on and production ships it immediately. Components it does not carry go back to their defaults. Previewing and cancelling never change what your site ships.
       </p>
       <p>
         <strong>Colors and type only</strong> in that window takes the palette and the fonts and leaves your shapes and component settings alone.
@@ -584,7 +689,7 @@
         The <strong>active</strong> theme is the one the editor has open. <strong>Adopt</strong> saves it and ships it to production, colors and type plus every component you changed. The line under the name says whether production is running this theme.
       </p>
       <p>
-        Save and Adopt both take the colors and type on screen as they are. Component edits are the exception: save those in the component's own editor first.
+        If components have unsaved edits, Save and Adopt offer to save all of them before continuing. You can cancel to review or save components individually.
       </p>
       <p>
         <strong>Motion Proto</strong> is the protected baseline. To start customizing, <strong>Save As</strong> a new theme first.
@@ -603,13 +708,21 @@
         </span>
       {/if}
     </div>
-    <FilePill
-      name={currentDisplayName}
-      isProtected={activeIsProtected}
-      protectedTitle="Protected default theme"
-      title={currentDisplayName}
-      style="display: flex;"
-    />
+    <button
+      type="button"
+      class="theme-name-trigger"
+      onclick={openThemePicker}
+      title="Open the Theme Picker"
+      aria-label={`Open Theme Picker. Current theme: ${currentDisplayName}`}
+    >
+      <FilePill
+        name={currentDisplayName}
+        isProtected={activeIsProtected}
+        protectedTitle="Protected default theme"
+        title={currentDisplayName}
+        style="display: flex;"
+      />
+    </button>
     <span class="mfm-prod-status" class:applied={production.inProduction}>
       <i class="mfm-status-dot" aria-hidden="true"></i>
       <span>
@@ -668,7 +781,7 @@
         class="mfm-btn mfm-btn-row"
         class:active={showFileList}
         onclick={toggleFileList}
-        title="Preview a theme, then save it to load it"
+        title="Open the Theme Picker"
       >
         <i class="fas fa-folder-open"></i>
         <span>Load…</span>
@@ -741,13 +854,29 @@
   style="display: none;"
 />
 
+<UIDialog
+  bind:show={saveComponentsDialog}
+  title="Unsaved component edits"
+  cancelLabel="Cancel"
+  confirmLabel={pendingComponentCount === 1 ? 'Save component' : 'Save all components'}
+  onconfirm={confirmSaveAllComponents}
+  width="400px"
+>
+  <p class="save-components-message">
+    {pendingComponentCount === 1
+      ? '1 component has unsaved edits.'
+      : `${pendingComponentCount} components have unsaved edits.`}
+    Save {pendingComponentCount === 1 ? 'it' : 'all of them'} and continue?
+  </p>
+</UIDialog>
+
 <FileLoadList
   bind:show={showFileList}
-  title="Load Theme"
+  title="Theme Picker"
   files={rows}
   activeFileName={activeRowId}
   selectedFileName={previewRow?.fileName ?? null}
-  selectedBadge={{ label: 'Preview', title: 'Shown on the page now. Save to keep it.' }}
+  selectedBadge={{ label: 'Preview', title: 'Shown on the page now. Save to use and publish it.' }}
   {rowBadge}
   cancelLabel={previewRow ? 'Cancel' : 'Close'}
   confirmLabel={previewRow ? 'Save' : ''}
@@ -788,6 +917,13 @@
 />
 
 <style>
+  .save-components-message {
+    margin: 0;
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: 1.5;
+  }
+
   .look-panel {
     --mfm-active: #5aa85e;
     --mfm-rail-neutral: var(--ui-border);
@@ -850,6 +986,34 @@
     color: var(--ui-text-tertiary);
   }
 
+  .theme-name-trigger {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
+  .theme-name-trigger :global(.file-pill) {
+    width: 100%;
+  }
+
+  .theme-name-trigger:hover :global(.file-pill),
+  .theme-name-trigger:focus-visible :global(.file-pill) {
+    border-color: var(--ui-border-higher);
+    box-shadow: inset 0 0 0 1px var(--ui-border-high);
+  }
+
+  .theme-name-trigger:focus-visible {
+    outline: 2px solid var(--ui-text-accent);
+    outline-offset: 2px;
+    border-radius: var(--ui-radius-md);
+  }
+
   .mfm-badge {
     display: inline-flex;
     align-items: center;

package/src/editor/ui/Toggle.svelte

@@ -3,10 +3,18 @@
     checked?: boolean;
     disabled?: boolean;
     label?: string;
+    /** Put the label before the switch, for rows that align to a right edge. */
+    labelFirst?: boolean;
     onchange?: (checked: boolean) => void;
   }
 
-  let { checked = $bindable(false), disabled = false, label = '', onchange }: Props = $props();
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    label = '',
+    labelFirst = false,
+    onchange,
+  }: Props = $props();
 
   function toggle() {
     if (disabled) return;
@@ -15,7 +23,7 @@
   }
 </script>
 
-<label class="toggle" class:disabled>
+<label class="toggle" class:disabled class:label-first={labelFirst}>
   <button
     type="button"
     role="switch"
@@ -41,6 +49,10 @@
     cursor: pointer;
     user-select: none;
 
+    &.label-first {
+      flex-direction: row-reverse;
+    }
+
     &.disabled {
       cursor: not-allowed;
 

package/src/editor/ui/UIDialog.svelte

@@ -55,7 +55,13 @@
 {#if show}
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
   <div class="ui-dialog-backdrop" onclick={self(handleClose)}>
-    <div class="ui-dialog" style="width: {width}; max-width: {width};">
+    <div
+      class="ui-dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title || 'Dialog'}
+      style="width: {width}; max-width: {width};"
+    >
       {#if title}
         <div class="ui-dialog-header">
           <h3 class="ui-dialog-title">{title}</h3>

package/src/editor/ui/UIFontFamilySelector.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, untrack } from 'svelte';
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
   import { editorState } from '../core/store/editorStore';
-  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
   import type { FontFamily, FontSource, FontSourceKind } from '../core/themes/themeTypes';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
@@ -93,8 +91,8 @@
   }
 
   function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name?.startsWith('--font-')) readResolved();
+    const names = (e as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (names.some((name) => name.startsWith('--font-'))) readResolved();
   }
 
   function initFromCurrent() {
@@ -160,19 +158,21 @@
 
   // Re-derive `chosenKey` / `chosenFamilyId` when `variable` changes (the
   // VariantGroup tabs view reuses the same selector instance across states).
-  let lastSeenVariable: string | null = $state(null);
-  run(() => {
-    if (variable !== lastSeenVariable) {
-      lastSeenVariable = variable;
+  $effect(() => {
+    // A tab can reuse this instance with a different variable. Track only the
+    // prop; initialization writes local selector state and is intentionally
+    // untracked to prevent a self-triggering effect.
+    variable;
+    untrack(() => {
       initFromCurrent();
-    }
+    });
   });
 
   onMount(() => {
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
   onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 
   let activeLabel = $derived(chosenFamilyId

package/src/editor/ui/UIFontSizeSelector.svelte

@@ -2,7 +2,7 @@
   import { run } from 'svelte/legacy';
 
   import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
   import UIVariantSelector from './UIVariantSelector.svelte';
 
   interface Props {
@@ -74,8 +74,8 @@
   }
 
   function handleVarChange(e: Event) {
-    const detail = (e as CustomEvent<{ name: string }>).detail;
-    if (detail?.name?.startsWith('--font-size-') || detail?.name?.startsWith('--icon-size-')) readPxValues();
+    const names = (e as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (names.some((name) => name.startsWith('--font-size-') || name.startsWith('--icon-size-'))) readPxValues();
   }
 
   // Re-read sizes when the target variable's scale changes
@@ -86,10 +86,10 @@
 
   onMount(() => {
     readPxValues();
-    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
   onDestroy(() => {
-    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+    document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange);
   });
 </script>
 

package/src/editor/ui/UIFontWeightSelector.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { CSS_VARS_CHANGE_EVENT, type CssVarsChangeDetail } from '../core/cssVarSync';
+  import {
+    fontWeightAvailability,
+    inferFontFamilyVariable,
+  } from '../core/fonts/fontWeightAvailability';
   import UIVariantSelector from './UIVariantSelector.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
 
@@ -31,6 +38,44 @@
     { key: 'extrabold', label: 'Extra Bold', value: '800' },
     { key: 'black', label: 'Black', value: '900' },
   ] as const;
+
+  let availability = $state<ReturnType<typeof fontWeightAvailability>>(null);
+  let familyVariable = $derived(inferFontFamilyVariable(variable));
+
+  function refreshAvailability() {
+    if (!familyVariable) {
+      availability = null;
+      return;
+    }
+    const familyValue = getComputedStyle(document.documentElement)
+      .getPropertyValue(familyVariable)
+      .trim();
+    availability = fontWeightAvailability(
+      familyValue,
+      $editorState.fonts.sources,
+      $editorState.fonts.stacks,
+    );
+  }
+
+  function handleVarChange(event: Event) {
+    const names = (event as CustomEvent<CssVarsChangeDetail>).detail?.names ?? [];
+    if (
+      (familyVariable && names.includes(familyVariable))
+      || names.some((name) => /^--font-(?:display|sans|serif|mono)$/.test(name))
+    ) {
+      refreshAvailability();
+    }
+  }
+
+  $effect(() => {
+    variable;
+    $editorState.fonts.sources;
+    $editorState.fonts.stacks;
+    refreshAvailability();
+  });
+
+  onMount(() => document.addEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange));
+  onDestroy(() => document.removeEventListener(CSS_VARS_CHANGE_EVENT, handleVarChange));
 </script>
 
 <UIVariantSelector
@@ -44,8 +89,13 @@
   {onchange}
 >
   {#snippet option({ opt, active, select })}
-  
-      <UIOptionItem {active} onclick={select}>
+      {@const unsupported = availability !== null && !availability.weights.has(Number(opt.value))}
+      <UIOptionItem
+        {active}
+        disabled={unsupported}
+        title={unsupported ? `${opt.label} is not available for ${availability?.familyName}` : ''}
+        onclick={select}
+      >
         {#snippet preview()}
             <span  class="weight-sample" style="font-weight: var(--font-weight-{opt.key});">A</span>
           {/snippet}

package/src/editor/ui/UIOptionItem.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   interface Props {
     active?: boolean;
+    disabled?: boolean;
+    title?: string;
     preview?: import('svelte').Snippet;
     label?: import('svelte').Snippet;
     meta?: import('svelte').Snippet;
@@ -9,6 +11,8 @@
 
   let {
     active = false,
+    disabled = false,
+    title = '',
     preview,
     label,
     meta,
@@ -16,7 +20,7 @@
   }: Props = $props();
 </script>
 
-<button class="ui-option-item" class:active {onclick}>
+<button class="ui-option-item" class:active {onclick} {disabled} {title}>
   {#if preview}
     <span class="ui-option-preview">
       {@render preview?.()}
@@ -64,6 +68,15 @@
     color: var(--ui-text-primary);
   }
 
+  .ui-option-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .ui-option-item:disabled:hover {
+    background: none;
+  }
+
   .ui-option-preview {
     flex-shrink: 0;
     display: inline-flex;