@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/MenuItemDisplay.svelte

@@ -1,32 +0,0 @@
-<script>/** When true, displays the menu item as checked. */
-export let checked = false;
-/** When true, displays the menu item as disabled. */
-export let disabled = false;
-/** When true, displays the menu item as a parent of children. */
-export let hasChildren = false;
-/** When true, displays the menu as a top level menu bar item. */
-export let isMenuBarItem = false;
-/** The role of the menu item. */
-export let menuItemRole = 'menuitem';
-/** Additional class names to apply. */
-export let variant = '';
-</script>
-
-<div class={`sterling-menu-item-display ${variant}`} class:disabled>
-  <div
-    class="check"
-    class:checkmark={menuItemRole === 'menuitemcheckbox'}
-    class:bullet={menuItemRole === 'menuitemradio'}
-    class:checked
-  />
-  <div class="content">
-    <slot {checked} {disabled} {hasChildren} {isMenuBarItem} {menuItemRole} {variant} />
-  </div>
-  {#if $$slots.shortcut}
-    <div class="shortcut">
-      <slot name="shortcut" {checked} {disabled} {isMenuBarItem} {menuItemRole} {variant} />
-    </div>
-  {:else}
-    <div class="chevron" class:has-children={!isMenuBarItem && hasChildren} />
-  {/if}
-</div>

package/dist/MenuItemDisplay.svelte.d.ts

@@ -1,39 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** When true, displays the menu item as checked. */ checked?: boolean | undefined;
-        /** When true, displays the menu item as disabled. */ disabled?: boolean | undefined;
-        /** When true, displays the menu item as a parent of children. */ hasChildren?: boolean | undefined;
-        /** When true, displays the menu as a top level menu bar item. */ isMenuBarItem?: boolean | undefined;
-        /** The role of the menu item. */ menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
-        /** Additional class names to apply. */ variant?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            checked: boolean;
-            disabled: boolean;
-            hasChildren: boolean;
-            isMenuBarItem: boolean;
-            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-            variant: string;
-        };
-        shortcut: {
-            checked: boolean;
-            disabled: boolean;
-            isMenuBarItem: boolean;
-            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-            variant: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MenuItemDisplayProps = typeof __propDef.props;
-export type MenuItemDisplayEvents = typeof __propDef.events;
-export type MenuItemDisplaySlots = typeof __propDef.slots;
-export default class MenuItemDisplay extends SvelteComponent<MenuItemDisplayProps, MenuItemDisplayEvents, MenuItemDisplaySlots> {
-}
-export {};

package/dist/RgbColorSliders.svelte

@@ -1,93 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Input from './Input.svelte';
-import Slider from './Slider.svelte';
-import { round } from 'lodash-es';
-// ----- Props ----- //
-/** The red value. */
-export let red = 0;
-/** The green value. */
-export let green = 0;
-/** The blue value. */
-export let blue = 0;
-/** The alpha value. */
-export let alpha = 1;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let redText = red.toString();
-let greenText = green.toString();
-let blueText = blue.toString();
-let alphaText = alpha.toString();
-$: {
-    redText = red.toString();
-}
-$: {
-    greenText = green.toString();
-}
-$: {
-    blueText = blue.toString();
-}
-$: {
-    alphaText = alpha.toString();
-}
-// ----- Events ----- //
-const dispatcher = createEventDispatcher();
-const raiseChange = () => {
-    dispatcher('change', { red, green, blue, alpha });
-};
-$: red, green, blue, alpha, raiseChange();
-// ----- Event Handlers ----- //
-const parseRgbValue = (text, defaultValue = 0) => {
-    if (!text) {
-        return defaultValue;
-    }
-    const newValue = text ? Number.parseFloat(text) : defaultValue;
-    if (newValue && newValue !== Number.NaN) {
-        return Math.round(Math.max(0, Math.min(255, newValue)));
-    }
-    return defaultValue;
-};
-const onRedInputChange = (event) => {
-    const inputChangeEvent = event;
-    red = parseRgbValue(inputChangeEvent?.currentTarget?.value, red);
-};
-const onGreenInputChange = (event) => {
-    const inputChangeEvent = event;
-    green = parseRgbValue(inputChangeEvent?.currentTarget?.value, green);
-};
-const onBlueInputChange = (event) => {
-    const inputChangeEvent = event;
-    blue = parseRgbValue(inputChangeEvent?.currentTarget?.value, blue);
-};
-const onAlphaInputchange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    const newValue = text ? Number.parseFloat(text) : alpha;
-    if (newValue && newValue !== Number.NaN) {
-        alpha = round(Math.max(0, Math.min(1, newValue)), 2);
-    }
-};
-</script>
-
-<div class={`sterling-rgb-color-sliders ${variant}`}>
-  <div class="slider red-slider">
-    <Slider min={0} max={255} precision={0} bind:value={red} {variant} />
-  </div>
-  <Input bind:value={redText} {variant} on:change={(e) => onRedInputChange(e)} />
-  <div class="slider green-slider">
-    <Slider min={0} max={255} precision={0} bind:value={green} {variant} />
-  </div>
-  <Input bind:value={greenText} {variant} on:change={(e) => onGreenInputChange(e)} />
-  <div class="slider blue-slider">
-    <Slider min={0} max={255} precision={0} bind:value={blue} {variant} />
-  </div>
-  <Input bind:value={blueText} {variant} on:change={(e) => onBlueInputChange(e)} />
-  <div class="alpha" style={`--red:${red};--green:${green};--blue:${blue}`}>
-    <div class="alpha-hatch" />
-    <div class="alpha-gradient" />
-    <div class="slider alpha-slider">
-      <Slider min={0} max={1} precision={2} bind:value={alpha} {variant} />
-    </div>
-  </div>
-  <Input bind:value={alphaText} {variant} on:change={(e) => onAlphaInputchange(e)} />
-</div>

package/dist/RgbColorSliders.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** The red value. */ red?: number | undefined;
-        /** The green value. */ green?: number | undefined;
-        /** The blue value. */ blue?: number | undefined;
-        /** The alpha value. */ alpha?: number | undefined;
-        /** Additional class names to apply. */ variant?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type RgbColorSlidersProps = typeof __propDef.props;
-export type RgbColorSlidersEvents = typeof __propDef.events;
-export type RgbColorSlidersSlots = typeof __propDef.slots;
-export default class RgbColorSliders extends SvelteComponent<RgbColorSlidersProps, RgbColorSlidersEvents, RgbColorSlidersSlots> {
-}
-export {};

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,54 +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;
-}
-
-@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,8 +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');
-@import url('./Button.disabled.css');

package/dist/css/Button.disabled.css

@@ -1,22 +0,0 @@
-.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;
-}

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,55 +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%);
-}
-
-.sterling-callout.top-start .arrow,
-.sterling-callout.top .arrow,
-.sterling-callout.top-end .arrow {
-  filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
-}
-
-.sterling-callout.left-start .arrow,
-.sterling-callout.left .arrow,
-.sterling-callout.left-end .arrow {
-  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
-}

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');