@geoffcox/sterling-svelte 0.0.16 → 0.0.18

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,8 +1,13 @@
 <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();
+export let id = void 0;
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
 </script>
 
 <!--
@@ -12,6 +17,8 @@ const inputId = uuid();
 <div class="sterling-checkbox">
   <div class="container">
     <input
+      {disabled}
+      {id}
       type="checkbox"
       on:blur
       on:click
@@ -35,15 +42,13 @@ const inputId = uuid();
       on:wheel
       bind:checked
       {...$$restProps}
-      id={inputId}
-      {disabled}
     />
     <div class="indicator" />
   </div>
-  {#if $$slots.label}
+  {#if $$slots.default}
     <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" {checked} {disabled} />
+      <Label {disabled} for={id}>
+        <slot {checked} {disabled} />
       </Label>
     </div>
   {/if}
@@ -94,10 +99,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 +113,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;
@@ -145,7 +150,7 @@ const inputId = uuid();
   }
 
   input:checked:disabled + .indicator::after {
-    border-color: var(--Input__color--disabled);
+    border-color: var(--stsv-Common__color--disabled);
   }
 
   .label {

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,7 +31,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
+        default: {
             checked: boolean;
             disabled: boolean;
         };

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/Field.svelte

@@ -0,0 +1,257 @@
+<script>import { createKeyborg } from "keyborg";
+import { onMount } from "svelte";
+import Tooltip from "./Tooltip.svelte";
+export let forwardClick = false;
+let htmlFor = void 0;
+export { htmlFor as for };
+export let label = void 0;
+export let message = void 0;
+export let required = false;
+export let requiredTip = "This field is required";
+export let status = "none";
+let fieldRef;
+let targetDisabled = false;
+let targetRef = null;
+const findTarget = () => {
+  let candidate = null;
+  if (htmlFor) {
+    candidate = fieldRef?.querySelector(`[id="${htmlFor}"]`);
+  }
+  if (!candidate) {
+    candidate = fieldRef?.querySelector(
+      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
+    );
+  }
+  targetRef = candidate;
+};
+const isElementDisabled = (element) => {
+  if (element) {
+    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
+  }
+  return false;
+};
+$:
+  $$slots.default, fieldRef, htmlFor, findTarget();
+$: {
+  targetDisabled = isElementDisabled(targetRef);
+}
+const mutationCallback = (mutations) => {
+  let disabled = void 0;
+  for (let i = 0; i < mutations.length; i++) {
+    const mutation = mutations[i];
+    if (mutation.type === "attributes") {
+      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
+        if (isElementDisabled(targetRef)) {
+          disabled = true;
+          break;
+        }
+        disabled = false;
+      }
+    }
+  }
+  if (disabled !== void 0) {
+    targetDisabled = disabled;
+  }
+};
+let mutationObserver = new MutationObserver(mutationCallback);
+$: {
+  mutationObserver.disconnect();
+  if (targetRef) {
+    mutationObserver.observe(targetRef, {
+      attributes: true
+    });
+  }
+}
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+const onClick = () => {
+  if (forwardClick) {
+    targetRef?.click();
+  }
+};
+</script>
+
+<label
+  aria-disabled={targetDisabled}
+  bind:this={fieldRef}
+  class="sterling-field"
+  class:disabled={targetDisabled}
+  class:using-keyboard={usingKeyboard}
+  for={htmlFor}
+  on:blur
+  on:click
+  on:click={onClick}
+  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 name="label" disabled={targetDisabled} for={htmlFor} {label} {required}>
+    <div class="label-text">
+      {label}
+    </div>
+  </slot>
+  <slot />
+  {#if message}
+    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
+      <div
+        class="message"
+        class:info={status === 'info'}
+        class:success={status === 'success'}
+        class:warning={status === 'warning'}
+        class:error={status === 'error'}
+      >
+        {message}
+      </div>
+    </slot>
+  {/if}
+  {#if required}
+    <slot name="required" {requiredTip}>
+      <Tooltip autoShow="hover">
+        <span class="required-tip" slot="tip">{requiredTip}</span>
+        <div class="required">*</div>
+      </Tooltip>
+    </slot>
+  {/if}
+</label>
+
+<style>
+  .sterling-field {
+    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);
+    box-sizing: border-box;
+    color: var(--stsv-Input__color);
+    display: flex;
+    flex-direction: column;
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-field:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-field.using-keyboard:focus-within {
+    border-color: var(--stsv-Common__border-color--focus);
+    color: var(--stsv-Common__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-field.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .label-text {
+    color: var(--stsv-Display__color);
+    font-size: 0.8em;
+    margin: 0.5em 0.7em 0.2em 0.2em;
+  }
+
+  .label-text:empty {
+    margin: 0;
+  }
+
+  .sterling-field.disabled .label-text {
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .message {
+    font-size: 0.8em;
+    background-color: var(--stsv-Display__background-color);
+    color: var(--stsv-Display__color);
+    padding: 0.5em;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .message.info {
+    background-color: var(--stsv-Info__background-color);
+    border-color: var(--stsv-Info__border-color);
+    color: var(--stsv-Info__color);
+  }
+
+  .message.success {
+    background-color: var(--stsv-Success__background-color);
+    border-color: var(--stsv-Success__border-color);
+    color: var(--stsv-Success__color);
+  }
+
+  .message.warning {
+    background-color: var(--stsv-Warning__background-color);
+    border-color: var(--stsv-Warning__border-color);
+    color: var(--stsv-Warning__color);
+  }
+
+  .message.error {
+    background-color: var(--stsv-Error__background-color);
+    border-color: var(--stsv__Error-color);
+    color: var(--stsv-Error__color);
+  }
+
+  .sterling-field.disabled .message {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .required {
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .required-tip {
+    display: block;
+    padding: 4px;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-field,
+    .message {
+      transition: none;
+    }
+  }
+</style>

package/Field.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FieldStatus } from './Field.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        forwardClick?: boolean | undefined;
+        for?: string | undefined;
+        label?: string | undefined;
+        message?: string | undefined;
+        required?: boolean | undefined;
+        requiredTip?: string | undefined;
+        status?: FieldStatus | 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: {
+        label: {
+            disabled: boolean;
+            for: string | undefined;
+            label: string | undefined;
+            required: boolean;
+        };
+        default: {};
+        message: {
+            disabled: boolean;
+            message: string | undefined;
+            required: boolean;
+            status: FieldStatus;
+        };
+        required: {
+            requiredTip: string;
+        };
+    };
+};
+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> {
+}
+export {};

package/Field.types.d.ts

@@ -0,0 +1 @@
+export type FieldStatus = 'none' | 'info' | 'success' | 'warning' | 'error';