@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/Dialog.svelte

@@ -10,7 +10,7 @@ let formRef;
 let closing = false;
 const onDocumentClick = (event) => {
   const targetNode = event?.target;
-  if (targetNode && !contentRef.contains(targetNode) && backdropCloses) {
+  if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
     open = false;
   }
 };
@@ -146,17 +146,17 @@ A styled <dialog> element
   }
 
   .header {
-    background-color: var(--stsv-Display__background-color);
+    background-color: var(--stsv-common__background-color--secondary);
   }
 
   .content {
-    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);
+    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(--stsv-Common__color);
+    color: var(--stsv-common__color);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto auto;
@@ -229,8 +229,8 @@ A styled <dialog> element
   }
 
   .separator {
-    background-color: var(--stsv-Display__background-color);
-    height: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color--secondary);
+    height: var(--stsv-common__border-width);
     margin: 0 0.25em;
   }
 

package/Dropdown.svelte

@@ -1,8 +1,11 @@
 <script>import { createEventDispatcher } from "svelte";
-import Popup from "./Popover.svelte";
+import Popover from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
+import { prefersReducedMotion } from "./stores/prefersReducedMotion";
+import { slide } from "svelte/transition";
 const popupId = idGenerator.nextId("Dropdown-popup");
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let open = false;
@@ -35,9 +38,15 @@ const onClick = (event) => {
 const onKeydown = (event) => {
   if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
     switch (event.key) {
+      case " ":
+        open = !open;
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
       case "Escape":
         open = false;
         event.preventDefault();
+        event.stopPropagation();
         return false;
     }
   }
@@ -47,6 +56,11 @@ const onClickOutside = (event) => {
     open = false;
   }
 };
+const slideNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
 </script>
 
 <div
