@geoffcox/sterling-svelte 0.0.19 → 0.0.21

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

@@ -3,11 +3,21 @@ 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();
   }
 }
+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

@@ -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

@@ -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
@@ -132,7 +147,7 @@ const onClick = () => {
   {/if}
   {#if required}
     <slot name="required" {requiredTip}>
-      <Tooltip autoShow="hover">
+      <Tooltip showOn="hover">
         <span class="required-tip" slot="tip">{requiredTip}</span>
         <div class="required">*</div>
       </Tooltip>

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;
@@ -9,7 +8,10 @@ declare const __propDef: {
         message?: string | undefined;
         required?: boolean | undefined;
         requiredTip?: string | undefined;
-        status?: FieldStatus | 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

@@ -4,11 +4,34 @@ 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();
   }
 }
+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

@@ -0,0 +1,102 @@
+<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'}
+  class:undecorated={variant === 'undecorated'}
+  {href}
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}><slot {disabled} {href} {variant} /></a
+>
+
+<style>
+  a {
+    background-color: transparent;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    border-bottom-style: var(--stsv-Button__border-style);
+    border-bottom-width: calc(var(--stsv-Button__border-width));
+    border-bottom-color: var(--stsv-Button__border-color);
+    color: var(--stsv-Button__color);
+    cursor: pointer;
+    font: inherit;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  a:visited {
+    border-bottom-color: var(--stsv-Button__border-color);
+  }
+
+  a.ghost {
+    border-bottom-color: transparent;
+  }
+
+  a:hover {
+    border-bottom-color: var(--stsv-Button__border-color--hover);
+    color: var(--stsv-Button__color--hover);
+  }
+
+  a:active {
+    border-bottom-color: var(--stsv-Button__border-color--active);
+    color: var(--stsv-Button__color--active);
+  }
+
+  a.disabled {
+    border-bottom-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  a.undecorated,
+  a.undecorated:hover,
+  a.undecorated:active,
+  a.undecorated:visited {
+    border: none;
+  }
+</style>

package/Link.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        disabled?: boolean | undefined;
+        variant?: string | undefined;
+        blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            disabled: boolean;
+            href: string;
+            variant: string;
+        };
+    };
+};
+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

@@ -0,0 +1,4 @@
+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';