@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/inputs/Input.svelte

@@ -1,129 +0,0 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
-export let value = "";
-export let disabled = false;
-const inputId = uuid();
-</script>
-
-<!--
-	@component
-	A styled HTML input element with optional label.
--->
-<div class="sterling-input">
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <input
-    bind:value
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel
-    {...$$restProps}
-    {disabled}
-    id={inputId}
-  />
-</div>
-
-<style>
-  .sterling-input {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-radius: var(--Input__border-radius);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
-    color: var(--Input__color);
-    font: inherit;
-    margin: 0;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-input:hover {
-    background-color: var(--Input__background-color--hover);
-    border-color: var(--Input__border-color--hover);
-    color: var(--Input__color--hover);
-  }
-
-  .sterling-input:focus-within {
-    background-color: var(--Input__background-color--focus);
-    border-color: var(--Input__border-color--focus);
-    color: var(--Input__color--focus);
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
-  }
-
-  .sterling-input:disabled {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(---Input__border-color--disabled);
-    color: var(--Input__color--disabled);
-    cursor: not-allowed;
-  }
-
-  .sterling-input input {
-    font: inherit;
-    color: inherit;
-    padding: 0.5em;
-  }
-
-  .sterling-input input,
-  .sterling-input input:hover,
-  .sterling-input input:focus-within,
-  .sterling-input input:disabled {
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-input input::placeholder {
-    color: var(--Display__color--faint);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-input input:disabled::placeholder {
-    color: var(--Display__color--disabled);
-  }
-
-  .sterling-input > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-input > :global(label):empty {
-    margin: 0;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-input,
-    .sterling-input input::placeholder {
-      transition: none;
-    }
-  }
-</style>

package/inputs/Select.svelte.d.ts

@@ -1,62 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T> {
-    props(): {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        items?: T[] | undefined;
-        open?: boolean | undefined;
-        selectedIndex?: number | undefined;
-        selectedItem?: T | undefined;
-    };
-    events(): {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        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;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        itemSelected: CustomEvent<any>;
-        itemSelectPending: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        label: {
-            index: number;
-            item: undefined;
-            selected: boolean;
-        };
-        value: {};
-        button: {
-            open: boolean;
-        };
-        list: {};
-        default: {
-            disabled: boolean;
-            index: any;
-            item: any;
-            selected: any;
-        };
-    };
-}
-export type SelectProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type SelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type SelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-/** A single item that can be selected from a popup list of items. */
-export default class Select<T> extends SvelteComponentTyped<SelectProps<T>, SelectEvents<T>, SelectSlots<T>> {
-}
-export {};

package/inputs/Slider.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: number | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        precision?: number | undefined;
-        vertical?: boolean | undefined;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        label: {};
-    };
-};
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-/** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
-export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
-}
-export {};

package/inputs/TextArea.svelte

@@ -1,154 +0,0 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
-export let value;
-export let resize = "none";
-export let disabled = false;
-export let autoHeight = false;
-const inputId = uuid();
-let textAreaRef;
-const autoSetHeight = () => {
-  if (autoHeight && textAreaRef) {
-    textAreaRef.style.height = "auto";
-    textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
-  }
-};
-const onInput = () => {
-  autoSetHeight();
-};
-$:
-  autoHeight, autoSetHeight();
-</script>
-
-<div class="sterling-text-area" style={`--TextArea__resize: ${resize};`}>
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <textarea
-    {...$$restProps}
-    bind:this={textAreaRef}
-    bind:value
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel
-    on:input={onInput}
-    {disabled}
-    rows="1"
-    {...$$restProps}
-  />
-</div>
-
-<style>
-  .sterling-text-area {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-radius: var(--Input__border-radius);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
-    box-sizing: border-box;
-    color: var(--Input__color);
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    padding: 0;
-    margin: 0;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-text-area:hover {
-    background-color: var(--Input__background-color--hover);
-    border-color: var(--Input__border-color--hover);
-    color: var(--Input__color--hover);
-  }
-
-  .sterling-text-area:focus-wthin {
-    background-color: var(--Input__background-color--focus);
-    border-color: var(--Input__border-color--focus);
-    color: var(--Input__color--focus);
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
-  }
-
-  .sterling-text-area:disabled {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(---Input__border-color--disabled);
-    color: var(--Input__color--disabled);
-    cursor: not-allowed;
-  }
-
-  textarea {
-    background: none;
-    box-sizing: border-box;
-    color: inherit;
-    font: inherit;
-    line-height: inherit;
-    padding: 0 0.5em 0.5em 0.5em;
-    min-height: 3em;
-    margin: 0.5em 0 0 0;
-    resize: var(--TextArea__resize, none);
-    width: 100%;
-  }
-
-  textarea,
-  textarea:hover,
-  textarea:focus-within,
-  textarea:disabled {
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
-
-  textarea::placeholder {
-    color: var(--Display__color--faint);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  textarea:disabled::placeholder {
-    color: var(--Display__color--disabled);
-  }
-
-  .sterling-text-area > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-text-area > :global(label):empty {
-    margin: 0;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-text-area,
-    .sterling-text-area textarea::placeholder {
-      transition: none;
-    }
-  }
-</style>

package/surfaces/CloseX.svelte

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...$$restProps}>
-	<path
-		d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-	/>
-</svg>

package/surfaces/CloseX.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  CloseXProps */
-/** @typedef {typeof __propDef.events}  CloseXEvents */
-/** @typedef {typeof __propDef.slots}  CloseXSlots */
-export default class CloseX extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CloseXProps = typeof __propDef.props;
-export type CloseXEvents = typeof __propDef.events;
-export type CloseXSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/surfaces/Portal.svelte

@@ -1,14 +0,0 @@
-<script>import { portal } from "../portal";
-export let target = document.body;
-</script>
-
-<div class="portal" use:portal={{ target }}>
-  <slot {...$$restProps} />
-</div>
-
-<style>
-  .portal {
-    position: relative;
-    overflow: visible;
-  }
-</style>

package/surfaces/Portal.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        target?: HTMLElement | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            [x: string]: any;
-        };
-    };
-};
-export type PortalProps = typeof __propDef.props;
-export type PortalEvents = typeof __propDef.events;
-export type PortalSlots = typeof __propDef.slots;
-export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
-}
-export {};