@geoffcox/sterling-svelte 0.0.20 → 0.0.22

package/Button.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const BUTTON_VARIANTS: readonly ["regular", "outline", "ghost"];
+export declare const BUTTON_SHAPES: readonly ["circular", "rounded", "square"];

package/Button.constants.js

@@ -0,0 +1,2 @@
+export const BUTTON_VARIANTS = ['regular', 'outline', 'ghost'];
+export const BUTTON_SHAPES = ['circular', 'rounded', 'square'];

package/Button.svelte

@@ -1,5 +1,15 @@
 <script>export let variant = "regular";
 export let shape = "rounded";
+let buttonRef;
+export const click = () => {
+  buttonRef?.click();
+};
+export const blur = () => {
+  buttonRef?.blur();
+};
+export const focus = (options) => {
+  buttonRef?.focus(options);
+};
 </script>
 
 <!--
@@ -7,6 +17,7 @@ export let shape = "rounded";
 	A styled HTML button element.
 -->
 <button
+  bind:this={buttonRef}
   class="sterling-button"
   class:square={shape === 'square'}
   class:circular={shape === 'circular'}

package/Button.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonShape, ButtonVariant } from './Button.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        variant?: ButtonVariant | undefined;
-        shape?: ButtonShape | undefined;
+        variant?: "regular" | "outline" | "ghost" | undefined;
+        shape?: "circular" | "rounded" | "square" | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -37,8 +39,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            shape: ButtonShape;
-            variant: ButtonVariant;
+            shape: "circular" | "rounded" | "square";
+            variant: "regular" | "outline" | "ghost";
         };
     };
 };
@@ -47,5 +49,8 @@ export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
 /** A styled HTML button element. */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Button.types.d.ts

@@ -1,2 +1,6 @@
-export type ButtonVariant = 'regular' | 'outline' | 'ghost';
-export type ButtonShape = 'circular' | 'rounded' | 'square';
+import type { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
+type ButtonShapeTuple = typeof BUTTON_SHAPES;
+export type ButtonShape = ButtonShapeTuple[number];
+type ButtonVariantTuple = typeof BUTTON_VARIANTS;
+export type ButtonVariant = ButtonVariantTuple[number];
+export {};

package/Checkbox.svelte

@@ -1,13 +1,23 @@
-<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;
 export let id = void 0;
+let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Checkbox");
   }
 }
+export const blur = () => {
+  inputRef?.blur();
+};
+export const click = () => {
+  inputRef?.click();
+};
+export const focus = (options) => {
+  inputRef?.focus(options);
+};
 </script>
 
 <!--
