@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/components/CornerBadge.svelte

@@ -0,0 +1,224 @@
+<script context="module" lang="ts">
+  export type CornerAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+</script>
+
+<script lang="ts">
+  import Badge, { type BadgeVariant } from './Badge.svelte';
+
+  export let variant: BadgeVariant = 'accent';
+  export let anchor: CornerAnchor = 'bottom-right';
+  export let size: 'default' | 'small' = 'default';
+  export let icon: string | undefined = undefined;
+</script>
+
+<span class="corner-badge corner-badge-{anchor} corner-badge-{variant}">
+  <Badge {variant} {size} {icon}>
+    <slot name="icon" slot="icon" />
+    <slot />
+  </Badge>
+</span>
+
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  $variants: primary, accent, neutral, alternate, canvas, special, success, warning, danger, info;
+
+  // Per-variant token block kept flat (not collapsed via SCSS @each) so the
+  // Layer-2 token-discovery parser (`extractGlobalRootBody` in
+  // src/lib/parsers/globalRootBlock.ts) can read the .svelte source verbatim;
+  // @each interpolation would make the parser see zero tokens here, even though
+  // the rendered DOM would be identical. Same pattern as Badge.svelte / Notification.svelte.
+  //
+  // Role-based radii: each variable follows the badge's geometry regardless of anchor.
+  //  - outer:  the corner flush with the parent's anchored corner
+  //  - inner:  the diagonally opposite corner (deepest into the parent)
+  //  - h-axis: the on-axis corner along the horizontal edge shared with `outer`
+  //  - v-axis: the on-axis corner along the vertical edge shared with `outer`
+  //
+  // Padding + font props are corner-badge-specific (not inherited from the
+  // sibling Badge variant), so corner-badge instances can carry their own
+  // typography and sizing without dragging the inline Badge along. They default
+  // to the same underlying global tokens Badge uses, so an unconfigured corner
+  // badge still matches its inline badge counterpart visually.
+  :global(:root) {
+    /* Primary */
+    --corner-badge-primary-margin: var(--space-0);
+    --corner-badge-primary-outer-radius: var(--radius-none);
+    --corner-badge-primary-inner-radius: var(--radius-none);
+    --corner-badge-primary-h-axis-radius: var(--radius-none);
+    --corner-badge-primary-v-axis-radius: var(--radius-none);
+    --corner-badge-primary-padding: var(--space-6);
+    --corner-badge-primary-text-font-family: var(--font-sans);
+    --corner-badge-primary-text-font-size: var(--font-size-sm);
+    --corner-badge-primary-text-font-weight: var(--font-weight-light);
+    --corner-badge-primary-text-line-height: var(--line-height-tight);
+
+    /* Accent */
+    --corner-badge-accent-margin: var(--space-0);
+    --corner-badge-accent-outer-radius: var(--radius-none);
+    --corner-badge-accent-inner-radius: var(--radius-none);
+    --corner-badge-accent-h-axis-radius: var(--radius-none);
+    --corner-badge-accent-v-axis-radius: var(--radius-none);
+    --corner-badge-accent-padding: var(--space-6);
+    --corner-badge-accent-text-font-family: var(--font-sans);
+    --corner-badge-accent-text-font-size: var(--font-size-sm);
+    --corner-badge-accent-text-font-weight: var(--font-weight-light);
+    --corner-badge-accent-text-line-height: var(--line-height-tight);
+
+    /* Neutral */
+    --corner-badge-neutral-margin: var(--space-0);
+    --corner-badge-neutral-outer-radius: var(--radius-none);
+    --corner-badge-neutral-inner-radius: var(--radius-none);
+    --corner-badge-neutral-h-axis-radius: var(--radius-none);
+    --corner-badge-neutral-v-axis-radius: var(--radius-none);
+    --corner-badge-neutral-padding: var(--space-6);
+    --corner-badge-neutral-text-font-family: var(--font-sans);
+    --corner-badge-neutral-text-font-size: var(--font-size-sm);
+    --corner-badge-neutral-text-font-weight: var(--font-weight-light);
+    --corner-badge-neutral-text-line-height: var(--line-height-tight);
+
+    /* Alternate */
+    --corner-badge-alternate-margin: var(--space-0);
+    --corner-badge-alternate-outer-radius: var(--radius-none);
+    --corner-badge-alternate-inner-radius: var(--radius-none);
+    --corner-badge-alternate-h-axis-radius: var(--radius-none);
+    --corner-badge-alternate-v-axis-radius: var(--radius-none);
+    --corner-badge-alternate-padding: var(--space-6);
+    --corner-badge-alternate-text-font-family: var(--font-sans);
+    --corner-badge-alternate-text-font-size: var(--font-size-sm);
+    --corner-badge-alternate-text-font-weight: var(--font-weight-light);
+    --corner-badge-alternate-text-line-height: var(--line-height-tight);
+
+    /* Canvas */
+    --corner-badge-canvas-margin: var(--space-0);
+    --corner-badge-canvas-outer-radius: var(--radius-none);
+    --corner-badge-canvas-inner-radius: var(--radius-none);
+    --corner-badge-canvas-h-axis-radius: var(--radius-none);
+    --corner-badge-canvas-v-axis-radius: var(--radius-none);
+    --corner-badge-canvas-padding: var(--space-6);
+    --corner-badge-canvas-text-font-family: var(--font-sans);
+    --corner-badge-canvas-text-font-size: var(--font-size-sm);
+    --corner-badge-canvas-text-font-weight: var(--font-weight-light);
+    --corner-badge-canvas-text-line-height: var(--line-height-tight);
+
+    /* Special */
+    --corner-badge-special-margin: var(--space-0);
+    --corner-badge-special-outer-radius: var(--radius-none);
+    --corner-badge-special-inner-radius: var(--radius-none);
+    --corner-badge-special-h-axis-radius: var(--radius-none);
+    --corner-badge-special-v-axis-radius: var(--radius-none);
+    --corner-badge-special-padding: var(--space-6);
+    --corner-badge-special-text-font-family: var(--font-sans);
+    --corner-badge-special-text-font-size: var(--font-size-sm);
+    --corner-badge-special-text-font-weight: var(--font-weight-light);
+    --corner-badge-special-text-line-height: var(--line-height-tight);
+
+    /* Success */
+    --corner-badge-success-margin: var(--space-0);
+    --corner-badge-success-outer-radius: var(--radius-none);
+    --corner-badge-success-inner-radius: var(--radius-none);
+    --corner-badge-success-h-axis-radius: var(--radius-none);
+    --corner-badge-success-v-axis-radius: var(--radius-none);
+    --corner-badge-success-padding: var(--space-6);
+    --corner-badge-success-text-font-family: var(--font-sans);
+    --corner-badge-success-text-font-size: var(--font-size-sm);
+    --corner-badge-success-text-font-weight: var(--font-weight-light);
+    --corner-badge-success-text-line-height: var(--line-height-tight);
+
+    /* Warning */
+    --corner-badge-warning-margin: var(--space-0);
+    --corner-badge-warning-outer-radius: var(--radius-none);
+    --corner-badge-warning-inner-radius: var(--radius-none);
+    --corner-badge-warning-h-axis-radius: var(--radius-none);
+    --corner-badge-warning-v-axis-radius: var(--radius-none);
+    --corner-badge-warning-padding: var(--space-6);
+    --corner-badge-warning-text-font-family: var(--font-sans);
+    --corner-badge-warning-text-font-size: var(--font-size-sm);
+    --corner-badge-warning-text-font-weight: var(--font-weight-light);
+    --corner-badge-warning-text-line-height: var(--line-height-tight);
+
+    /* Danger */
+    --corner-badge-danger-margin: var(--space-0);
+    --corner-badge-danger-outer-radius: var(--radius-none);
+    --corner-badge-danger-inner-radius: var(--radius-none);
+    --corner-badge-danger-h-axis-radius: var(--radius-none);
+    --corner-badge-danger-v-axis-radius: var(--radius-none);
+    --corner-badge-danger-padding: var(--space-6);
+    --corner-badge-danger-text-font-family: var(--font-sans);
+    --corner-badge-danger-text-font-size: var(--font-size-sm);
+    --corner-badge-danger-text-font-weight: var(--font-weight-light);
+    --corner-badge-danger-text-line-height: var(--line-height-tight);
+
+    /* Info */
+    --corner-badge-info-margin: var(--space-0);
+    --corner-badge-info-outer-radius: var(--radius-none);
+    --corner-badge-info-inner-radius: var(--radius-none);
+    --corner-badge-info-h-axis-radius: var(--radius-none);
+    --corner-badge-info-v-axis-radius: var(--radius-none);
+    --corner-badge-info-padding: var(--space-6);
+    --corner-badge-info-text-font-family: var(--font-sans);
+    --corner-badge-info-text-font-size: var(--font-size-sm);
+    --corner-badge-info-text-font-weight: var(--font-weight-light);
+    --corner-badge-info-text-line-height: var(--line-height-tight);
+  }
+
+  .corner-badge {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  // Per-variant: pull the variant's public tokens into private vars so the
+  // anchor-based mappings below can read them without 4 × 10 explicit rules.
+  // Padding + font props are forwarded directly onto the inner Badge so the
+  // corner-badge tokens fully replace Badge's per-variant declarations
+  // (otherwise Badge's own `.badge-#{$v}` rule wins by source order).
+  @each $v in $variants {
+    .corner-badge-#{$v} {
+      --_margin: var(--corner-badge-#{$v}-margin);
+      --_outer-radius: var(--corner-badge-#{$v}-outer-radius);
+      --_inner-radius: var(--corner-badge-#{$v}-inner-radius);
+      --_h-axis-radius: var(--corner-badge-#{$v}-h-axis-radius);
+      --_v-axis-radius: var(--corner-badge-#{$v}-v-axis-radius);
+
+      :global(.badge-#{$v}) {
+        @include themed-padding(--corner-badge-#{$v}-padding, $h: 2);
+        font-family: var(--corner-badge-#{$v}-text-font-family);
+        font-size: var(--corner-badge-#{$v}-text-font-size);
+        font-weight: var(--corner-badge-#{$v}-text-font-weight);
+        line-height: var(--corner-badge-#{$v}-text-line-height);
+      }
+    }
+  }
+
+  .corner-badge-bottom-right { bottom: var(--_margin); right: var(--_margin); }
+  .corner-badge-bottom-left  { bottom: var(--_margin); left:  var(--_margin); }
+  .corner-badge-top-right    { top:    var(--_margin); right: var(--_margin); }
+  .corner-badge-top-left     { top:    var(--_margin); left:  var(--_margin); }
+
+  /* Map logical corner roles → physical corners per anchor. */
+  .corner-badge-bottom-right :global(.badge) {
+    border-top-left-radius:     var(--_inner-radius);
+    border-top-right-radius:    var(--_v-axis-radius);
+    border-bottom-right-radius: var(--_outer-radius);
+    border-bottom-left-radius:  var(--_h-axis-radius);
+  }
+  .corner-badge-bottom-left :global(.badge) {
+    border-top-left-radius:     var(--_v-axis-radius);
+    border-top-right-radius:    var(--_inner-radius);
+    border-bottom-right-radius: var(--_h-axis-radius);
+    border-bottom-left-radius:  var(--_outer-radius);
+  }
+  .corner-badge-top-right :global(.badge) {
+    border-top-left-radius:     var(--_h-axis-radius);
+    border-top-right-radius:    var(--_outer-radius);
+    border-bottom-right-radius: var(--_v-axis-radius);
+    border-bottom-left-radius:  var(--_inner-radius);
+  }
+  .corner-badge-top-left :global(.badge) {
+    border-top-left-radius:     var(--_outer-radius);
+    border-top-right-radius:    var(--_h-axis-radius);
+    border-bottom-right-radius: var(--_inner-radius);
+    border-bottom-left-radius:  var(--_v-axis-radius);
+  }
+</style>

package/src/components/Dialog.svelte

@@ -1,37 +1,42 @@
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte';
+  import Button from './Button.svelte';
+  import { editorState } from '../lib/editorStore';
+  import type { ButtonVariant, DialogButtonSpec } from './types';
+
+  const BUTTON_VARIANTS: readonly ButtonVariant[] = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'];
+  function asVariant(v: string | undefined, fallback: ButtonVariant): ButtonVariant {
+    return v && (BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : fallback;
+  }
 
   export let show: boolean = false;
   export let title: string = '';
-  export let confirmLabel: string = 'Confirm';
-  export let cancelLabel: string = 'Cancel';
-  export let showConfirm: boolean = true;
-  export let showCancel: boolean = true;
-  export let confirmDisabled: boolean = false;
   export let width: string = '500px';
+  /** When true, the dialog renders inline within its parent rather than as a fixed-position overlay. Used by the editor preview. */
+  export let inline: boolean = false;
+  /** Right footer button. Undefined hides it. `--dialog-confirm-variant` config drives the variant when `confirm.variant` is unset. */
+  export let confirm: DialogButtonSpec | undefined = undefined;
+  /** Left footer button. Undefined hides it. `--dialog-cancel-variant` config drives the variant when `cancel.variant` is unset. */
+  export let cancel: DialogButtonSpec | undefined = undefined;
 
-  // Optional callbacks for parent dialogs to control behavior
-  export let onConfirm: (() => void) | undefined = undefined;
-  export let onCancel: (() => void) | undefined = undefined;
+  $: configuredConfig = $editorState.components.dialog?.config ?? {};
+  $: effectiveConfirmVariant = confirm?.variant ?? asVariant(configuredConfig['--dialog-confirm-variant'] as string | undefined, 'primary');
+  $: effectiveCancelVariant = cancel?.variant ?? asVariant(configuredConfig['--dialog-cancel-variant'] as string | undefined, 'outline');
 
   const dispatch = createEventDispatcher<{
-    confirm: void;
-    cancel: void;
     close: void;
   }>();
 
-  // Reference to the primary (confirm) button for focus management
   let confirmButtonRef: HTMLButtonElement;
   let cancelButtonRef: HTMLButtonElement;
   let closeButtonRef: HTMLButtonElement;
 
-  // Focus the primary button when dialog opens
-  $: if (show) {
+  // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
+  $: if (show && !inline) {
     tick().then(() => {
-      // Focus the primary (confirm) button first, then fall back to cancel, then close
-      if (showConfirm && confirmButtonRef && !confirmDisabled) {
+      if (confirm && confirmButtonRef && !confirm.disabled) {
         confirmButtonRef.focus();
-      } else if (showCancel && cancelButtonRef) {
+      } else if (cancel && cancelButtonRef) {
         cancelButtonRef.focus();
       } else if (closeButtonRef) {
         closeButtonRef.focus();
@@ -40,35 +45,23 @@
   }
 
   function handleConfirm() {
-    if (!confirmDisabled) {
-      if (onConfirm) {
-        // Parent dialog controls the flow
-        onConfirm();
-      } else {
-        // Default behavior for backward compatibility
-        dispatch('confirm');
-      }
+    if (confirm && !confirm.disabled) {
+      confirm.onClick();
     }
   }
 
   function handleCancel() {
-    if (onCancel) {
-      // Parent dialog controls the flow
-      onCancel();
+    if (cancel) {
+      cancel.onClick();
     } else {
-      // Default behavior for backward compatibility
-      dispatch('cancel');
       dispatch('close');
       show = false;
     }
   }
-
-  // No implicit keyboard or backdrop close handlers
-  // Dialog only closes via explicit button clicks (X, Cancel, or Confirm)
 </script>
 
 {#if show}
-  <div class="dialog-backdrop">
+  <div class="dialog-backdrop" class:inline>
     <div class="dialog" style="width: {width}; max-width: {width};">
       <div class="dialog-content">
         {#if title}
@@ -90,32 +83,31 @@
           <slot />
         </div>
 
-        {#if showConfirm || showCancel}
+        {#if confirm || cancel}
           <div class="dialog-footer">
             <div class="dialog-footer-left">
               <slot name="footer-left" />
             </div>
             <div class="dialog-footer-buttons">
-              {#if showCancel}
-                <button
-                  bind:this={cancelButtonRef}
-                  class="dialog-button dialog-button-secondary"
+              {#if cancel}
+                <Button
+                  variant={effectiveCancelVariant}
+                  disabled={cancel.disabled}
                   on:click={handleCancel}
-                  tabindex="0"
+                  bind:buttonRef={cancelButtonRef}
                 >
-                  {cancelLabel}
-                </button>
+                  {cancel.label}
+                </Button>
               {/if}
-              {#if showConfirm}
-                <button
-                  bind:this={confirmButtonRef}
-                  class="dialog-button dialog-button-primary"
+              {#if confirm}
+                <Button
+                  variant={effectiveConfirmVariant}
+                  disabled={confirm.disabled}
                   on:click={handleConfirm}
-                  disabled={confirmDisabled}
-                  tabindex="0"
+                  bind:buttonRef={confirmButtonRef}
                 >
-                  {confirmLabel}
-                </button>
+                  {confirm.label}
+                </Button>
               {/if}
             </div>
           </div>
@@ -126,13 +118,56 @@
 {/if}
 
 <style>
+  :global(:root) {
+    /* Overlay */
+    --dialog-overlay-surface: var(--overlay-high);
+
+    /* Dialog frame */
+    --dialog-surface: var(--surface-neutral-lowest);
+    --dialog-border: var(--border-neutral-strong);
+    --dialog-border-width: var(--border-width-2);
+    --dialog-radius: var(--radius-lg);
+    --dialog-shadow: var(--shadow-2xl);
+    --dialog-blur: var(--blur-none);
+
+    /* Header */
+    --dialog-header-surface: var(--surface-neutral-lower);
+    --dialog-header-border: var(--border-neutral-subtle);
+    --dialog-header-border-width: var(--border-width-1);
+    --dialog-header-padding: var(--space-8);
+
+    /* Title */
+    --dialog-title: var(--text-primary);
+    --dialog-title-font-family: var(--font-sans);
+    --dialog-title-font-size: var(--font-size-2xl);
+    --dialog-title-font-weight: var(--font-weight-normal);
+    --dialog-title-line-height: var(--line-height-snug);
+
+    /* Close icon */
+    --dialog-close-icon: var(--text-secondary);
+    --dialog-close-icon-size: var(--icon-size-xl);
+
+    /* Body */
+    --dialog-body-padding: var(--space-16);
+    --dialog-body: var(--text-secondary);
+    --dialog-body-font-family: var(--font-sans);
+    --dialog-body-font-size: var(--font-size-md);
+    --dialog-body-font-weight: var(--font-weight-normal);
+    --dialog-body-line-height: var(--line-height-normal);
+
+    /* Footer */
+    --dialog-footer-border: var(--border-neutral-subtle);
+    --dialog-footer-border-width: var(--border-width-1);
+    --dialog-footer-padding: var(--space-16);
+  }
+
   .dialog-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--overlay-high);
+    background: var(--dialog-overlay-surface);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -140,12 +175,24 @@
     pointer-events: auto;
   }
 
+  .dialog-backdrop.inline {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 100%;
+    height: auto;
+    padding: var(--space-32);
+    border-radius: var(--radius-md);
+    z-index: auto;
+  }
+
   .dialog {
-    background: var(--surface-neutral-lowest);
-    border: 2px solid var(--border-neutral-strong);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-overlay);
-    animation: dialogSlideIn var(--transition-base);
+    background: var(--dialog-surface);
+    border: var(--dialog-border-width) solid var(--dialog-border);
+    border-radius: var(--dialog-radius);
+    box-shadow: var(--dialog-shadow);
+    backdrop-filter: blur(var(--dialog-blur));
+    animation: dialogSlideIn var(--duration-200);
     pointer-events: auto;
   }
 
@@ -165,9 +212,13 @@
   }
 
   .dialog-header {
-    padding: .5rem var(--space-24);
-    border-bottom: 1px solid var(--border-neutral-subtle);
-    background: var(--empty);
+    padding:
+      var(--dialog-header-padding-top, var(--dialog-header-padding))
+      var(--dialog-header-padding-right, calc(var(--dialog-header-padding) * 3))
+      var(--dialog-header-padding-bottom, var(--dialog-header-padding))
+      var(--dialog-header-padding-left, calc(var(--dialog-header-padding) * 3));
+    border-bottom: var(--dialog-header-border-width) solid var(--dialog-header-border);
+    background: var(--dialog-header-surface);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -175,39 +226,54 @@
 
   .dialog-title {
     margin: 0;
-    font-size: var(--font-2xl);
-    font-weight: var(--font-weight-semibold);
-    color: var(--text-primary);
+    color: var(--dialog-title);
+    font-family: var(--dialog-title-font-family);
+    font-size: var(--dialog-title-font-size);
+    font-weight: var(--dialog-title-font-weight);
+    line-height: var(--dialog-title-line-height);
   }
 
   .dialog-close {
     background: none;
     border: none;
-    color: var(--text-secondary);
-    font-size: var(--font-xl);
+    color: var(--dialog-close-icon);
+    font-size: var(--dialog-close-icon-size);
     cursor: pointer;
-    margin-right: -var(--space-16);
-    width: 2rem;
-    height: 2rem;
+    margin-right: -1rem;
+    width: 2.25rem;
+    height: 2.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-md);
-    transition: all var(--transition-base);
+    transition: all var(--duration-200);
   }
 
   .dialog-close:hover {
-    background: var(--hover);
+    background: var(--surface-neutral-low);
     color: var(--text-primary);
   }
 
   .dialog-body {
-    padding: var(--space-16) var(--space-24);
+    padding:
+      var(--dialog-body-padding-top, var(--dialog-body-padding))
+      var(--dialog-body-padding-right, calc(var(--dialog-body-padding) * 1.5))
+      var(--dialog-body-padding-bottom, var(--dialog-body-padding))
+      var(--dialog-body-padding-left, calc(var(--dialog-body-padding) * 1.5));
+    color: var(--dialog-body);
+    font-family: var(--dialog-body-font-family);
+    font-size: var(--dialog-body-font-size);
+    font-weight: var(--dialog-body-font-weight);
+    line-height: var(--dialog-body-line-height);
   }
 
   .dialog-footer {
-    padding: var(--space-16);
-    border-top: 1px solid var(--border-neutral-subtle);
+    padding:
+      var(--dialog-footer-padding-top, var(--dialog-footer-padding))
+      var(--dialog-footer-padding-right, var(--dialog-footer-padding))
+      var(--dialog-footer-padding-bottom, var(--dialog-footer-padding))
+      var(--dialog-footer-padding-left, var(--dialog-footer-padding));
+    border-top: var(--dialog-footer-border-width) solid var(--dialog-footer-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -223,47 +289,4 @@
     display: flex;
     gap: var(--space-8);
   }
-
-  .dialog-button {
-    padding: var(--space-8) var(--space-16);
-    border: 1px solid var(--border-neutral-subtle);
-    border-radius: var(--radius-md);
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-medium);
-    cursor: pointer;
-    transition: all var(--transition-base);
-    min-width: 5rem;
-  }
-
-  .dialog-button:disabled {
-    opacity: var(--opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  .dialog-button-primary {
-    background: var(--btn-secondary-bg);
-    color: var(--text-primary);
-    border-color: var(--border-neutral-medium);
-  }
-
-  .dialog-button-primary:hover:not(:disabled) {
-    background: var(--btn-secondary-hover);
-    border-color: var(--border-neutral-strong);
-  }
-
-  .dialog-button-primary:focus {
-    outline: 2px solid var(--border-neutral-strong);
-    outline-offset: 0.125rem;
-  }
-
-  .dialog-button-secondary {
-    background: transparent;
-    color: var(--text-primary);
-    border-color: var(--border-neutral-medium);
-  }
-
-  .dialog-button-secondary:hover:not(:disabled) {
-    background: var(--hover-low);
-    border-color: var(--border-neutral-strong);
-  }
 </style>

package/src/components/Image.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let src: string;
+  export let alt: string;
+  export let variant: 'default' | 'banner' | 'medium' | 'compact' = 'default';
+  export let height: string | undefined = undefined;
+
+  const variantHeights: Record<string, string | undefined> = {
+    default: undefined,
+    banner: '360px',
+    medium: '240px',
+    compact: '180px',
+  };
+
+  $: resolvedHeight = height ?? variantHeights[variant];
+</script>
+
+<div class="image" style:height={resolvedHeight}>
+  <img {src} {alt} />
+</div>
+
+<style>
+  :global(:root) {
+    --image-default-radius: var(--radius-xl);
+    --image-default-border: var(--border-neutral);
+    --image-default-border-width: var(--border-width-1);
+    --image-default-shadow: var(--shadow-md);
+  }
+
+  .image {
+    border-radius: var(--image-default-radius);
+    overflow: hidden;
+    border: var(--image-default-border-width) solid var(--image-default-border);
+    box-shadow: var(--image-default-shadow);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    object-position: center;
+  }
+</style>