@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/HslColorSliders.svelte

@@ -0,0 +1,208 @@
+<script>import { createEventDispatcher } from "svelte";
+import Input from "./Input.svelte";
+import Slider from "./Slider.svelte";
+import { round } from "lodash-es";
+export let hue = 180;
+export let saturation = 100;
+export let lightness = 50;
+export let alpha = 1;
+export let colorful = false;
+let hueText = hue.toString();
+let saturationText = saturation.toString();
+let lightnessText = lightness.toString();
+let alphaText = alpha.toString();
+$: {
+  hueText = hue.toString();
+}
+$: {
+  saturationText = saturation.toString();
+}
+$: {
+  lightnessText = lightness.toString();
+}
+$: {
+  alphaText = alpha.toString();
+}
+const dispatcher = createEventDispatcher();
+const raiseChange = (hue2, saturation2, lightness2) => {
+  dispatcher("change", { hue: hue2, saturation: saturation2, lightness: lightness2 });
+};
+$:
+  raiseChange(hue, saturation, lightness);
+const onHueInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  const newValue = text ? Number.parseFloat(text) : hue;
+  if (newValue && newValue !== Number.NaN) {
+    hue = Math.round(Math.max(0, Math.min(360, newValue)));
+    hueText = hue.toString();
+  }
+};
+const onSaturationInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
+  const newValue = text ? Number.parseFloat(text) : saturation;
+  if (newValue && newValue !== Number.NaN) {
+    saturation = Math.round(Math.max(0, Math.min(100, newValue)));
+    saturationText = saturation.toString();
+  }
+};
+const onLightnessInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
+  const newValue = text ? Number.parseFloat(text) : lightness;
+  if (newValue && newValue !== Number.NaN) {
+    lightness = Math.round(Math.max(0, Math.min(100, newValue)));
+    lightnessText = lightness.toString();
+  }
+};
+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);
+    alphaText = alpha.toString();
+  }
+};
+</script>
+
+<div class="sterling-hsl-color-sliders">
+  <div class="slider hue">
+    <Slider min={0} max={360} precision={0} bind:value={hue} {colorful} />
+  </div>
+  <Input bind:value={hueText} {colorful} on:change={(e) => onHueInputChange(e)} />
+  <div class="slider saturation" style={`--hue:${hue};`}>
+    <Slider min={0} max={100} precision={0} bind:value={saturation} {colorful} />
+  </div>
+  <Input bind:value={saturationText} {colorful} on:change={(e) => onSaturationInputChange(e)} />
+  <div class="slider lightness" style={`--hue:${hue};--saturation:${saturation}%;`}>
+    <Slider min={0} max={100} precision={0} bind:value={lightness} {colorful} />
+  </div>
+  <Input bind:value={lightnessText} {colorful} on:change={(e) => onLightnessInputChange(e)} />
+  <div
+    class="slider alpha"
+    style={`--hue:${hue};--saturation:${saturation}%;--lightness:${lightness}%`}
+  >
+    <div class="alpha-hatch" />
+    <div class="alpha-gradient" />
+    <div class="alpha-slider">
+      <Slider min={0} max={1} precision={2} step={0.01} bind:value={alpha} {colorful} />
+    </div>
+  </div>
+  <Input bind:value={alphaText} {colorful} on:change={(e) => onAlphaInputchange(e)} />
+</div>
+
+<style>
+  .sterling-hsl-color-sliders {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 5em;
+    column-gap: 0.5em;
+    row-gap: 0.25em;
+  }
+
+  .hue {
+    background: linear-gradient(
+      to right,
+      hsl(0, 100%, 50%) 0%,
+      hsl(60, 100%, 50%) 17%,
+      hsl(120, 100%, 50%) 33%,
+      hsl(180, 100%, 50%) 50%,
+      hsl(240, 100%, 50%) 67%,
+      hsl(300, 100%, 50%) 83%,
+      hsl(0, 100%, 50%) 100%
+    );
+  }
+
+  .slider :global(.fill),
+  .slider :global(.sterling-slider.colorful .fill) {
+    background-color: transparent;
+  }
+  .slider :global(.track),
+  .slider :global(.sterling-slider.colorful .track) {
+    background-color: transparent;
+    opacity: 0.1;
+    background-image: linear-gradient(to right, #7f3a3a, #ffffff 1px, #000000 1px, #000000);
+    background-size: 2px 100%;
+  }
+
+  .saturation {
+    background: linear-gradient(
+      to right,
+      hsl(var(--hue), 0%, 50%) 0%,
+      hsl(var(--hue), 100%, 50%) 100%
+    );
+  }
+
+  .lightness {
+    background: linear-gradient(
+      to right,
+      hsl(var(--hue), var(--saturation), 0%) 0%,
+      hsl(var(--hue), var(--saturation), 50%) 50%,
+      hsl(var(--hue), var(--saturation), 100%) 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,
+      hsla(var(--hue), var(--saturation), var(--lightness), 0) 0%,
+      hsla(var(--hue), var(--saturation), var(--lightness), 1) 100%
+    );
+  }
+</style>

package/HslColorSliders.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hue?: number | undefined;
+        saturation?: number | undefined;
+        lightness?: 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 HslColorSlidersProps = typeof __propDef.props;
+export type HslColorSlidersEvents = typeof __propDef.events;
+export type HslColorSlidersSlots = typeof __propDef.slots;
+export default class HslColorSliders extends SvelteComponentTyped<HslColorSlidersProps, HslColorSlidersEvents, HslColorSlidersSlots> {
+}
+export {};

package/Input.svelte

@@ -1,9 +1,9 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
-export let composed = false;
 export let disabled = false;
 export let id = void 0;
 export let value = "";
+export let colorful = false;
+export let composed = false;
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
@@ -35,11 +35,11 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 </script>
 
 {#if $$slots.default}
-  <Label {disabled} for={id}>
+  <label for={id}>
     <slot {composed} {disabled} {value} />
-  </Label>
+  </label>
 {/if}
-<div class="sterling-input" class:composed class:disabled>
+<div class="sterling-input" class:colorful class:composed class:disabled>
   <input
     bind:this={inputRef}
     {disabled}
@@ -77,7 +77,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     on:select
     on:submit
     on:reset
-    on:wheel
+    on:wheel|passive
     {...$$restProps}
   />
 </div>
@@ -92,33 +92,54 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   input {
-    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-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: block;
     font: inherit;
     margin: 0;
     outline: none;
     padding: 0.5em;
     transition: background-color 250ms, color 250ms, border-color 250ms;
+    width: 100%;
   }
 
-  .sterling-input:hover input {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+  .sterling-input:hover input:not(:disabled) {
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   input: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-input.colorful input {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-input.colorful:hover input:not(:disabled) {
+    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-input.colorful input: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-input.composed input,
@@ -130,7 +151,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   input::placeholder {
-    color: var(--stsv-Display__color--faint);
+    color: var(--stsv-common__color--subtle);
   }
 
   .sterling-input.disabled * {
@@ -139,7 +160,14 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-input::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;
@@ -151,6 +179,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     transition: opacity 250ms;
   }
 
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .sterling-input.disabled::after {
     opacity: 1;
   }

package/Input.svelte.d.ts

@@ -2,10 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
         value?: string | undefined;
+        colorful?: boolean | undefined;
+        composed?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -66,7 +67,7 @@ export default class Input extends SvelteComponentTyped<InputProps, InputEvents,
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
     get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Label.constants.d.ts

@@ -0,0 +1 @@
+export declare const LABEL_STATUSES: string[];

package/Label.constants.js

@@ -0,0 +1 @@
+export const LABEL_STATUSES = ['none', 'info', 'success', 'warning', 'danger'];

package/Label.svelte

@@ -1,23 +1,92 @@
-<script>export let disabled = false;
+<script>import Tooltip from "./Tooltip.svelte";
+import { usingKeyboard } from "./stores/usingKeyboard";
+let htmlFor = void 0;
+export { htmlFor as for };
+export let forwardClick = false;
+export let text = void 0;
+export let message = void 0;
+export let required = false;
+export let requiredReason = "required";
+export let status = "none";
 let labelRef;
-export const blur = () => {
-  labelRef?.blur();
+let targetDisabled = false;
+let targetRef = null;
+const findTarget = () => {
+  let candidate = null;
+  if (htmlFor) {
+    candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
+  }
+  if (!candidate) {
+    candidate = labelRef?.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, labelRef, 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
+    });
+  }
+}
 export const click = () => {
   labelRef?.click();
 };
+export const blur = () => {
+  labelRef?.blur();
+};
 export const focus = (options) => {
-  labelRef?.focus();
+  labelRef?.focus(options);
+};
+const onClick = () => {
+  if (forwardClick) {
+    targetRef?.click();
+  }
 };
 </script>
 
 <label
   bind:this={labelRef}
-  aria-disabled={disabled}
+  aria-disabled={targetDisabled}
   class="sterling-label"
-  class:disabled
+  class:disabled={targetDisabled}
+  class:using-keyboard={$usingKeyboard}
+  for={htmlFor}
   on:blur
   on:click
+  on:click={onClick}
   on:copy
   on:cut
   on:dblclick
@@ -41,26 +110,155 @@ export const focus = (options) => {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
-  <slot {disabled} />
+  {#if text || $$slots.text}
+    <slot name="text" disabled={targetDisabled} for={htmlFor} {forwardClick} {text} {required}>
+      <div class="text">
+        {text}
+      </div>
+    </slot>
+  {/if}
+  {#if $$slots.default}
+    <div class="content">
+      <slot />
+    </div>
+  {/if}
+  {#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 === 'danger'}
+      >
+        {message}
+      </div>
+    </slot>
+  {/if}
+  {#if required}
+    <slot name="required" {requiredReason}>
+      <Tooltip showOn="hover">
+        <span class="required-reason" slot="tip">{requiredReason}</span>
+        <div class="required">*</div>
+      </Tooltip>
+    </slot>
+  {/if}
 </label>
 
 <style>
-  label {
-    color: var(--stsv-Display__color);
-    transition: color 250ms;
+  .sterling-label {
+    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-label:not(.disabled):hover {
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
+  }
+
+  .sterling-label.using-keyboard:focus-within {
+    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-label.disabled {
+    cursor: not-allowed;
+  }
+
+  .sterling-label.disabled * {
+    cursor: not-allowed;
+  }
+
+  .text {
+    color: var(--stsv-common__color--secondary);
+    font-size: 0.8em;
+    margin: 0.5em 0.7em 0.2em 0.2em;
+  }
+
+  .text:empty {
+    margin: 0;
+  }
+
+  .content {
+    display: grid;
+  }
+
+  .message {
+    box-sizing: border-box;
+    font-size: 0.8em;
+    background-color: var(--stsv-common__background-color--secondary);
+    color: var(--stsv-common__color--secondary);
+    padding: 0.5em;
+    width: 100%;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .message.info {
+    background-color: var(--stsv-status--info__background-color);
+    border-color: var(--stsv-status--info__border-color);
+    color: var(--stsv-status--info__color);
+  }
+
+  .message.success {
+    background-color: var(--stsv-status--success__background-color);
+    border-color: var(--stsv-status--success__border-color);
+    color: var(--stsv-status--success__color);
+  }
+
+  .message.warning {
+    background-color: var(--stsv-status--warning__background-color);
+    border-color: var(--stsv-status--warning__border-color);
+    color: var(--stsv-status--warning__color);
+  }
+
+  .message.error {
+    background-color: var(--stsv-status--danger__background-color);
+    border-color: var(--stsv_--danger-color);
+    color: var(--stsv-status--danger__color);
+  }
+
+  .required {
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
-  label.disabled {
-    color: var(--stsv-Common__color--disabled);
+  .required-reason {
+    display: block;
+    padding: 4px;
   }
 
   @media (prefers-reduced-motion) {
-    label {
+    .sterling-label,
+    .sterling-label::after,
+    .message {
       transition: none;
     }
   }