@@ -17,6 +27,7 @@ $: {
 <div class="sterling-checkbox">
   <div class="container">
     <input
+      bind:this={inputRef}
       {disabled}
       {id}
       type="checkbox"
@@ -48,7 +59,9 @@ $: {
   {#if $$slots.default}
     <div class="label">
       <Label {disabled} for={id}>
-        <slot {checked} {disabled} />
+        <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
+          {$$restProps.value}
+        </slot>
       </Label>
     </div>
   {/if}

package/Checkbox.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -34,6 +37,8 @@ declare const __propDef: {
         default: {
             checked: boolean;
             disabled: boolean;
+            inputId: string | undefined;
+            value: any;
         };
     };
 };
@@ -42,5 +47,8 @@ export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
 /** A styled HTML input type=checkbox element. */
 export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Dialog.svelte

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { onMount, tick } from "svelte";
 import Button from "./Button.svelte";
 const dialogFadeDuration = 250;
 export let open = false;
@@ -8,7 +8,6 @@ let dialogRef;
 let contentRef;
 let formRef;
 let closing = false;
-const dispatch = createEventDispatcher();
 const onDocumentClick = (event) => {
   const targetNode = event?.target;
   if (targetNode && !contentRef.contains(targetNode) && backdropCloses) {
@@ -89,10 +88,10 @@ A styled &lt;dialog&gt; element
 - Props and events to make using &lt;dialog&gt; easier
 -->
 <dialog
+  bind:this={dialogRef}
   class="dialog"
   class:open
   class:closing
-  bind:this={dialogRef}
   on:close
   on:cancel
   {...$$restProps}

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;
@@ -20,6 +20,15 @@ const raiseOpen = (open2) => {
 $: {
   raiseOpen(open);
 }
+export const click = () => {
+  dropdownRef?.click();
+};
+export const blur = () => {
+  dropdownRef?.blur();
+};
+export const focus = (options) => {
+  dropdownRef?.focus(options);
+};
 let mounted = false;
 onMount(() => {
   mounted = true;

package/Dropdown.svelte.d.ts

@@ -6,6 +6,9 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         stayOpenOnClickAway?: boolean | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -54,5 +57,8 @@ export type DropdownProps = typeof __propDef.props;
 export type DropdownEvents = typeof __propDef.events;
 export type DropdownSlots = typeof __propDef.slots;
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Field.constants.d.ts

@@ -0,0 +1 @@
+export declare const FIELD_STATUSES: string[];

package/Field.constants.js

@@ -0,0 +1 @@
+export const FIELD_STATUSES = ['none', 'info', 'success', 'warning', 'error'];

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;
@@ -67,6 +67,15 @@ let usingKeyboard = keyborg.isNavigatingWithKeyboard();
 const keyborgHandler = (value) => {
   usingKeyboard = value;
 };
+export const click = () => {
+  fieldRef?.click();
+};
+export const blur = () => {
+  fieldRef?.blur();
+};
+export const focus = (options) => {
+  fieldRef?.focus(options);
+};
 onMount(() => {
   keyborg.subscribe(keyborgHandler);
   return () => {
@@ -81,8 +90,8 @@ const onClick = () => {
 </script>
 
 <label
-  aria-disabled={targetDisabled}
   bind:this={fieldRef}
+  aria-disabled={targetDisabled}
   class="sterling-field"
   class:disabled={targetDisabled}
   class:using-keyboard={usingKeyboard}
@@ -111,12 +120,18 @@ const onClick = () => {
   on:paste
   {...$$restProps}
 >
-  <slot name="label" disabled={targetDisabled} for={htmlFor} {label} {required}>
-    <div class="label-text">
-      {label}
+  {#if label || $$slots.label}
+    <slot name="label" disabled={targetDisabled} for={htmlFor} {forwardClick} {label} {required}>
+      <div class="label-text">
+        {label}
+      </div>
+    </slot>
+  {/if}
+  {#if $$slots.default}
+    <div class="content">
+      <slot />
     </div>
-  </slot>
-  <slot />
+  {/if}
   {#if message}
     <slot name="message" disabled={targetDisabled} {message} {required} {status}>
       <div
@@ -131,9 +146,9 @@ const onClick = () => {
     </slot>
   {/if}
   {#if required}
-    <slot name="required" {requiredTip}>
-      <Tooltip autoShow="hover">
-        <span class="required-tip" slot="tip">{requiredTip}</span>
+    <slot name="required" requiredTip={requiredReason}>
+      <Tooltip showOn="hover">
+        <span class="required-tip" slot="tip">{requiredReason}</span>
         <div class="required">*</div>
       </Tooltip>
     </slot>

package/Field.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FieldStatus } from './Field.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,8 +7,11 @@ declare const __propDef: {
         label?: string | undefined;
         message?: string | undefined;
         required?: boolean | undefined;
-        requiredTip?: string | undefined;
-        status?: FieldStatus | undefined;
+        requiredReason?: string | undefined;
+        status?: string | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -40,6 +42,7 @@ declare const __propDef: {
         label: {
             disabled: boolean;
             for: string | undefined;
+            forwardClick: boolean;
             label: string | undefined;
             required: boolean;
         };
@@ -48,7 +51,7 @@ declare const __propDef: {
             disabled: boolean;
             message: string | undefined;
             required: boolean;
-            status: FieldStatus;
+            status: string;
         };
         required: {
             requiredTip: string;
@@ -59,5 +62,8 @@ export type FieldProps = typeof __propDef.props;
 export type FieldEvents = typeof __propDef.events;
 export type FieldSlots = typeof __propDef.slots;
 export default class Field extends SvelteComponentTyped<FieldProps, FieldEvents, FieldSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Field.types.d.ts

@@ -1 +1,4 @@
-export type FieldStatus = 'none' | 'info' | 'success' | 'warning' | 'error';
+import type { FIELD_STATUSES } from './Field.constants';
+type FieldStatusTuple = typeof FIELD_STATUSES;
+export type FieldStatus = FieldStatusTuple[number];
+export {};

package/Input.svelte

@@ -1,14 +1,37 @@
-<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;
 export let id = void 0;
 export let value = "";
+let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Input");
   }
 }
+export const blur = () => {
+  inputRef?.blur();
+};
+export const click = () => {
+  inputRef?.click();
+};
+export const focus = (options) => {
+  inputRef?.focus();
+};
+export const select = () => {
+  inputRef?.select();
+};
+export const setSelectionRange = (start, end, direction) => {
+  inputRef?.setSelectionRange(start, end, direction);
+};
+export const setRangeText = (replacement, start, end, selectionMode) => {
+  if (start && end) {
+    inputRef?.setRangeText(replacement, start, end, selectionMode);
+  } else {
+    inputRef?.setRangeText(replacement);
+  }
+};
 </script>
 
 {#if $$slots.default}
@@ -17,11 +40,12 @@ $: {
   </Label>
 {/if}
 <input
-  bind:value
+  bind:this={inputRef}
   class="sterling-input"
   class:composed
   {disabled}
   {id}
+  bind:value
   on:blur
   on:click
   on:change

package/Input.svelte.d.ts

@@ -6,6 +6,12 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         id?: string | undefined;
         value?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
+        select?: (() => void) | undefined;
+        setSelectionRange?: ((start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void) | undefined;
+        setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -49,5 +55,11 @@ export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
+    get select(): () => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Label.svelte

@@ -1,8 +1,18 @@
 <script>export let disabled = false;
-HTMLLabelElement;
+let labelRef;
+export const blur = () => {
+  labelRef?.blur();
+};
+export const click = () => {
+  labelRef?.click();
+};
+export const focus = (options) => {
+  labelRef?.focus();
+};
 </script>
 
 <label
+  bind:this={labelRef}
   aria-disabled={disabled}
   class="sterling-label"
   class:disabled
@@ -29,7 +39,7 @@ HTMLLabelElement;
   on:paste
   {...$$restProps}
 >
-  <slot />
+  <slot {disabled} />
 </label>
 
 <style>

package/Label.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,12 +33,17 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            disabled: boolean;
+        };
     };
 };
 export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Link.constants.d.ts

@@ -0,0 +1 @@
+export declare const LINK_VARIANTS: string[];

package/Link.constants.js

@@ -0,0 +1 @@
+export const LINK_VARIANTS = ['regular', 'ghost', 'undecorated'];

package/Link.svelte

@@ -1,9 +1,20 @@
 <script>export let href;
 export let disabled = false;
 export let variant = "regular";
+let linkRef;
+export const blur = () => {
+  linkRef?.blur();
+};
+export const click = () => {
+  linkRef?.click();
+};
+export const focus = (options) => {
+  linkRef?.focus();
+};
 </script>
 
 <a
+  bind:this={linkRef}
   class="sterling-link"
   class:disabled
   class:ghost={variant === 'ghost'}

package/Link.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { LinkVariant } from './Link.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         href: string;
         disabled?: boolean | undefined;
-        variant?: LinkVariant | undefined;
+        variant?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -40,7 +42,7 @@ declare const __propDef: {
         default: {
             disabled: boolean;
             href: string;
-            variant: LinkVariant;
+            variant: string;
         };
     };
 };
@@ -48,5 +50,8 @@ export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;
 export type LinkSlots = typeof __propDef.slots;
 export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Link.types.d.ts

@@ -1 +1,4 @@
-export type LinkVariant = 'regular' | 'ghost' | 'undecorated';
+import type { LINK_VARIANTS } from './Link.constants';
+type LinkVariantTuple = typeof LINK_VARIANTS;
+export type LinkVariant = LinkVariantTuple[number];
+export {};

package/List.constants.d.ts

@@ -1 +1 @@
-export declare const listContextKey = "sterlingList";
+export declare const LIST_CONTEXT_KEY = "sterlingList";

package/List.constants.js

@@ -1 +1 @@
-export const listContextKey = 'sterlingList';
+export const LIST_CONTEXT_KEY = 'sterlingList';

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 { listContextKey } from "./List.constants";
+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);
@@ -32,18 +30,24 @@ const raiseSelect = (value) => {
 $: {
   raiseSelect(selectedValue);
 }
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
+export const blur = () => {
+  listRef?.blur();
+};
+export const click = () => {
+  listRef?.click();
 };
-export const focus = () => {
+export const focus = (options) => {
   listRef?.focus();
 };
 export const scrollToSelectedItem = () => {
   const element = getSelectedItemElement();
   element?.scrollIntoView({ block: "nearest", inline: "nearest" });
 };
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
 const isElementListItem = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "listitem";
 };
@@ -172,7 +176,7 @@ const onKeydown = (event) => {
     }
   }
 };
-setContext(listContextKey, {
+setContext(LIST_CONTEXT_KEY, {
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   horizontal: horizontalStore
@@ -194,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

package/List.svelte.d.ts

@@ -6,7 +6,9 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         horizontal?: boolean | undefined;
         selectedValue?: string | undefined;
-        focus?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
         scrollToSelectedItem?: (() => void) | undefined;
         selectFirstItem?: (() => boolean) | undefined;
         selectPreviousItem?: (() => boolean) | undefined;
@@ -53,7 +55,9 @@ export type ListEvents = typeof __propDef.events;
 export type ListSlots = typeof __propDef.slots;
 /** A list of items where a single item can be selected. */
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-    get focus(): () => void;
+    get blur(): () => void;
+    get click(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
     get scrollToSelectedItem(): () => void;
     get selectFirstItem(): () => boolean;
     get selectPreviousItem(): () => boolean;