@classic-homes/theme-svelte 1.19.1 → 1.20.0

package/dist/__tests__/code-field.test.js

@@ -0,0 +1,65 @@
+/**
+ * CodeField: Tab indents instead of leaving the field, with Escape as the way
+ * out, and indenting a selection works line by line.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import CodeField from '../lib/components/CodeField.svelte';
+let instance = null;
+function render(props) {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    instance = mount(CodeField, { target: host, props });
+    flushSync();
+    return host.querySelector('textarea');
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    document.body.innerHTML = '';
+});
+function press(field, key, shiftKey = false) {
+    const event = new KeyboardEvent('keydown', { key, shiftKey, bubbles: true, cancelable: true });
+    field.dispatchEvent(event);
+    return event;
+}
+describe('CodeField', () => {
+    it('is a labelled, monospaced, unspellchecked field with its keyboard hint', () => {
+        const field = render({ value: 'graph TD', label: 'Diagram source' });
+        expect(field.getAttribute('aria-label')).toBe('Diagram source');
+        expect(field.getAttribute('spellcheck')).toBe('false');
+        expect(field.className).toContain('font-mono');
+        const hint = document.getElementById(field.getAttribute('aria-describedby').split(' ')[0]);
+        expect(hint?.textContent).toMatch(/Escape, then Tab/);
+    });
+    it('indents at the cursor on Tab and reports the new value', () => {
+        const onValueChange = vi.fn();
+        const field = render({ value: 'ab', label: 'Code', onValueChange });
+        field.setSelectionRange(1, 1);
+        expect(press(field, 'Tab').defaultPrevented).toBe(true);
+        expect(field.value).toBe('a  b');
+        expect(onValueChange).toHaveBeenLastCalledWith('a  b');
+    });
+    it('indents and outdents every selected line', () => {
+        const field = render({ value: 'one\ntwo\nthree', label: 'Code' });
+        field.setSelectionRange(0, 7);
+        press(field, 'Tab');
+        expect(field.value).toBe('  one\n  two\nthree');
+        field.setSelectionRange(0, 11);
+        press(field, 'Tab', true);
+        expect(field.value).toBe('one\ntwo\nthree');
+    });
+    it('lets Tab leave after Escape', () => {
+        const field = render({ value: 'x', label: 'Code' });
+        press(field, 'Escape');
+        expect(press(field, 'Tab').defaultPrevented).toBe(false);
+        expect(field.value).toBe('x');
+        // and only once
+        expect(press(field, 'Tab').defaultPrevented).toBe(true);
+    });
+    it('does not indent a read-only field', () => {
+        const field = render({ value: 'x', label: 'Code', readonly: true });
+        expect(press(field, 'Tab').defaultPrevented).toBe(false);
+    });
+});

package/dist/lib/components/CodeField.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  /**
+   * CodeField - a monospaced textarea for code, markup or diagram source.
+   *
+   * Tab indents (the selected lines, or at the cursor) and Shift+Tab
+   * outdents, as in a code editor. So keyboard users are never trapped,
+   * Escape releases Tab for one press: Escape, then Tab, moves focus on —
+   * the hint saying so is announced with the field. No syntax highlighting:
+   * this is a field, not an IDE.
+   */
+  interface Props {
+    value?: string;
+    /** Accessible name. Use this or aria-labelledby. */
+    label?: string;
+    id?: string;
+    rows?: number;
+    /** Spaces inserted per indent level (default 2). */
+    indent?: number;
+    /** Soft-wrap long lines (default false: scroll sideways, as code reads best). */
+    wrap?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    label,
+    id,
+    rows = 8,
+    indent = 2,
+    wrap = false,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-invalid': ariaInvalid,
+    class: className,
+    onValueChange,
+    ...restProps
+  }: Props = $props();
+
+  const uid = $props.id();
+  const hintId = `${uid}-hint`;
+  /** Set by Escape: the next Tab leaves the field instead of indenting. */
+  let releaseTab = false;
+
+  function emit(target: HTMLTextAreaElement) {
+    value = target.value;
+    onValueChange?.(target.value);
+  }
+
+  /**
+   * Replace a range through the browser's editing pipeline when it can, so
+   * the change lands on the native undo stack.
+   */
+  function replace(target: HTMLTextAreaElement, start: number, end: number, text: string) {
+    target.setSelectionRange(start, end);
+    const viaEditing =
+      typeof document.execCommand === 'function' && document.execCommand('insertText', false, text);
+    if (!viaEditing) target.setRangeText(text, start, end, 'end');
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const target = event.currentTarget as HTMLTextAreaElement;
+    if (event.key === 'Escape') {
+      releaseTab = true;
+      return;
+    }
+    if (event.key !== 'Tab' || readonly || disabled) {
+      releaseTab = false;
+      return;
+    }
+    if (releaseTab) {
+      releaseTab = false;
+      return;
+    }
+    event.preventDefault();
+
+    const pad = ' '.repeat(indent);
+    const { selectionStart: start, selectionEnd: end, value: text } = target;
+    const lineStart = text.lastIndexOf('\n', start - 1) + 1;
+    const multiline = text.slice(start, end).includes('\n');
+
+    if (!event.shiftKey && !multiline) {
+      replace(target, start, end, pad);
+    } else {
+      // Indent or outdent every line the selection touches.
+      const lineEnd = end > start && text[end - 1] === '\n' ? end - 1 : end;
+      const block = text.slice(lineStart, lineEnd);
+      const outdent = new RegExp(`^ {1,${indent}}`, 'gm');
+      const changed = event.shiftKey ? block.replace(outdent, '') : block.replace(/^/gm, pad);
+      if (changed === block) return;
+      const firstLineShift = event.shiftKey
+        ? -(block.match(new RegExp(`^ {1,${indent}}`))?.[0].length ?? 0)
+        : indent;
+      replace(target, lineStart, lineEnd, changed);
+      target.setSelectionRange(
+        Math.max(lineStart, start + firstLineShift),
+        lineEnd + (changed.length - block.length)
+      );
+    }
+    emit(target);
+  }
+</script>
+
+<textarea
+  {value}
+  {id}
+  {rows}
+  {placeholder}
+  {disabled}
+  {readonly}
+  spellcheck="false"
+  autocapitalize="off"
+  autocomplete="off"
+  wrap={wrap ? 'soft' : 'off'}
+  aria-label={label}
+  aria-labelledby={ariaLabelledby}
+  aria-describedby={[hintId, ariaDescribedby].filter(Boolean).join(' ')}
+  aria-invalid={ariaInvalid}
+  class={cn(
+    'flex w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm leading-relaxed text-foreground ring-offset-background [tab-size:2] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-gray-400 resize-y',
+    !wrap && 'whitespace-pre overflow-x-auto',
+    ariaInvalid === true || ariaInvalid === 'true'
+      ? 'border-destructive focus-visible:ring-destructive'
+      : '',
+    className
+  )}
+  oninput={(event) => emit(event.currentTarget)}
+  onkeydown={handleKeydown}
+  {...restProps}
+></textarea>
+<span id={hintId} class="sr-only">Tab indents. Press Escape, then Tab, to leave the field.</span>

