@svgrid/grid 1.2.33 → 2.0.0

package/dist/SvDateTimePicker.svelte

@@ -15,11 +15,20 @@
    */
   import SvCalendar from './SvCalendar.svelte'
   import SvTimePicker from './SvTimePicker.svelte'
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import SvField from './SvField.svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createDateTimePicker, type DateTimeValue, type DropDownDisplayMode } from './createDateTimePicker.svelte'
   import type { DateLike } from './datetime/date-core'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type DateTimeMessages = { dialog: string; date: string; time: string; clear: string; open: string }
+  const DEFAULT_MESSAGES: DateTimeMessages = {
+    dialog: 'Choose date and time', date: 'DATE', time: 'TIME', clear: 'Clear', open: 'Open picker',
+  }
+
+  type Props = SvEditorProps & {
     value?: DateTimeValue
     onChange?: (value: Date | null) => void
     /** Fired when the value is finalized (Enter, blur, or a single-date pick).
@@ -33,9 +42,6 @@
     max?: DateLike | null
     nullable?: boolean
     placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
-    name?: string
     locale?: string
     firstDayOfWeek?: number
     weekNumbers?: boolean
@@ -50,6 +56,8 @@
     autoOpen?: boolean
     /** Animate the calendar's month/drill navigation (honors reduced-motion). */
     animate?: boolean | 'slide' | 'fade'
+    /** Override the built-in strings (tabs, dialog, clear/open aria-labels). */
+    messages?: Partial<DateTimeMessages>
   }
 
   let {
@@ -75,8 +83,22 @@
     stepMinutes = 1,
     autoOpen = false,
     animate = false,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-dtp')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   // The headless core owns value math, parse/format, clamping, the dropdown
   // open/tab state and the sub-picker wiring. Reactive inputs are getters;
   // callbacks are closures.
@@ -95,6 +117,14 @@
     stepMinutes: () => stepMinutes,
     disabled: () => disabled,
     readonly: () => readonly,
+    toggleLabel: () => M.open,
+    clearLabel: () => M.clear,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
   })
 
   // --- Portalled dropdown positioning (DOM-bound; stays in the component) -----
@@ -114,17 +144,16 @@
     const reposition = () => updatePos()
     window.addEventListener('scroll', reposition, true)
     window.addEventListener('resize', reposition)
-    const onDown = (e: PointerEvent) => {
-      const t = e.target as Node | null
-      if (!t) return
-      if (triggerEl?.contains(t) || panelEl?.contains(t)) return
-      dtp.closePanel()
-    }
-    document.addEventListener('pointerdown', onDown, true)
+    const layer = createDismissableLayer({
+      element: () => [triggerEl, panelEl],
+      onDismiss: () => dtp.closePanel(),
+      closeOnEscape: false,
+    })
+    layer.activate()
     return () => {
       window.removeEventListener('scroll', reposition, true)
       window.removeEventListener('resize', reposition)
-      document.removeEventListener('pointerdown', onDown, true)
+      layer.release()
     }
   })
 
@@ -142,8 +171,9 @@
   }
 </script>
 
