@widgetic/editor 4.0.7 → 4.0.8

package/dist/components/ic/BrowserInputController.svelte.d.ts

@@ -1,4 +1,23 @@
 import type { InputControllerConfig } from './index';
+interface FileValue {
+    id: string;
+    file: string;
+    url: string;
+    hash?: string;
+}
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface BrowserInputControllerProps {
+    header?: {
+        label: string;
+        helpText?: string;
+    };
+    label?: string;
+    value?: string | FileValue;
+    onChange?: (newValue: string | FileValue) => void;
+    portalTarget?: string | HTMLElement;
+    config?: InputControllerConfig;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,25 +32,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const BrowserInputController: $$__sveltets_2_IsomorphicComponent<{
-    header?: {
-        label: string;
-        helpText?: string;
-    } | undefined;
-    label?: string;
-    value?: string | {
-        id: string;
-        file: string;
-        url: string;
-        hash?: string;
-    };
-    onChange?: (newValue: string | {
-        id: string;
-        file: string;
-        url: string;
-        hash?: string;
-    }) => void;
-    portalTarget?: string | HTMLElement;
-    config?: InputControllerConfig;
+    header?: BrowserInputControllerProps["header"];
+    label?: BrowserInputControllerProps["label"];
+    value?: BrowserInputControllerProps["value"];
+    onChange?: BrowserInputControllerProps["onChange"];
+    portalTarget?: BrowserInputControllerProps["portalTarget"];
+    config?: BrowserInputControllerProps["config"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/CheckboxInputController.svelte

@@ -1,3 +1,18 @@
+<script module lang="ts">
+  import type { InputControllerConfig } from './index';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface CheckboxInputControllerProps {
+    value: string[] | { value: string; label: string }[] | string | { value: string; label: string };
+    onChange: (newValue: string[]) => void;
+    config?: InputControllerConfig;
+    description?: string;
+    onFocus?: () => void;
+    options?: { value: string; label: string }[];
+  }
+</script>
+
 <script lang="ts">
   /**
    * CheckboxInputController Component
@@ -10,7 +25,6 @@
    * Required for component setup and cleanup
    */
   import { onMount, onDestroy } from 'svelte';
-  import type { InputControllerConfig } from './index';
 
   /**
    * UI Components Imports
@@ -22,17 +36,17 @@
    * Component Props
    * External properties that configure the checkbox group's behavior and appearance
    */
-  export let value: string[] | { value: string; label: string }[] | string | { value: string; label: string };  // Selected value(s)
-  export let onChange: (newValue: string[]) => void;  // Callback for value changes
-  export let config: InputControllerConfig = {};    // Additional configuration options
-  export let description: string | undefined = undefined;  // Optional help description text
-  export let onFocus: () => void = () => {};  // Focus event handler
+  export let value: CheckboxInputControllerProps['value'];  // Selected value(s)
+  export let onChange: CheckboxInputControllerProps['onChange'];  // Callback for value changes
+  export let config: CheckboxInputControllerProps['config'] = {};    // Additional configuration options
+  export let description: CheckboxInputControllerProps['description'] = undefined;  // Optional help description text
+  export let onFocus: CheckboxInputControllerProps['onFocus'] = () => {};  // Focus event handler
 
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let options: { value: string; label: string }[] = config.options || [];  // Available options
+  export let options: CheckboxInputControllerProps['options'] = config.options || [];  // Available options
 
   /**
    * Local state

package/dist/components/ic/CheckboxInputController.svelte.d.ts

@@ -1,4 +1,23 @@
 import type { InputControllerConfig } from './index';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface CheckboxInputControllerProps {
+    value: string[] | {
+        value: string;
+        label: string;
+    }[] | string | {
+        value: string;
+        label: string;
+    };
+    onChange: (newValue: string[]) => void;
+    config?: InputControllerConfig;
+    description?: string;
+    onFocus?: () => void;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -16,24 +35,15 @@ declare const CheckboxInputController: $$__sveltets_2_IsomorphicComponent<{
     /**
        * Component Props
        * External properties that configure the checkbox group's behavior and appearance
-       */ value: string[] | {
-        value: string;
-        label: string;
-    }[] | string | {
-        value: string;
-        label: string;
-    };
-    onChange: (newValue: string[]) => void;
-    config?: InputControllerConfig;
-    description?: string | undefined;
-    onFocus?: () => void;
+       */ value: CheckboxInputControllerProps["value"];
+    onChange: CheckboxInputControllerProps["onChange"];
+    config?: CheckboxInputControllerProps["config"];
+    description?: CheckboxInputControllerProps["description"];
+    onFocus?: CheckboxInputControllerProps["onFocus"];
     /**
        * Configuration Options
        * Derived from config prop with fallbacks
-       */ options?: {
-        value: string;
-        label: string;
-    }[];
+       */ options?: CheckboxInputControllerProps["options"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/ColorPickerInputController.svelte

@@ -18,14 +18,38 @@
  * - Prevents recursive updates
 -->
 
+<script module lang="ts">
+  import type { InputControllerConfig } from './index';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface ColorPickerInputControllerProps {
+    label?: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    controllerId?: string;
+    id?: string;
+    config?: InputControllerConfig;
+    helpText?: string;
+    saveRecentColors?: boolean;
+    showOpacityControls?: boolean;
+    autofocus?: boolean;
+    portalTarget?: string | HTMLElement;
+    pickerSize?: number;
+    sliderWidth?: number;
+    opacity?: number;
+    showRing?: boolean;
+    onFocus?: () => void;
+    onOpacityChange?: (opacity: number) => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy, tick } from 'svelte';
   import { createEventDispatcher } from 'svelte';
   const dispatch = createEventDispatcher();
 
-  // Config imports
-  import type { InputControllerConfig } from './index';
 
   // Shadcn UI Components
   import { Input } from '@widgetic/design-system/components';
@@ -62,30 +86,34 @@
    * Component Props
    * External properties that configure the color picker's behavior
    */
-  export let label: string = '';                         // Display label
-  export let value = '#000000';                     // Current color value
-  export let onChange: (newValue: string) => void;  // Value change callback
-  export let controllerId: string = '';
-  export let id: string = '';
-  export let config: InputControllerConfig = {};    // Additional configuration
-  export let helpText: string | undefined = undefined; // Help text for the input
+  export let label: ColorPickerInputControllerProps['label'] = '';                         // Display label
+  export let value: ColorPickerInputControllerProps['value'] = '#000000';                     // Current color value
+  export let onChange: ColorPickerInputControllerProps['onChange'];  // Value change callback
+  export let controllerId: ColorPickerInputControllerProps['controllerId'] = '';
+  export let id: ColorPickerInputControllerProps['id'] = '';
+  // Passed through the dynamic-component props object but never read here —
+  // export const keeps the init-set contract without the unused-reactive warning.
+  export const openDropdowns: any = undefined;
+  export const toggleDropdown: (id: string) => void = () => {};
+  export let config: ColorPickerInputControllerProps['config'] = {};    // Additional configuration
+  export let helpText: ColorPickerInputControllerProps['helpText'] = undefined; // Help text for the input
 
   // Use config values with fallbacks
-  export let saveRecentColors = true;
-  export let showOpacityControls = true;
-  export let autofocus: boolean = false;
-  export let portalTarget = 'editor-portal';
+  export let saveRecentColors: ColorPickerInputControllerProps['saveRecentColors'] = true;
+  export let showOpacityControls: ColorPickerInputControllerProps['showOpacityControls'] = true;
+  export let autofocus: ColorPickerInputControllerProps['autofocus'] = false;
+  export let portalTarget: ColorPickerInputControllerProps['portalTarget'] = 'editor-portal';
 
   // Sizing props for easy adjustment (can be overridden by parent)
-  export let pickerSize = 200; // width/height of color area
-  export let sliderWidth = 24; // width of hue bar and opacity input
+  export let pickerSize: ColorPickerInputControllerProps['pickerSize'] = 200; // width/height of color area
+  export let sliderWidth: ColorPickerInputControllerProps['sliderWidth'] = 24; // width of hue bar and opacity input
   $: swatchGap = 4;
   $: swatchCount = 5;
   $: swatchAreaWidth = pickerSize + sliderWidth + 14;
   $: swatchSize = Math.floor((swatchAreaWidth - (swatchCount - 1) * swatchGap) / swatchCount);
 
   // Exported opacity with default handling
-  export let opacity = config.defaultTransparency !== undefined ? config.defaultTransparency / 100 : 1;
+  export let opacity: ColorPickerInputControllerProps['opacity'] = config.defaultTransparency !== undefined ? config.defaultTransparency / 100 : 1;
 
   // Tracks the last known opacity to maintain consistency
   let lastKnownOpacity = opacity;
@@ -147,7 +175,7 @@
   const opacityLineColor = "rgba(255, 255, 255, 0)";
 
   // Add to props section
-  export let showRing = true;
+  export let showRing: ColorPickerInputControllerProps['showRing'] = true;
 
   /**
    * Generates RGBA border string based on color and opacity
@@ -1096,7 +1124,7 @@
   }
 
   // Exported onFocus handler with default no-op
-  export let onFocus: () => void = () => {};
+  export let onFocus: ColorPickerInputControllerProps['onFocus'] = () => {};
 
   // Sets autofocus on mount if enabled
   onMount(() => {
@@ -1119,7 +1147,7 @@
   // Popover visibility is now handled by {#if open} conditional rendering
 
   // Exported opacity change handler with default no-op
-  export let onOpacityChange: (opacity: number) => void = () => {};
+  export let onOpacityChange: ColorPickerInputControllerProps['onOpacityChange'] = () => {};
 
   // Add these variables to track input position
   let inputComponent: any;

package/dist/components/ic/ColorPickerInputController.svelte.d.ts

@@ -1,4 +1,25 @@
 import type { InputControllerConfig } from './index';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface ColorPickerInputControllerProps {
+    label?: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    controllerId?: string;
+    id?: string;
+    config?: InputControllerConfig;
+    helpText?: string;
+    saveRecentColors?: boolean;
+    showOpacityControls?: boolean;
+    autofocus?: boolean;
+    portalTarget?: string | HTMLElement;
+    pickerSize?: number;
+    sliderWidth?: number;
+    opacity?: number;
+    showRing?: boolean;
+    onFocus?: () => void;
+    onOpacityChange?: (opacity: number) => void;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -16,24 +37,26 @@ declare const ColorPickerInputController: $$__sveltets_2_IsomorphicComponent<{
     /**
        * Component Props
        * External properties that configure the color picker's behavior
-       */ label?: string;
-    value?: string;
-    onChange: (newValue: string) => void;
-    controllerId?: string;
-    id?: string;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
-    saveRecentColors?: boolean;
-    showOpacityControls?: boolean;
-    autofocus?: boolean;
-    portalTarget?: string;
-    pickerSize?: number;
-    sliderWidth?: number;
-    opacity?: number;
-    showRing?: boolean;
-    onFocus?: () => void;
+       */ label?: ColorPickerInputControllerProps["label"];
+    value?: ColorPickerInputControllerProps["value"];
+    onChange: ColorPickerInputControllerProps["onChange"];
+    controllerId?: ColorPickerInputControllerProps["controllerId"];
+    id?: ColorPickerInputControllerProps["id"];
+    openDropdowns?: any;
+    toggleDropdown?: (id: string) => void;
+    config?: ColorPickerInputControllerProps["config"];
+    helpText?: ColorPickerInputControllerProps["helpText"];
+    saveRecentColors?: ColorPickerInputControllerProps["saveRecentColors"];
+    showOpacityControls?: ColorPickerInputControllerProps["showOpacityControls"];
+    autofocus?: ColorPickerInputControllerProps["autofocus"];
+    portalTarget?: ColorPickerInputControllerProps["portalTarget"];
+    pickerSize?: ColorPickerInputControllerProps["pickerSize"];
+    sliderWidth?: ColorPickerInputControllerProps["sliderWidth"];
+    opacity?: ColorPickerInputControllerProps["opacity"];
+    showRing?: ColorPickerInputControllerProps["showRing"];
+    onFocus?: ColorPickerInputControllerProps["onFocus"];
     focus?: () => void;
-    onOpacityChange?: (opacity: number) => void;
+    onOpacityChange?: ColorPickerInputControllerProps["onOpacityChange"];
 }, {
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
@@ -42,6 +65,8 @@ declare const ColorPickerInputController: $$__sveltets_2_IsomorphicComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
     focus: () => void;
 }, string>;
 type ColorPickerInputController = InstanceType<typeof ColorPickerInputController>;

package/dist/components/ic/DateFieldInputController.svelte

@@ -11,10 +11,24 @@
  * - Visual feedback consistent with other input controllers
  -->
 
+<script module lang="ts">
+  import type { InputControllerConfig } from './index';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface DateFieldInputControllerProps {
+    label: string;
+    value: { day: number; month: number; year: number };
+    onChange: (newValue: { day: number; month: number; year: number }) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import InputControllerHeader from './InputControllerHeader.svelte';
-  import type { InputControllerConfig } from './index';
 
   // Constants
   const MIN_DAY = 1;
@@ -25,12 +39,12 @@
   const MAX_YEAR = 2100;
 
   // Required props
-  export let label: string;
-  export let value: { day: number; month: number; year: number };
-  export let onChange: (newValue: { day: number; month: number; year: number }) => void;
-  export let config: InputControllerConfig = {};
-  export let helpText: string | undefined = undefined;
-  export let onFocus: () => void = () => {};
+  export let label: DateFieldInputControllerProps['label'];
+  export let value: DateFieldInputControllerProps['value'];
+  export let onChange: DateFieldInputControllerProps['onChange'];
+  export let config: DateFieldInputControllerProps['config'] = {};
+  export let helpText: DateFieldInputControllerProps['helpText'] = undefined;
+  export let onFocus: DateFieldInputControllerProps['onFocus'] = () => {};
   
   // Optional: Class prop for external styling
   let className = '';

package/dist/components/ic/DateFieldInputController.svelte.d.ts

@@ -1,4 +1,22 @@
 import type { InputControllerConfig } from './index';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface DateFieldInputControllerProps {
+    label: string;
+    value: {
+        day: number;
+        month: number;
+        year: number;
+    };
+    onChange: (newValue: {
+        day: number;
+        month: number;
+        year: number;
+    }) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    onFocus?: () => void;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,20 +31,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const DateFieldInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: {
-        day: number;
-        month: number;
-        year: number;
-    };
-    onChange: (newValue: {
-        day: number;
-        month: number;
-        year: number;
-    }) => void;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
-    onFocus?: () => void;
+    label: DateFieldInputControllerProps["label"];
+    value: DateFieldInputControllerProps["value"];
+    onChange: DateFieldInputControllerProps["onChange"];
+    config?: DateFieldInputControllerProps["config"];
+    helpText?: DateFieldInputControllerProps["helpText"];
+    onFocus?: DateFieldInputControllerProps["onFocus"];
     class?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/ic/DatePickerInputController.svelte

@@ -17,6 +17,23 @@
  * - Maintains dropdown state consistency
 -->
 
+<script module lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface DatePickerInputControllerProps {
+    label: string;
+    value?: any;
+    onChange: (newValue: CalendarDate) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
@@ -35,14 +52,14 @@
   import { IconCalendar } from '@widgetic/design-system/icons';
 
   // Component props with TypeScript types
-  export let label: string;
-  export let value: any;
-  export let onChange: (newValue: CalendarDate) => void;
-  export let description: string | undefined = undefined;
-  export let controllerId: string;
-  export let openDropdowns: any;
-  export let toggleDropdown: (id: string) => void;
-  export let onFocus: () => void = () => {};
+  export let label: DatePickerInputControllerProps['label'];
+  export let value: DatePickerInputControllerProps['value'];
+  export let onChange: DatePickerInputControllerProps['onChange'];
+  export let description: DatePickerInputControllerProps['description'] = undefined;
+  export let controllerId: DatePickerInputControllerProps['controllerId'];
+  export let openDropdowns: DatePickerInputControllerProps['openDropdowns'];
+  export let toggleDropdown: DatePickerInputControllerProps['toggleDropdown'];
+  export let onFocus: DatePickerInputControllerProps['onFocus'] = () => {};
 
   // Default to today's date in local timezone for placeholder
   let placeholder = today(getLocalTimeZone());

package/dist/components/ic/DatePickerInputController.svelte.d.ts

@@ -1,3 +1,16 @@
+import type { Writable } from 'svelte/store';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface DatePickerInputControllerProps {
+    label: string;
+    value?: any;
+    onChange: (newValue: CalendarDate) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}
 import { CalendarDate } from "@internationalized/date";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -13,14 +26,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const DatePickerInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: any;
-    onChange: (newValue: CalendarDate) => void;
-    description?: string | undefined;
-    controllerId: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
-    onFocus?: () => void;
+    label: DatePickerInputControllerProps["label"];
+    value: DatePickerInputControllerProps["value"];
+    onChange: DatePickerInputControllerProps["onChange"];
+    description?: DatePickerInputControllerProps["description"];
+    controllerId: DatePickerInputControllerProps["controllerId"];
+    openDropdowns: DatePickerInputControllerProps["openDropdowns"];
+    toggleDropdown: DatePickerInputControllerProps["toggleDropdown"];
+    onFocus?: DatePickerInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/DropdownInputController.svelte

@@ -1,3 +1,24 @@
+<script module lang="ts">
+  import type { Writable } from 'svelte/store';
+  import type { InputControllerConfig } from './index';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface DropdownInputControllerProps {
+    label: string;
+    defaultSelectedLabel?: string;
+    value: string | { value: string; label: string };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    options?: { value: string; label: string }[];
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   /**
    * DropdownInputController Component
@@ -10,7 +31,6 @@
    * Required for component setup and cleanup
    */
   import { onMount, onDestroy } from 'svelte';
-  import type { InputControllerConfig } from './index';
 
   // Local Components imports
   import { InputControllerHeader } from './index';
@@ -28,22 +48,22 @@
    * Component Props
    * External properties that configure the dropdown's behavior and appearance
    */
-  export let label: string;                 // Display label for the dropdown
-  export let defaultSelectedLabel: string = "Select an option";          // Default value for the dropdown
-  export let value: string | { value: string; label: string };       // Currently selected value
-  export let onChange: (newValue: string) => void;  // Callback for value changes
-  export let config: InputControllerConfig = {};    // Additional configuration options
+  export let label: DropdownInputControllerProps['label'];
+  export let defaultSelectedLabel: DropdownInputControllerProps['defaultSelectedLabel'] = "Select an option";
+  export let value: DropdownInputControllerProps['value'];
+  export let onChange: DropdownInputControllerProps['onChange'];
+  export let config: DropdownInputControllerProps['config'] = {};
   
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let options: { value: string; label: string }[] = config.options || [];  // Available options
-  export let description: string | undefined = undefined;  // Optional help text
-  export let controllerId: string;          // Unique identifier for the controller
-  export let openDropdowns: any;           // External store tracking open dropdowns
-  export let toggleDropdown: (id: string) => void;  // Function to toggle dropdown state
-  export let onFocus: () => void = () => {};  // Focus event handler
+  export let options: DropdownInputControllerProps['options'] = config.options || [];
+  export let description: DropdownInputControllerProps['description'] = undefined;
+  export let controllerId: DropdownInputControllerProps['controllerId'];
+  export let openDropdowns: DropdownInputControllerProps['openDropdowns'];
+  export let toggleDropdown: DropdownInputControllerProps['toggleDropdown'];
+  export let onFocus: DropdownInputControllerProps['onFocus'] = () => {};
 
   /**
    * Reactive State
@@ -124,8 +144,13 @@
     }
   }
 
-  $: selectedValue = typeof value === 'string' ? value : value?.value ?? '';
-  $: triggerContent = options.find((option) => option.value === selectedValue)?.label ?? defaultSelectedLabel;
+  /**
+   * The option label for the current selection. `value` accepts a bare string
+   * or an option object; normalize once instead of re-narrowing at each read.
+   */
+  $: selectedValue = typeof value === 'string' ? value : value?.value;
+  $: triggerContent =
+    options.find((o) => o.value === selectedValue)?.label ?? defaultSelectedLabel;
 </script>
 
 <!-- Dropdown Container -->