@geoffcox/sterling-svelte 0.0.22 → 0.0.23

package/Button.svelte

@@ -26,6 +26,13 @@ export const focus = (options) => {
   type="button"
   on:blur
   on:click
+  on:drag
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:dblclick
   on:focus
   on:focusin

package/Button.svelte.d.ts

@@ -11,6 +11,13 @@ declare const __propDef: {
     events: {
         blur: FocusEvent;
         click: MouseEvent;
+        drag: DragEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         dblclick: MouseEvent;
         focus: FocusEvent;
         focusin: FocusEvent;

package/Checkbox.svelte

@@ -35,6 +35,12 @@ export const focus = (options) => {
       on:click
       on:change
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -49,7 +55,6 @@ export const focus = (options) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:toggle
       on:wheel
       bind:checked
       {...$$restProps}
@@ -57,27 +62,24 @@ export const focus = (options) => {
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <div class="label">
-      <Label {disabled} for={id}>
-        <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
-          {$$restProps.value}
-        </slot>
-      </Label>
-    </div>
+    <Label {disabled} for={id}>
+      <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
+        {$$restProps.value}
+      </slot>
+    </Label>
   {/if}
 </div>
 
 <style>
   .sterling-checkbox {
-    display: inline-flex;
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
     box-sizing: border-box;
+    display: inline-flex;
     font: inherit;
-    gap: 0.4em;
+    margin: 0;
     outline: none;
     padding: 0;
-    margin: 0;
   }
 
   /* 
@@ -91,6 +93,7 @@ export const focus = (options) => {
     position: relative;
     display: grid;
     align-items: center;
+    margin-right: 0.25em;
   }
 
   /*
@@ -166,11 +169,6 @@ export const focus = (options) => {
     border-color: var(--stsv-Common__color--disabled);
   }
 
-  .label {
-    user-select: none;
-    margin-top: 0.25em;
-  }
-
   @media (prefers-reduced-motion) {
     .indicator,
     input:checked + .indicator::after {

package/Checkbox.svelte.d.ts

@@ -14,6 +14,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -28,7 +34,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Dropdown.svelte

@@ -88,6 +88,12 @@ const onClickOutside = (event) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Dropdown.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Field.svelte

@@ -102,6 +102,12 @@ const onClick = () => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Field.svelte.d.ts

@@ -19,6 +19,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Input.svelte

@@ -46,6 +46,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   {disabled}
   {id}
   bind:value
+  on:beforeinput
   on:blur
   on:click
   on:change
@@ -53,6 +54,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   on:cut
   on:paste
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Input.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
+        beforeinput: InputEvent;
         blur: FocusEvent;
         click: MouseEvent;
         change: Event;
@@ -21,6 +22,12 @@ declare const __propDef: {
         cut: ClipboardEvent;
         paste: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Label.svelte

@@ -21,6 +21,12 @@ export const focus = (options) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Label.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Link.svelte

@@ -23,6 +23,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Link.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/List.svelte

@@ -206,6 +206,12 @@ A list of items where a single item can be selected.
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/List.svelte.d.ts

@@ -21,6 +21,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/ListItem.svelte

@@ -34,6 +34,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/ListItem.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Menu.svelte

@@ -80,6 +80,12 @@ onMount(() => {
       on:copy
       on:cut
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -127,7 +133,7 @@ onMount(() => {
     height: fit-content;
     left: 0;
     max-height: calc(50vh);
-    overflow: scroll;
+    overflow: auto;
     overscroll-behavior: contain;
     padding: 0.25em;
     position: absolute;

package/Menu.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/MenuBar.svelte

@@ -72,6 +72,12 @@ setContext(MENU_BAR_CONTEXT_KEY, {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuBar.svelte.d.ts

@@ -11,6 +11,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/MenuButton.svelte

@@ -87,6 +87,12 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:click
   on:click={onClick}
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuButton.svelte.d.ts

@@ -14,6 +14,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/MenuItem.svelte

@@ -241,6 +241,12 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuItem.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/MenuSeparator.svelte

@@ -8,6 +8,12 @@ A styled line to visually separate menu items in a menu.
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuSeparator.svelte.d.ts

@@ -8,6 +8,12 @@ export default class MenuSeparator extends SvelteComponentTyped<{
     blur: FocusEvent;
     click: MouseEvent;
     dblclick: MouseEvent;
+    dragend: DragEvent;
+    dragenter: DragEvent;
+    dragleave: DragEvent;
+    dragover: DragEvent;
+    dragstart: DragEvent;
+    drop: DragEvent;
     focus: FocusEvent;
     focusin: FocusEvent;
     focusout: FocusEvent;
@@ -46,6 +52,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Progress.svelte

@@ -40,6 +40,12 @@ $:
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Progress.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Radio.svelte

@@ -56,6 +56,12 @@ onMount(() => {
       on:change
       on:change={onChange}
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -70,34 +76,30 @@ onMount(() => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:toggle
       on:wheel
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <div class="label">
-      <Label {disabled} for={id}>
-        <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
-          {$$restProps.value}
-        </slot>
-      </Label>
-    </div>
+    <Label {disabled} for={id}>
+      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
+        {$$restProps.value}
+      </slot>
+    </Label>
   {/if}
 </div>
 
 <style>
   .sterling-radio {
-    display: inline-flex;
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
     box-sizing: border-box;
+    display: inline-flex;
     font: inherit;
-    gap: 0.4em;
+    margin: 0;
     outline: none;
     padding: 0;
-    margin: 0;
   }
   /* 
 		The container 
@@ -111,6 +113,7 @@ onMount(() => {
     font: inherit;
     display: flex;
     align-items: center;
+    margin-right: 0.25em;
   }
 
   /*
@@ -184,11 +187,6 @@ onMount(() => {
     background-color: var(--stsv-Common__color--disabled);
   }
 
-  .label {
-    user-select: none;
-    margin-top: 0.25em;
-  }
-
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after {

package/Radio.svelte.d.ts

@@ -15,6 +15,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -29,7 +35,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Select.svelte

@@ -176,6 +176,12 @@ const onListSelect = (event) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Select.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Slider.svelte

@@ -146,6 +146,12 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Slider.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Switch.svelte

@@ -49,6 +49,12 @@ export const focus = (options) => {
     on:click
     on:change
     on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
     on:focus
     on:focusin
     on:focusout
@@ -63,7 +69,6 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:toggle
     on:wheel
     {...$$restProps}
   />

package/Switch.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -30,7 +36,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Tab.svelte

@@ -47,6 +47,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Tab.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TabList.svelte

@@ -193,6 +193,12 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TabList.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TextArea.svelte

@@ -43,6 +43,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   rows="1"
   style={`--TextArea__resize: ${resize};`}
   bind:value
+  on:beforeinput
   on:blur
   on:click
   on:change
@@ -50,6 +51,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   on:cut
   on:paste
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TextArea.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
+        beforeinput: InputEvent;
         blur: FocusEvent;
         click: MouseEvent;
         change: Event;
@@ -20,6 +21,12 @@ declare const __propDef: {
         cut: ClipboardEvent;
         paste: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Tooltip.svelte

@@ -24,7 +24,6 @@ const computeTooltipPosition = async () => {
         element: arrowRef
       })
     ];
-    console.log(placement);
     position = await computePosition(reference, tooltipRef, {
       placement,
       middleware

package/Tree.svelte

@@ -70,6 +70,12 @@ setContext(TREE_CONTEXT_KEY, {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Tree.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeChevron.svelte

@@ -25,6 +25,12 @@ $: {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TreeChevron.svelte.d.ts

@@ -9,6 +9,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeItem.svelte

@@ -244,6 +244,12 @@ A item in a Tree displaying the item and children.
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TreeItem.svelte.d.ts

@@ -19,6 +19,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeItemDisplay.svelte

@@ -27,6 +27,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TreeItemDisplay.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "javascript"
   ],
   "devDependencies": {
-    "@fontsource/fira-mono": "^4.5.10",
-    "@fontsource/overpass": "^4.5.10",
+    "@fontsource/open-sans": "^4.5.14",
+    "@fontsource/source-code-pro": "^4.5.14",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^1.0.0",