@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/dist/TreeChevron.svelte.d.ts

@@ -1,53 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        expanded?: boolean | undefined;
-        hasChildren?: boolean | undefined;
-        variant?: string | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        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: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TreeChevronProps = typeof __propDef.props;
-export type TreeChevronEvents = typeof __propDef.events;
-export type TreeChevronSlots = typeof __propDef.slots;
-export default class TreeChevron extends SvelteComponent<TreeChevronProps, TreeChevronEvents, TreeChevronSlots> {
-}
-export {};

package/dist/TreeItem.svelte.d.ts

@@ -1,101 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        text?: string | undefined;
-        value: string;
-        variant?: string | undefined;
-        collapse?: (() => boolean) | undefined;
-        expand?: (() => boolean) | undefined;
-        toggleExpanded?: (() => boolean) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        click?: (() => void) | undefined;
-        select?: (() => void) | undefined;
-        selectParent?: (() => boolean) | undefined;
-        selectPrevious?: (() => boolean) | undefined;
-        selectNext?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        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: {
-        item: {
-            depth: import("svelte/store").Readable<number>;
-            disabled: boolean;
-            expanded: boolean;
-            hasChildren: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-        label: {
-            depth: import("svelte/store").Readable<number>;
-            disabled: boolean;
-            expanded: boolean;
-            hasChildren: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-        default: {
-            depth: number;
-            disabled: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TreeItemProps = typeof __propDef.props;
-export type TreeItemEvents = typeof __propDef.events;
-export type TreeItemSlots = typeof __propDef.slots;
-/** A item in a Tree displaying the item and children. */
-export default class TreeItem extends SvelteComponent<TreeItemProps, TreeItemEvents, TreeItemSlots> {
-    get collapse(): () => boolean;
-    get expand(): () => boolean;
-    get toggleExpanded(): () => boolean;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get click(): () => void;
-    get select(): () => void;
-    get selectParent(): () => boolean;
-    get selectPrevious(): () => boolean;
-    get selectNext(): () => boolean;
-}
-export {};

package/dist/TreeItem.types.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable } from 'svelte/store';
-/**
- * The context for a tree item and its descendants.
- */
-export type TreeItemContext = {
-    /**
-     * The depth of this tree item within the tree hierarchy.
-     * Starts at zero.
-     */
-    depth: Readable<number>;
-    /** When true, the three item is disabled. */
-    disabled: Readable<boolean>;
-};

package/dist/TreeItemDisplay.svelte

@@ -1,74 +0,0 @@
-<script>import TreeChevron from './TreeChevron.svelte';
-// ----- Props ----- //
-/** The depth of the item in the tree. */
-export let depth = 0;
-/** When true, display the item as disabled. */
-export let disabled = false;
-/** When true, displays the item is expanded showing children. */
-export let expanded = false;
-/** When true, displays the item has children. */
-export let hasChildren = false;
-/** When true, display selected state. */
-export let selected = false;
-/** The value uniquely identifying the tree item within the tree. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let divRef;
-// ----- Methods ----- //
-export const click = () => {
-    divRef?.click();
-};
-export const blur = () => {
-    divRef?.blur();
-};
-export const focus = (options) => {
-    divRef?.focus(options);
-};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  bind:this={divRef}
-  class={`sterling-tree-item-display ${variant}`}
-  class:disabled
-  class:expanded
-  class:selected
-  style={`--sterling-tree-item-depth: ${depth}`}
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  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|passive
-  {...$$restProps}
->
-  <TreeChevron {expanded} {hasChildren} {variant} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} {variant} />
-</div>

package/dist/TreeItemDisplay.svelte.d.ts

@@ -1,73 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        depth?: number | undefined;
-        disabled?: boolean | undefined;
-        expanded?: boolean | undefined;
-        hasChildren?: boolean | undefined;
-        selected?: boolean | undefined;
-        value: string;
-        variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        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: {
-            depth: number;
-            disabled: boolean;
-            expanded: boolean;
-            hasChildren: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TreeItemDisplayProps = typeof __propDef.props;
-export type TreeItemDisplayEvents = typeof __propDef.events;
-export type TreeItemDisplaySlots = typeof __propDef.slots;
-export default class TreeItemDisplay extends SvelteComponent<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/css/Button.base.css

@@ -1,74 +0,0 @@
-.sterling-button {
-  align-content: center;
-  align-items: center;
-  background-color: var(--stsv-button__background-color);
-  border-color: var(--stsv-button__border-color);
-  border-radius: 8px;
-  border-style: solid;
-  border-width: 2px;
-  box-sizing: border-box;
-  color: var(--stsv-button__color);
-  cursor: pointer;
-  display: inline-flex;
-  flex-direction: row;
-  font: inherit;
-  justify-content: center;
-  justify-items: center;
-  column-gap: 0.25em;
-  overflow: hidden;
-  padding: 0.5em 1em;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.sterling-button:hover {
-  background-color: var(--stsv-button__background-color--hover);
-  border-color: var(--stsv-button__border-color--hover);
-  color: var(--stsv-button__color--hover);
-}
-
-.sterling-button:active {
-  background-color: var(--stsv-button__background-color--active);
-  border-color: var(--stsv-button__border-color--active);
-  color: var(--stsv-button__color--active);
-}
-
-.sterling-button:focus-visible {
-  border-color: var(--stsv-button__border-color--focus);
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-}
-
-.sterling-button:disabled {
-  cursor: not-allowed;
-  position: relative;
-}
-
-.sterling-button:disabled::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion) {
-  .sterling-button {
-    transition: none;
-  }
-}

package/dist/css/Button.colorful.css

@@ -1,17 +0,0 @@
-.sterling-button.colorful {
-  background-color: var(--stsv-button--colorful__background-color);
-  border-color: var(--stsv-button--colorful__border-color);
-  color: var(--stsv-button--colorful__color);
-}
-
-.sterling-button.colorful:hover {
-  background-color: var(--stsv-button--colorful__background-color--hover);
-  border-color: var(--stsv-button--colorful__border-color--hover);
-  color: var(--stsv-button--colorful__color--hover);
-}
-
-.sterling-button.colorful:active {
-  background-color: var(--stsv-button--colorful__background-color--active);
-  border-color: var(--stsv-button--colorful__border-color--active);
-  color: var(--stsv-button--colorful__color--active);
-}

package/dist/css/Button.css

@@ -1,7 +0,0 @@
-@import url('./Button.base.css');
-@import url('./Button.colorful.css');
-@import url('./Button.shapes.css');
-@import url('./Button.secondary.css');
-@import url('./Button.secondary.colorful.css');
-@import url('./Button.tool.css');
-@import url('./Button.tool.colorful.css');

package/dist/css/Button.secondary.colorful.css

@@ -1,15 +0,0 @@
-.sterling-button.secondary.colorful {
-  border-color: var(--stsv-button--colorful__border-color);
-  color: var(--stsv-button--colorful__border-color);
-}
-.sterling-button.secondary.colorful:hover {
-  background-color: var(--stsv-button--colorful__background-color--hover);
-  border-color: var(--stsv-button--colorful__border-color--hover);
-  color: var(--stsv-button--colorful__color--hover);
-}
-
-.sterling-button.secondary.colorful:active {
-  background-color: var(--stsv-button--colorful__background-color--active);
-  border-color: var(--stsv-button--colorful__border-color--active);
-  color: var(--stsv-button--colorful__color--active);
-}

package/dist/css/Button.secondary.css

@@ -1,11 +0,0 @@
-.sterling-button.secondary {
-  background-color: transparent;
-}
-
-.sterling-button.secondary:hover {
-  background-color: var(--stsv-button__background-color--hover);
-}
-
-.sterling-button.secondary:active {
-  background-color: var(--stsv-button__background-color--active);
-}

package/dist/css/Button.shapes.css

@@ -1,14 +0,0 @@
-.sterling-button.capsule {
-  border-radius: 10000px;
-  padding: 0.5em;
-}
-
-.sterling-button.circular {
-  border-radius: 10000px;
-  padding: 0.5em;
-  aspect-ratio: 1 /1;
-}
-
-.sterling-button.square {
-  border-radius: 0;
-}

package/dist/css/Button.tool.colorful.css

@@ -1,13 +0,0 @@
-.sterling-button.tool.colorful {
-  color: var(--stsv-button--colorful__border-color);
-}
-
-.sterling-button.tool.colorful:hover {
-  background-color: var(--stsv-button--colorful__background-color--hover);
-  color: var(--stsv-button--colorful__color--hover);
-}
-
-.sterling-button.tool.colorful:active {
-  background-color: var(--stsv-button--colorful__background-color--active);
-  color: var(--stsv-button--colorful__color--active);
-}

package/dist/css/Button.tool.css

@@ -1,18 +0,0 @@
-.sterling-button.tool {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.sterling-button.tool:hover {
-  background-color: var(--stsv-button__background-color--hover);
-  border-color: transparent;
-}
-
-.sterling-button.tool:active {
-  background-color: var(--stsv-button__background-color--active);
-  border-color: transparent;
-}
-
-.sterling-button.tool:focus-visible {
-  border-color: var(--stsv-button__border-color--focus);
-}

package/dist/css/Callout.base.css

@@ -1,43 +0,0 @@
-.sterling-callout-portal {
-  position: relative;
-  overflow: visible;
-}
-
-.sterling-callout {
-  background-color: var(--stsv-common__background-color);
-  border-color: var(--stsv-common__border-color);
-  border-radius: 0;
-  border-style: solid;
-  border-width: 2px;
-  box-shadow: var(--stsv-common__box-shadow);
-  box-sizing: border-box;
-  color: var(--stsv-common__color);
-  display: none;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  height: auto;
-  left: 0;
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  width: max-content;
-  z-index: 0;
-}
-
-.sterling-callout.open {
-  display: grid;
-}
-
-.sterling-callout .arrow {
-  position: absolute;
-  box-sizing: border-box;
-  width: 14px;
-  height: 14px;
-  background-color: inherit;
-  border-color: inherit;
-  border-style: inherit;
-  border-width: inherit;
-  /* This clip path clips 1/2 the square to create a triangle */
-  /* The -100% and 200% allow for the drop-shadow to not be clipped */
-  clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
-}

package/dist/css/Callout.colorful.css

@@ -1,5 +0,0 @@
-.sterling-callout.colorful {
-  background-color: var(--stsv-button--colorful__background-color);
-  border-color: var(--stsv-button--colorful__border-color);
-  color: var(--stsv-button--colorful__color);
-}

package/dist/css/Callout.css

@@ -1,2 +0,0 @@
-@import url('./Callout.base.css');
-@import url('./Callout.colorful.css');

package/dist/css/Checkbox.base.css

@@ -1,145 +0,0 @@
-.sterling-checkbox {
-  align-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  font: inherit;
-  margin: 0;
-  outline: none;
-  padding: 0;
-}
-
-/* 
-The container 
-- allows the input to be hidden
-- avoids input participating in layout
-- prevents collisions with surrounding slots
-*/
-.sterling-checkbox .container {
-  font: inherit;
-  position: relative;
-  display: grid;
-  align-items: center;
-  margin-right: 0.25em;
-}
-
-/*
-The input is hidden since the built-in browser checkbox cannot be customized
-*/
-.sterling-checkbox input {
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  opacity: 0;
-  height: 20px;
-  width: 20px;
-}
-
-/*
-The indicator handles both the box and the checkmark.
-The box cannot be on the container since the adjacent sibling selector is needed
-and there is not a parent CSS selector.
-*/
-.sterling-checkbox .indicator {
-  background-color: var(--stsv-input__background-color);
-  border-color: var(--stsv-input__border-color);
-  border-style: solid;
-  border-width: 2px;
-  box-sizing: border-box;
-  display: inline-block;
-  height: 20px;
-  position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
-  width: 20px;
-  pointer-events: none;
-}
-
-.sterling-checkbox input:checked + .indicator {
-  background-color: var(--stsv-input__background-color);
-  border-color: var(--stsv-input__border-color);
-}
-
-.sterling-checkbox:not(.disabled):hover .indicator {
-  background-color: var(--stsv-input__background-color--hover);
-  border-color: var(--stsv-input__border-color--hover);
-}
-
-.sterling-checkbox input:focus-visible + .indicator {
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-}
-
-/*
-The checkmark is a rotated L centered in the box.
-*/
-.sterling-checkbox .indicator::after {
-  border-color: var(--stsv-input__color);
-  border-style: solid;
-  border-width: 0 3px 3px 0;
-  box-sizing: border-box;
-  content: '';
-  height: 14px;
-  left: 50%;
-  position: absolute;
-  top: 45%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  transform-origin: center;
-  transition: border-color 250ms, opacity 150ms;
-  width: 7px;
-  opacity: 0;
-}
-
-.sterling-checkbox input:checked + .indicator::after {
-  opacity: 1;
-}
-
-.sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
-  border-color: var(--stsv-input__color--hover);
-}
-
-.sterling-checkbox.disabled,
-.sterling-checkbox.disabled input {
-  cursor: not-allowed;
-}
-
-.sterling-checkbox .container::after {
-  background: repeating-linear-gradient(
-    var(--stsv-common--disabled__stripe-angle),
-    var(--stsv-common--disabled__stripe-color),
-    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-    var(--stsv-common--disabled__stripe-color--alt)
-      calc(2 * var(--stsv-common--disabled__stripe-width))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
-.sterling-checkbox > label {
-  color: var(--stsv-common__color);
-  transition: color 250ms;
-  font: inherit;
-}
-
-.sterling-checkbox.disabled .container::after {
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion) {
-  .sterling-checkbox .indicator,
-  .sterling-checkbox .indicator::after,
-  .sterling-checkbox .container::after,
-  .sterling-checkbox > label {
-    transition: none;
-  }
-}