@@ -55,6 +69,7 @@ const onClickOutside = (event) => {
   aria-haspopup={true}
   aria-expanded={open}
   class="sterling-dropdown"
+  class:colorful
   class:composed
   class:disabled
   role="combobox"
@@ -86,58 +101,84 @@ const onClickOutside = (event) => {
   on:mouseover
   on:mouseout
   on:mouseup
-  on:wheel
+  on:wheel|passive
   on:paste
   on:click_outside={onClickOutside}
   {...$$restProps}
 >
-  <slot name="value" {composed} {disabled} {open} />
-  <slot name="button" {composed} {disabled} {open}>
+  <div class="value">
+    <slot name="value" {colorful} {composed} {disabled} {open} />
+  </div>
+  <slot name="button" {colorful} {composed} {disabled} {open}>
     <div class="button">
       <div class="chevron" />
     </div>
   </slot>
 
-  <Popup reference={dropdownRef} open={!disabled && open}>
-    <div class="popup-content" bind:this={popupContentRef}>
-      <slot {composed} {disabled} {open} />
+  <Popover reference={dropdownRef} open={!disabled && open}>
+    <div
+      class="popup-content"
+      transition:slideMotion={{ duration: 200 }}
+      class:colorful
+      bind:this={popupContentRef}
+    >
+      <slot {colorful} {composed} {disabled} {open} />
     </div>
-  </Popup>
+  </Popover>
 </div>
 
 <style>
   .sterling-dropdown {
     align-content: stretch;
     align-items: stretch;
-    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);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-button__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
+    color: var(--stsv-input__color);
     display: grid;
-    grid-template-columns: 1fr 2em;
+    grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: auto;
     outline: none;
+    overflow: hidden;
     padding: 0;
     position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .sterling-dropdown:hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-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-dropdown:focus {
-    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);
+    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-dropdown.colorful {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-dropdown.colorful:hover {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  .sterling-dropdown.colorful:focus {
+    background-color: var(--stsv-input--colorful__background-color--focus);
+    border-color: var(--stsv-input--colorful__border-color--focus);
+    color: var(--stsv-input--colorful__color--focus);
   }
 
   .sterling-dropdown.disabled {
@@ -145,8 +186,19 @@ const onClickOutside = (event) => {
     outline: none;
   }
 
+  .sterling-dropdown.disabled .button {
+    cursor: not-allowed;
+  }
+
   .sterling-dropdown::after {
-    background: var(--stsv-Disabled__background);
+    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;
@@ -174,9 +226,12 @@ const onClickOutside = (event) => {
     opacity: 0;
   }
 
+  .value {
+    overflow: hidden;
+  }
+
   .button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+    align-self: center;
     cursor: pointer;
   }
 
@@ -187,7 +242,8 @@ const onClickOutside = (event) => {
     background: none;
     margin: 0;
     height: 100%;
-    width: 32px;
+    min-width: 2em;
+    min-height: 2em;
   }
 
   .chevron::after {
@@ -216,36 +272,13 @@ const onClickOutside = (event) => {
     transform-origin: 50% 50%;
   }
 
-  .popup {
-    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(--stsv-Common__color);
-    display: none;
-    overflow: visible;
-    outline: none;
-    position: absolute;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    width: fit-content;
-    height: fit-content;
-    z-index: 1;
-  }
-
-  .popup.open {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
-
   .popup-content {
-    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);
+    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);
+    color: var(--stsv-common__color);
     padding: 0.25em;
     display: grid;
     grid-template-columns: 1fr;
@@ -253,6 +286,12 @@ const onClickOutside = (event) => {
     overflow: hidden;
   }
 
+  .popup-content.colorful {
+    background-color: var(--stsv-common--colorful__background-color);
+    border-color: var(--stsv-common--colorful__border-color);
+    color: var(--stsv-common--colorful__color);
+  }
+
   @media (prefers-reduced-motion) {
     .sterling-dropdown,
     .sterling-dropdown::after {

package/Dropdown.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
@@ -43,16 +44,19 @@ declare const __propDef: {
     };
     slots: {
         value: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
             open: boolean;
         };
         button: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
             open: boolean;
         };
         default: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
             open: boolean;

package/HexColorSliders.svelte

@@ -0,0 +1,171 @@
+<script>import { createEventDispatcher } from "svelte";
+import Input from "./Input.svelte";
+import Slider from "./Slider.svelte";
+export let red = 0;
+export let green = 0;
+export let blue = 0;
+export let alpha = 255;
+export let colorful = false;
+let redText = red.toString(16).padStart(2, "0");
+let greenText = green.toString(16).padStart(2, "0");
+let blueText = blue.toString(16).padStart(2, "0");
+let alphaText = alpha.toString(16).padStart(2, "0");
+$: {
+  redText = red.toString(16).padStart(2, "0");
+}
+$: {
+  greenText = green.toString(16).padStart(2, "0");
+}
+$: {
+  blueText = blue.toString(16).padStart(2, "0");
+}
+$: {
+  alphaText = alpha.toString(16).padStart(2, "0");
+}
+const dispatcher = createEventDispatcher();
+const raiseChange = () => {
+  dispatcher("change", { red, green, blue, alpha });
+};
+$:
+  red, green, blue, alpha, raiseChange();
+const onRedInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  red = text ? Number.parseInt(text, 16) : red;
+};
+const onGreenInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  green = text ? Number.parseInt(text, 16) : green;
+};
+const onBlueInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  blue = text ? Number.parseInt(text, 16) : blue;
+};
+const onAlphaInputchange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  alpha = text ? Number.parseInt(text, 16) : alpha;
+};
+</script>
+
+<div class="sterling-rgb-color-sliders">
+  <div class="slider red-slider">
+    <Slider {colorful} min={0} max={255} precision={0} bind:value={red} />
+  </div>
+  <Input {colorful} bind:value={redText} on:change={(e) => onRedInputChange(e)} />
+  <div class="slider green-slider">
+    <Slider {colorful} min={0} max={255} precision={0} bind:value={green} />
+  </div>
+  <Input {colorful} bind:value={greenText} on:change={(e) => onGreenInputChange(e)} />
+  <div class="slider blue-slider">
+    <Slider {colorful} min={0} max={255} precision={0} bind:value={blue} />
+  </div>
+  <Input {colorful} bind:value={blueText} 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 {colorful} min={0} max={255} precision={0} bind:value={alpha} />
+    </div>
+  </div>
+  <Input {colorful} bind:value={alphaText} on:change={(e) => onAlphaInputchange(e)} />
+</div>
+
+<style>
+  .sterling-rgb-color-sliders {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 4em;
+    column-gap: 0.5em;
+    row-gap: 0.25em;
+  }
+
+  .slider :global(.fill),
+  .slider :global(.sterling-slider.colorful .fill) {
+    background-color: transparent;
+  }
+
+  .slider :global(.track),
+  .slider :global(.sterling-slider.colorful .track) {
+    background-color: transparent;
+    background-image: linear-gradient(to right, #ffffff, #ffffff 1px, #000000 1px, #000000);
+    background-size: 2px 100%;
+    opacity: 0.1;
+  }
+
+  .red-slider {
+    background: linear-gradient(to right, black 0%, rgb(255, 0, 0) 100%);
+  }
+
+  .green-slider {
+    background: linear-gradient(to right, black 0%, rgb(0, 255, 0) 100%);
+  }
+
+  .blue-slider {
+    background: linear-gradient(to right, black 0%, rgb(0, 0, 255) 100%);
+  }
+
+  .alpha {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    place-content: stretch;
+    place-items: stretch;
+  }
+
+  .alpha-gradient,
+  .alpha-hatch,
+  .alpha-slider {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 1;
+  }
+
+  .alpha-hatch {
+    background-color: #eee;
+    opacity: 0.1;
+    background-image: repeating-linear-gradient(
+        var(--stsv-common--disabled__stripe-angle),
+        #444 25%,
+        transparent 25%,
+        transparent 75%,
+        #444 75%,
+        #444
+      ),
+      repeating-linear-gradient(
+        var(--stsv-common--disabled__stripe-angle),
+        #444 25%,
+        #eee 25%,
+        #eee 75%,
+        #444 75%,
+        #444
+      ),
+      repeating-linear-gradient(
+        -var(--stsv-common--disabled__stripe-angle),
+        #444 25%,
+        transparent 25%,
+        transparent 75%,
+        #444 75%,
+        #444
+      ),
+      repeating-linear-gradient(
+        -var(--stsv-common--disabled__stripe-angle),
+        #444 25%,
+        #eee 25%,
+        #eee 75%,
+        #444 75%,
+        #444
+      );
+    background-position: 0 0, 4px 4px;
+    background-size: 8px 8px;
+  }
+
+  .alpha-gradient {
+    background: linear-gradient(
+      to right,
+      rgba(var(--red), var(--green), var(--blue), 0) 0%,
+      rgba(var(--red), var(--green), var(--blue), 100) 100%
+    );
+  }
+</style>

package/HexColorSliders.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        red?: number | undefined;
+        green?: number | undefined;
+        blue?: number | undefined;
+        alpha?: number | undefined;
+        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HexColorSlidersProps = typeof __propDef.props;
+export type HexColorSlidersEvents = typeof __propDef.events;
+export type HexColorSlidersSlots = typeof __propDef.slots;
+export default class HexColorSliders extends SvelteComponentTyped<HexColorSlidersProps, HexColorSlidersEvents, HexColorSlidersSlots> {
+}
+export {};