-<div class="sv-dtp" class:sv-dtp--disabled={disabled} onfocusout={onRootFocusOut}>
-  <div class="sv-dtp__field" bind:this={triggerEl}>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<div class="sv-dtp" class:sv-dtp--disabled={disabled} dir={resolvedDir} onfocusout={onRootFocusOut}>
+  <div class="sv-dtp__field" class:is-invalid={invalid} bind:this={triggerEl}>
     {#if spinButtons}
       <div class="sv-dtp__spin">
         <button {...dtp.spinProps(1)}>▲</button>
@@ -170,16 +200,18 @@
       class="sv-dtp__panel"
       bind:this={panelEl}
       use:portalToBody
+      use:popIn={{ up: panelRect.openUpward }}
       style:position="fixed"
       style:top={`${panelRect.top}px`}
       style:left={`${panelRect.left}px`}
       role="dialog"
-      aria-label="Choose date and time"
+      aria-label={M.dialog}
+      dir={resolvedDir}
     >
       {#if dtp.showDateTab && dtp.showTimeTab}
         <div class="sv-dtp__tabs" role="tablist">
-          <button class:is-active={dtp.tab === 'date'} {...dtp.tabProps('date')}>DATE</button>
-          <button class:is-active={dtp.tab === 'time'} {...dtp.tabProps('time')}>TIME</button>
+          <button class:is-active={dtp.tab === 'date'} {...dtp.tabProps('date')}>{M.date}</button>
+          <button class:is-active={dtp.tab === 'time'} {...dtp.tabProps('time')}>{M.time}</button>
         </div>
       {/if}
       <div class="sv-dtp__body">
@@ -193,6 +225,7 @@
             {weekNumbers}
             {locale}
             {animate}
+            dir={resolvedDir}
             onChange={dtp.onCalendarChange}
           />
         {:else if dtp.showTimeTab}
@@ -201,6 +234,7 @@
             format={hourFormat}
             {minuteInterval}
             footer
+            dir={resolvedDir}
             onChange={dtp.onTimeChange}
           />
         {/if}
@@ -210,6 +244,7 @@
 
   {#if name}<input type="hidden" {name} value={dtp.current ? dtp.current.toISOString() : ''} />{/if}
 </div>
+</SvField>
 
 <style>
   .sv-dtp {
@@ -225,14 +260,16 @@
   .sv-dtp__field {
     display: flex; align-items: center; gap: 2px;
     background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
-    padding: 0 4px 0 0; height: 34px;
+    padding-block: 0; padding-inline: 0 4px; height: 34px;
   }
   .sv-dtp__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-dtp__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-dtp__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-dtp__input {
     flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit;
     font: inherit; font-size: 13px; padding: 0 8px; height: 100%;
   }
-  .sv-dtp__spin { display: flex; flex-direction: column; border-right: 1px solid var(--_border); }
+  .sv-dtp__spin { display: flex; flex-direction: column; border-inline-end: 1px solid var(--_border); }
   .sv-dtp__spin button {
     flex: 1; width: 20px; border: 0; background: none; color: var(--_muted); cursor: pointer;
     font-size: 7px; line-height: 1; padding: 0;

package/dist/SvDateTimePicker.svelte.d.ts

@@ -1,7 +1,16 @@
 export type { DateTimeValue } from './createDateTimePicker.svelte';
+import { type SvEditorProps } from './editor-contract';
 import { type DateTimeValue, type DropDownDisplayMode } from './createDateTimePicker.svelte';
 import type { DateLike } from './datetime/date-core';
-type Props = {
+/** User-facing strings (localizable via `messages`). */
+type DateTimeMessages = {
+    dialog: string;
+    date: string;
+    time: string;
+    clear: string;
+    open: string;
+};
+type Props = SvEditorProps & {
     value?: DateTimeValue;
     onChange?: (value: Date | null) => void;
     /** Fired when the value is finalized (Enter, blur, or a single-date pick).
@@ -15,9 +24,6 @@ type Props = {
     max?: DateLike | null;
     nullable?: boolean;
     placeholder?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    name?: string;
     locale?: string;
     firstDayOfWeek?: number;
     weekNumbers?: boolean;
@@ -32,6 +38,8 @@ type Props = {
     autoOpen?: boolean;
     /** Animate the calendar's month/drill navigation (honors reduced-motion). */
     animate?: boolean | 'slide' | 'fade';
+    /** Override the built-in strings (tabs, dialog, clear/open aria-labels). */
+    messages?: Partial<DateTimeMessages>;
 };
 declare const SvDateTimePicker: import("svelte").Component<Props, {}, "">;
 type SvDateTimePicker = ReturnType<typeof SvDateTimePicker>;

package/dist/SvDivider.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  /**
+   * SvDivider - a separator line, horizontal or vertical, optionally with a
+   * centered / start / end label. Theme-driven. Parity: Smart divider.
+   *
+   * ```svelte
+   * <SvDivider />
+   * <SvDivider label="OR" />
+   * <SvDivider orientation="vertical" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    orientation?: 'horizontal' | 'vertical'
+    label?: string
+    /** Label position along a horizontal divider. */
+    align?: 'start' | 'center' | 'end'
+    dashed?: boolean
+    children?: Snippet
+  }
+
+  let { orientation = 'horizontal', label, align = 'center', dashed = false, children }: Props = $props()
+  const hasLabel = $derived(!!label || !!children)
+</script>
+
+{#if orientation === 'vertical'}
+  <span class="sv-divider sv-divider--v" class:is-dashed={dashed} role="separator" aria-orientation="vertical"></span>
+{:else}
+  <div class="sv-divider sv-divider--h sv-divider--{align}" class:is-dashed={dashed} class:has-label={hasLabel} role="separator">
+    {#if hasLabel}<span class="sv-divider__label">{#if children}{@render children()}{:else}{label}{/if}</span>{/if}
+  </div>
+{/if}
+
+<style>
+  .sv-divider--h {
+    --_line: var(--sg-border, #e2e8f0);
+    height: 1px; background: var(--_line); border: 0; margin: 12px 0;
+  }
+  .sv-divider--h.is-dashed { height: 0; background: none; border-top: 1px dashed var(--_line); }
+  .sv-divider--h.has-label {
+    height: auto; background: none; display: flex; align-items: center; gap: 12px;
+    color: var(--sg-muted, #64748b); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
+  }
+  .sv-divider--h.has-label::before, .sv-divider--h.has-label::after {
+    content: ''; height: 1px; background: var(--_line);
+  }
+  .sv-divider--h.has-label.is-dashed::before, .sv-divider--h.has-label.is-dashed::after { height: 0; border-top: 1px dashed var(--_line); }
+  .sv-divider--center::before, .sv-divider--center::after { flex: 1; }
+  .sv-divider--start::before { width: 16px; flex: none; }
+  .sv-divider--start::after { flex: 1; }
+  .sv-divider--end::before { flex: 1; }
+  .sv-divider--end::after { width: 16px; flex: none; }
+  .sv-divider__label { flex: none; }
+
+  .sv-divider--v {
+    display: inline-block; width: 1px; align-self: stretch; min-height: 1em;
+    background: var(--sg-border, #e2e8f0); margin: 0 12px; vertical-align: middle;
+  }
+  .sv-divider--v.is-dashed { width: 0; background: none; border-inline-start: 1px dashed var(--sg-border, #e2e8f0); }
+</style>

package/dist/SvDivider.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * SvDivider - a separator line, horizontal or vertical, optionally with a
+   * centered / start / end label. Theme-driven. Parity: Smart divider.
+   *
+   * ```svelte
+   * <SvDivider />
+   * <SvDivider label="OR" />
+   * <SvDivider orientation="vertical" />
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    /** Label position along a horizontal divider. */
+    align?: 'start' | 'center' | 'end';
+    dashed?: boolean;
+    children?: Snippet;
+};
+declare const SvDivider: import("svelte").Component<Props, {}, "">;
+type SvDivider = ReturnType<typeof SvDivider>;
+export default SvDivider;

package/dist/SvDrawer.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  /**
+   * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
+   * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
+   * on the shared primitives - `createFocusTrap`, `lockScroll` and
+   * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
+   * behaviour is identical to SvModal and nested overlays close top-first.
+   * Portalled to <body>. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvDrawer bind:open side="right" title="Filters">
+   *   <p>Body</p>
+   *   {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
+   * </SvDrawer>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody } from './popover'
+  import { nextEditorId } from './editor-contract'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import { lockScroll } from './a11y/scroll-lock'
+  import { createDismissableLayer } from './a11y/dismissable'
+
+  /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
+   *  index.ts (a bare type-only module script trips the Svelte/Vite parser). */
+  type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
+
+  type Props = {
+    open?: boolean
+    onClose?: () => void
+    /** Edge the drawer slides from. Default 'right'. */
+    side?: DrawerSide
+    /** Panel size along its axis (width for left/right, height for top/bottom).
+     *  Any CSS length; defaults to a sensible per-axis value. */
+    size?: string
+    title?: string
+    closeOnBackdrop?: boolean
+    closeOnEsc?: boolean
+    /** Hide the header close (x) button. */
+    hideClose?: boolean
+    /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
+     *  handle, and swipe-down-to-close. Overrides `side`. */
+    sheet?: boolean
+    /** Accessible name when there is no visible `title`. */
+    ariaLabel?: string
+    children?: Snippet
+    footer?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onClose,
+    side = 'right',
+    size,
+    title,
+    closeOnBackdrop = true,
+    closeOnEsc = true,
+    hideClose = false,
+    sheet = false,
+    ariaLabel,
+    children,
+    footer,
+  }: Props = $props()
+
+  const titleId = nextEditorId('sv-drawer-title')
+  let dialogEl = $state<HTMLDivElement | null>(null)
+
+  // A sheet is a bottom drawer with mobile affordances.
+  const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
+  const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
+  const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
+
+  function close() { open = false; onClose?.() }
+
+  // Swipe-down-to-close for the sheet grab handle.
+  let dragY = $state(0)
+  let dragging = $state(false)
+  let dragStartY = 0
+  function onGrabDown(e: PointerEvent) {
+    dragging = true
+    dragStartY = e.clientY
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+  }
+  function onGrabMove(e: PointerEvent) {
+    if (!dragging) return
+    dragY = Math.max(0, e.clientY - dragStartY)
+  }
+  function onGrabUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
+    if (dragY > 80) close()
+    else dragY = 0
+  }
+
+  // Focus trap + scroll lock + Escape/backdrop dismissal, all from the shared
+  // primitives - one tested implementation across every dialog-like overlay.
+  $effect(() => {
+    if (!open || !dialogEl) return
+    dragY = 0
+    const trap = createFocusTrap(dialogEl)
+    trap.activate()
+    const unlockScroll = lockScroll()
+    const layer = createDismissableLayer({
+      element: () => dialogEl,
+      onDismiss: (reason) => {
+        if (reason === 'escape' ? closeOnEsc : closeOnBackdrop) close()
+      },
+    })
+    layer.activate()
+    return () => {
+      layer.release()
+      unlockScroll()
+      trap.release()
+    }
+  })
+</script>
+
+{#if open}
+  <div class="sv-drawer__backdrop" use:portalToBody>
+    <div
+      bind:this={dialogEl}
+      class="sv-drawer sv-drawer--{effectiveSide}"
+      class:is-sheet={sheet}
+      class:is-dragging={dragging}
+      role="dialog"
+      aria-modal="true"
+      aria-label={!title ? ariaLabel : undefined}
+      aria-labelledby={title ? titleId : undefined}
+      tabindex="-1"
+      style:--sv-drawer-size={sizeVar}
+      style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
+    >
+      {#if sheet}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sv-drawer__grab"
+          aria-hidden="true"
+          onpointerdown={onGrabDown}
+          onpointermove={onGrabMove}
+          onpointerup={onGrabUp}
+          onpointercancel={onGrabUp}
+        ><span></span></div>
+      {/if}
+      {#if title || !hideClose}
+        <div class="sv-drawer__header">
+          <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
+          {#if !hideClose}
+            <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
+          {/if}
+        </div>
+      {/if}
+      <div class="sv-drawer__body">{@render children?.()}</div>
+      {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(.sv-drawer__backdrop) {
+    position: fixed; inset: 0; z-index: 2147483000;
+    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
+    animation: sv-drawer-fade 0.16s ease both;
+  }
+  @keyframes sv-drawer-fade { from { opacity: 0 } to { opacity: 1 } }
+
+  :global(.sv-drawer) {
+    position: fixed;
+    display: flex; flex-direction: column;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
+    overflow: hidden;
+  }
+  /* Left / right: full height, fixed width, slide along X. */
+  :global(.sv-drawer--right), :global(.sv-drawer--left) {
+    top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
+  }
+  :global(.sv-drawer--right) { inset-inline-end: 0; border-inline-start: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--left) { inset-inline-start: 0; border-inline-end: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  /* Top / bottom: full width, fixed height, slide along Y. */
+  :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
+    left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
+  }
+  :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-top 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-bottom 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+
+  /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. */
+  :global(.sv-drawer.is-sheet) {
+    left: 0; right: 0; margin: 0 auto; top: auto;
+    width: min(560px, 100vw); height: auto; max-height: 85vh;
+    border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  :global(.sv-drawer.is-sheet.is-dragging) { transition: none; }
+  :global(.sv-drawer__grab) {
+    flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
+  }
+  :global(.sv-drawer__grab span) {
+    display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
+  }
+
+  @keyframes sv-drawer-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } }
+  @keyframes sv-drawer-in-left { from { transform: translateX(-100%) } to { transform: translateX(0) } }
+  @keyframes sv-drawer-in-top { from { transform: translateY(-100%) } to { transform: translateY(0) } }
+  @keyframes sv-drawer-in-bottom { from { transform: translateY(100%) } to { transform: translateY(0) } }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.sv-drawer__backdrop), :global(.sv-drawer) { animation: none }
+  }
+
+  :global(.sv-drawer__header) {
+    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
+    border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  }
+  :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
+  :global(.sv-drawer__x) {
+    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
+  }
+  :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
+  :global(.sv-drawer__footer) {
+    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
+    border-top: 1px solid var(--sg-border, #e2e8f0);
+  }
+</style>

package/dist/SvDrawer.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+   * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
+   * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
+   * on the shared primitives - `createFocusTrap`, `lockScroll` and
+   * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
+   * behaviour is identical to SvModal and nested overlays close top-first.
+   * Portalled to <body>. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvDrawer bind:open side="right" title="Filters">
+   *   <p>Body</p>
+   *   {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
+   * </SvDrawer>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+/** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
+ *  index.ts (a bare type-only module script trips the Svelte/Vite parser). */
+type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
+type Props = {
+    open?: boolean;
+    onClose?: () => void;
+    /** Edge the drawer slides from. Default 'right'. */
+    side?: DrawerSide;
+    /** Panel size along its axis (width for left/right, height for top/bottom).
+     *  Any CSS length; defaults to a sensible per-axis value. */
+    size?: string;
+    title?: string;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    /** Hide the header close (x) button. */
+    hideClose?: boolean;
+    /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
+     *  handle, and swipe-down-to-close. Overrides `side`. */
+    sheet?: boolean;
+    /** Accessible name when there is no visible `title`. */
+    ariaLabel?: string;
+    children?: Snippet;
+    footer?: Snippet;
+};
+declare const SvDrawer: import("svelte").Component<Props, {}, "open">;
+type SvDrawer = ReturnType<typeof SvDrawer>;
+export default SvDrawer;