@geoffcox/sterling-svelte 0.0.21 → 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

@@ -1,4 +1,4 @@
-<script>import { v4 as uuid } from "uuid";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
@@ -6,7 +6,7 @@ export let id = void 0;
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Checkbox");
   }
 }
 export const blur = () => {
@@ -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

@@ -1,8 +1,8 @@
 <script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
-const popupId = uuid();
+import { idGenerator } from "./idGenerator";
+const popupId = idGenerator.nextId("Dropdown-popup");
 export let composed = false;
 export let disabled = false;
 export let open = false;
@@ -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

@@ -7,7 +7,7 @@ export { htmlFor as for };
 export let label = void 0;
 export let message = void 0;
 export let required = false;
-export let requiredTip = "This field is required";
+export let requiredReason = "This field is required";
 export let status = "none";
 let fieldRef;
 let targetDisabled = false;
@@ -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
@@ -146,9 +152,9 @@ const onClick = () => {
     </slot>
   {/if}
   {#if required}
-    <slot name="required" {requiredTip}>
+    <slot name="required" requiredTip={requiredReason}>
       <Tooltip showOn="hover">
-        <span class="required-tip" slot="tip">{requiredTip}</span>
+        <span class="required-tip" slot="tip">{requiredReason}</span>
         <div class="required">*</div>
       </Tooltip>
     </slot>

package/Field.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         label?: string | undefined;
         message?: string | undefined;
         required?: boolean | undefined;
-        requiredTip?: string | undefined;
+        requiredReason?: string | undefined;
         status?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
@@ -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

@@ -1,4 +1,4 @@
-<script>import { v4 as uuid } from "uuid";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let composed = false;
 export let disabled = false;
@@ -7,7 +7,7 @@ export let value = "";
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Input");
   }
 }
 export const blur = () => {
@@ -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

@@ -1,13 +1,11 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { v4 as uuid } from "uuid";
 import { LIST_CONTEXT_KEY } from "./List.constants";
 export let composed = false;
 export let disabled = false;
 export let horizontal = false;
 export let selectedValue = void 0;
-const listId = `list-${uuid()}`;
 let listRef;
 let lastSelectedItemRef;
 const disabledStore = writable(disabled);
@@ -200,7 +198,6 @@ A list of items where a single item can be selected.
   class:disabled
   class:horizontal
   class:using-keyboard={usingKeyboard}
-  id={listId}
   role="list"
   tabindex={0}
   on:blur
@@ -209,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

@@ -1,15 +1,15 @@
-<script>import { v4 as uuid } from "uuid";
-import { createEventDispatcher, getContext, setContext } from "svelte";
+<script>import { createEventDispatcher, getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 import Button from "./Button.svelte";
 import Menu from "./Menu.svelte";
 import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import { focusFirstChild, focusNextChild, focusPreviousChild } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let open = false;
 export let shape = "rounded";
 export let value;
 export let variant = "regular";
-const instanceId = uuid();
+const instanceId = idGenerator.nextId("MenuButton");
 let buttonRef;
 let reference;
 let prevOpen = open;
@@ -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

@@ -1,5 +1,4 @@
 <script>import { createKeyborg } from "keyborg";
-import { v4 as uuid } from "uuid";
 import { getContext, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { clickOutside } from "./actions/clickOutside";
@@ -14,6 +13,7 @@ import {
   focusNextChild,
   focusPreviousChild
 } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let composed = false;
 export let disabled = false;
@@ -34,7 +34,7 @@ const {
   onSelect = void 0
 } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
 const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(MENU_BAR_CONTEXT_KEY) || {};
-const instanceId = uuid();
+const instanceId = idGenerator.nextId("MenuItem");
 $:
   displayId = `${value}-display-${instanceId}`;
 $:
@@ -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;