@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/@types/clickOutside.d.ts

@@ -1,5 +1,11 @@
 declare namespace svelte.JSX {
-	interface DOMAttributes<T> {
-		onclick_outside?: (e: CustomEvent) => void;
-	}
+  type ClickOutsideEventDetail = {
+    mouseEvent: MouseEvent;
+  };
+
+  type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+
+  interface DOMAttributes<T> {
+    onclick_outside?: (e: ClickOutsideEvent) => void;
+  }
 }

package/{buttons/Button.svelte → Button.svelte}

@@ -47,13 +47,13 @@ export let shape = "rounded";
   button {
     align-content: center;
     align-items: center;
-    background-color: var(--Button__background-color);
-    border-color: var(--Button__border-color);
-    border-radius: var(--Button__border-radius);
-    border-style: var(--Button__border-style);
-    border-width: var(--Button__border-width);
+    background-color: var(--stsv-Button__background-color);
+    border-color: var(--stsv-Button__border-color);
+    border-radius: var(--stsv-Button__border-radius);
+    border-style: var(--stsv-Button__border-style);
+    border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
-    color: var(--Button__color);
+    color: var(--stsv-Button__color);
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
@@ -85,29 +85,29 @@ export let shape = "rounded";
   }
 
   button:hover {
-    background-color: var(--Button__background-color--hover);
-    border-color: var(--Button__border-color--hover);
-    color: var(--Button__color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
+    border-color: var(--stsv-Button__border-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
   button:active {
-    background-color: var(--Button__background-color--active);
-    border-color: var(--Button__border-color--active);
-    color: var(--Button__color--active);
+    background-color: var(--stsv-Button__background-color--active);
+    border-color: var(--stsv-Button__border-color--active);
+    color: var(--stsv-Button__color--active);
   }
 
   button:focus-visible {
-    border-color: var(--Button__border-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);
+    border-color: var(--stsv-Button__border-color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
   }
 
   button:disabled {
-    background-color: var(--Button__background-color--disabled);
-    border-color: var(--Button__border-color--disabled);
-    color: var(--Button__color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }
 
@@ -116,11 +116,11 @@ export let shape = "rounded";
   }
 
   button.outline:hover {
-    background-color: var(--Button__background-color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
   }
 
   button.outline:active {
-    background-color: var(--Button__background-color--active);
+    background-color: var(--stsv-Button__background-color--active);
   }
 
   button.outline:disabled {
@@ -128,7 +128,7 @@ export let shape = "rounded";
   }
 
   button.outline:disabled:hover {
-    border-color: var(--Button__border-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   button.ghost {
@@ -137,17 +137,17 @@ export let shape = "rounded";
   }
 
   button.ghost:hover {
-    background-color: var(--Button__background-color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
     border-color: transparent;
   }
 
   button.ghost:active {
-    background-color: var(--Button__background-color--active);
+    background-color: var(--stsv-Button__background-color--active);
     border-color: transparent;
   }
 
   button.ghost:focus-visible {
-    border-color: var(--Button__border-color--focus);
+    border-color: var(--stsv-Button__border-color--focus);
   }
 
   button.ghost:disabled {
@@ -155,7 +155,7 @@ export let shape = "rounded";
   }
 
   button.ghost:disabled:hover {
-    background-color: var(--Button__background-color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/{inputs/Checkbox.svelte → Checkbox.svelte}

@@ -1,5 +1,5 @@
 <script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 const inputId = uuid();
@@ -94,10 +94,10 @@ const inputId = uuid();
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
     display: inline-block;
     height: 20px;
@@ -108,27 +108,27 @@ const inputId = uuid();
   }
 
   input:checked + .indicator {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
   }
 
   input:focus-visible + .indicator {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
   }
 
   input:disabled + .indicator {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(--Input__border-color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   /*
 		The checkmark is a rotated L centered in the box.
 	*/
   input:checked + .indicator::after {
-    border-color: var(--Input__color);
+    border-color: var(--stsv-Input__color);
     border-style: solid;
     border-width: 0 3px 3px 0;
     box-sizing: border-box;
@@ -136,7 +136,7 @@ const inputId = uuid();
     height: 14px;
     left: 50%;
     position: absolute;
-    top: 50%;
+    top: 45%;
     transform: translate(-50%, -50%) rotate(45deg);
     transform-origin: center;
     transition: border-color 250ms;
@@ -145,7 +145,7 @@ const inputId = uuid();
   }
 
   input:checked:disabled + .indicator::after {
-    border-color: var(--Input__color--disabled);
+    border-color: var(--stsv-Common__color--disabled);
   }
 
   .label {

package/{surfaces/Dialog.svelte → Dialog.svelte}

@@ -1,6 +1,5 @@
 <script>import { createEventDispatcher, onMount, tick } from "svelte";
-import Button from "../buttons/Button.svelte";
-import CloseX from "./CloseX.svelte";
+import Button from "./Button.svelte";
 const dialogFadeDuration = 250;
 export let open = false;
 export let returnValue = "";
@@ -108,9 +107,7 @@ A styled &lt;dialog&gt; element
             </div>
             <div class="close">
               <Button variant="ghost" shape="circular" on:click={() => closeDialog()}>
-                <div class="close-x">
-                  <CloseX />
-                </div>
+                <div class="close-x" />
               </Button>
             </div>
           </slot>
@@ -150,17 +147,17 @@ A styled &lt;dialog&gt; element
   }
 
   .header {
-    background-color: var(--Display__background-color);
+    background-color: var(--stsv-Display__background-color);
   }
 
   .content {
-    background-color: var(--Common__background-color);
-    border-color: var(--Common__border-color);
-    border-radius: var(--Common__border-radius);
-    border-style: var(--Common__border-style);
-    border-width: var(--Common__border-width);
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
     box-sizing: border-box;
-    color: var(--Common__color);
+    color: var(--stsv-Common__color);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto auto;
@@ -203,13 +200,29 @@ A styled &lt;dialog&gt; element
   }
 
   .close-x {
-    width: 1.5em;
-    height: 1.5em;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    place-content: center;
-    align-content: center;
+    width: 1em;
+    height: 1em;
+    position: relative;
+  }
+
+  .close-x:before,
+  .close-x:after {
+    content: '';
+    position: absolute;
+    width: 0.75em;
+    height: 0.125em;
+    background-color: currentColor;
+    top: 0.45em;
+  }
+
+  .close-x:before {
+    transform: rotate(45deg);
+    left: 0.125em;
+  }
+
+  .close-x:after {
+    transform: rotate(-45deg);
+    right: 0.125em;
   }
 
   .body {
@@ -217,8 +230,8 @@ A styled &lt;dialog&gt; element
   }
 
   .separator {
-    background-color: var(--Display__background-color);
-    height: var(--Common__border-width);
+    background-color: var(--stsv-Display__background-color);
+    height: var(--stsv-Common__border-width);
     margin: 0 0.25em;
   }
 

package/{inputs/Input.svelte → Input.svelte}

@@ -1,5 +1,5 @@
 <script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let value = "";
 export let disabled = false;
 const inputId = uuid();
@@ -53,37 +53,37 @@ const inputId = uuid();
   .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);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-radius: var(--stsv-Input__border-radius);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
+    color: var(--stsv-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);
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-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);
+    background-color: var(--stsv-Input__background-color--focus);
+    border-color: var(--stsv-Input__border-color--focus);
+    color: var(--stsv-Input__color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-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);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }
 
@@ -103,12 +103,12 @@ const inputId = uuid();
   }
 
   .sterling-input input::placeholder {
-    color: var(--Display__color--faint);
+    color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .sterling-input input:disabled::placeholder {
-    color: var(--Display__color--disabled);
+    color: var(--stsv-Display__color--disabled);
   }
 
   .sterling-input > :global(label) {

package/Label.svelte

@@ -0,0 +1,52 @@
+<script>export let disabled = false;
+</script>
+
+<label
+  class="sterling-label"
+  class:disabled
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  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:scroll
+  on:wheel
+  on:paste
+  {...$$restProps}
+>
+  <slot />
+</label>
+
+<!-- 
+    @component 
+    A styled HTML label element
+-->
+<style>
+  label {
+    transition: opacity 250ms;
+    font: inherit;
+  }
+
+  label.disabled {
+    opacity: 0.5;
+  }
+
+  @media (prefers-reduced-motion) {
+    label {
+      transition: none;
+    }
+  }
+</style>

package/Label.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | 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;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
+/** A styled HTML label element */
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/List.constants.d.ts

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

package/List.constants.js

@@ -0,0 +1 @@
+export const listContextKey = 'sterlingList';