package/dist/lib/components/CodeField.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * CodeField - a monospaced textarea for code, markup or diagram source.
+ *
+ * Tab indents (the selected lines, or at the cursor) and Shift+Tab
+ * outdents, as in a code editor. So keyboard users are never trapped,
+ * Escape releases Tab for one press: Escape, then Tab, moves focus on —
+ * the hint saying so is announced with the field. No syntax highlighting:
+ * this is a field, not an IDE.
+ */
+interface Props {
+    value?: string;
+    /** Accessible name. Use this or aria-labelledby. */
+    label?: string;
+    id?: string;
+    rows?: number;
+    /** Spaces inserted per indent level (default 2). */
+    indent?: number;
+    /** Soft-wrap long lines (default false: scroll sideways, as code reads best). */
+    wrap?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    class?: string;
+    onValueChange?: (value: string) => void;
+    [key: string]: unknown;
+}
+declare const CodeField: import("svelte").Component<Props, {}, "value">;
+type CodeField = ReturnType<typeof CodeField>;
+export default CodeField;

package/dist/lib/components/Dialog.svelte

@@ -28,6 +28,11 @@
     headerActions?: Snippet;
     /** Whether to show the close button (default: true) */
     showClose?: boolean;
+    /**
+     * Called before focus returns to the trigger on close; `preventDefault()`
+     * keeps focus where the caller put it (e.g. a field it just revealed).
+     */
+    onCloseAutoFocus?: (event: Event) => void;
   }
 
   // Every size is clamped to the viewport minus a 1rem gutter on phones; the
@@ -54,6 +59,7 @@
     header,
     headerActions,
     showClose = true,
+    onCloseAutoFocus,
   }: Props = $props();
 
   function handleOpenChange(newOpen: boolean) {
@@ -83,6 +89,7 @@
       class="fixed inset-0 z-50 bg-foreground/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogPrimitive.Content
+      {onCloseAutoFocus}
       class={cn(
         'fixed left-[50%] top-[50%] z-50 flex max-h-[calc(100dvh-2rem)] w-full translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border border-border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
         sizeClasses[size],

package/dist/lib/components/Dialog.svelte.d.ts

@@ -24,6 +24,11 @@ interface Props {
     headerActions?: Snippet;
     /** Whether to show the close button (default: true) */
     showClose?: boolean;
+    /**
+     * Called before focus returns to the trigger on close; `preventDefault()`
+     * keeps focus where the caller put it (e.g. a field it just revealed).
+     */
+    onCloseAutoFocus?: (event: Event) => void;
 }
 declare const Dialog: import("svelte").Component<Props, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/dist/lib/components/Icon.svelte

@@ -256,7 +256,18 @@
     | 'log-out'
     | 'slash'
     | 'percent'
-    | 'hash';
+    | 'hash'
+    // Text editing
+    | 'bold'
+    | 'italic'
+    | 'heading'
+    | 'list-ordered'
+    | 'indent'
+    | 'outdent'
+    | 'quote'
+    | 'table'
+    | 'keyboard'
+    | 'unlink';
 
   interface Props {
     /** The name of the icon to display */
@@ -891,6 +902,25 @@
     slash: {
       path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM4.93 4.93l14.14 14.14',
     },
+    // === Text editing ===
+    bold: { path: 'M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z' },
+    italic: { path: 'M19 4h-9M14 20H5M15 4L9 20' },
+    heading: { path: 'M6 12h12M6 20V4M18 20V4' },
+    'list-ordered': {
+      path: 'M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1',
+    },
+    indent: { path: 'M3 8l4 4-4 4M21 12H11M21 6H11M21 18H11' },
+    outdent: { path: 'M7 8l-4 4 4 4M21 12H11M21 6H11M21 18H11' },
+    quote: {
+      path: 'M3 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h1c0 2.5-.5 4-3 4v4zM15 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h1c0 2.5-.5 4-3 4v4z',
+    },
+    table: { path: 'M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18' },
+    keyboard: {
+      path: 'M20 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zM6 9h.01M10 9h.01M14 9h.01M18 9h.01M8 13h.01M12 13h.01M16 13h.01M7 16h10',
+    },
+    unlink: {
+      path: 'M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71M5.17 11.75l-1.71 1.71a5 5 0 0 0 7.07 7.07l1.71-1.71M8 2v3M2 8h3M16 22v-3M22 16h-3',
+    },
   };
 
   const iconDef = $derived(icons[name]);

package/dist/lib/components/Icon.svelte.d.ts

@@ -2,7 +2,7 @@
  * Available icon names for the Icon component.
  * Organized by category for easier discovery.
  */
-export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'sparkles' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash';
+export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'sparkles' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash' | 'bold' | 'italic' | 'heading' | 'list-ordered' | 'indent' | 'outdent' | 'quote' | 'table' | 'keyboard' | 'unlink';
 interface Props {
     /** The name of the icon to display */
     name: IconName;

package/dist/lib/components/studio/InsertPalette.svelte

@@ -56,6 +56,9 @@
   }: Props = $props();
 
   let query = $state('');
+  // Picking an item hands focus to whatever the caller opens next (the new
+  // item's first field); only Escape / close returns focus to the trigger.
+  let picked = false;
   let listEl: HTMLDivElement | undefined = $state();
   let searchEl: HTMLInputElement | undefined = $state();
 
@@ -79,11 +82,13 @@
   $effect(() => {
     if (!open) return;
     query = '';
+    picked = false;
     void tick().then(() => searchEl?.focus());
   });
 
   function choose(item: InsertPaletteItem) {
     if (item.disabled) return;
+    picked = true;
     open = false;
     onSelect(item.id);
   }
@@ -115,7 +120,15 @@
   }
 </script>
 
-<Dialog bind:open {title} {description} size={thumbnail ? '2xl' : 'xl'}>
+<Dialog
+  bind:open
+  {title}
+  {description}
+  size={thumbnail ? '2xl' : 'xl'}
+  onCloseAutoFocus={(e) => {
+    if (picked) e.preventDefault();
+  }}
+>
   <div class="space-y-4 pb-4">
     <div class="relative">
       <Icon

package/dist/lib/index.d.ts

@@ -12,6 +12,7 @@ export { default as Input } from './components/Input.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Label } from './components/Label.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
+export { default as CodeField } from './components/CodeField.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';

package/dist/lib/index.js

@@ -13,6 +13,7 @@ export { default as Input } from './components/Input.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Label } from './components/Label.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
+export { default as CodeField } from './components/CodeField.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",