@geoffcox/sterling-svelte 0.0.27 → 0.0.28

package/Button.svelte

@@ -62,7 +62,7 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}
 >
-  <slot {shape} {variant} />
+  <slot {disabled} {colorful} {shape} {variant} />
 </button>
 
 <style>
@@ -217,11 +217,12 @@ export const focus = (options) => {
     top: 0;
     bottom: 0;
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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/Button.svelte.d.ts

@@ -48,6 +48,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            disabled: boolean;
+            colorful: boolean;
             shape: "circular" | "rounded" | "square";
             variant: "regular" | "outline" | "ghost";
         };

package/Checkbox.svelte

@@ -1,9 +1,8 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
 export let checked = false;
-export let colorful = false;
 export let disabled = false;
 export let id = void 0;
+export let colorful = false;
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
@@ -63,11 +62,9 @@ export const focus = (options) => {
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <Label for={id}>
-      <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
-        {$$restProps.value}
-      </slot>
-    </Label>
+    <label for={id}>
+      <slot {checked} {colorful} {disabled} inputId={id} value={$$restProps.value} />
+    </label>
   {/if}
 </div>
 
@@ -199,11 +196,12 @@ export const focus = (options) => {
 
   .container::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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: '';
@@ -216,6 +214,12 @@ export const focus = (options) => {
     transition: opacity 250ms;
   }
 
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .sterling-checkbox.disabled .container::after {
     opacity: 1;
   }
@@ -223,7 +227,8 @@ export const focus = (options) => {
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after,
-    .container::after {
+    .container::after,
+    label {
       transition: none;
     }
   }

package/Checkbox.svelte.d.ts

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
-        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
+        colorful?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -42,6 +42,7 @@ declare const __propDef: {
     slots: {
         default: {
             checked: boolean;
+            colorful: boolean;
             disabled: boolean;
             inputId: string | undefined;
             value: any;

package/ColorPicker.svelte

@@ -16,7 +16,6 @@ export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let open = false;
-export let stayOpenOnClickAway = false;
 let hue = 0;
 let saturation = 0;
 let lightness = 0;
@@ -165,7 +164,39 @@ const onInputKeydown = (event) => {
 updateColorsFromText();
 </script>
 
-<Dropdown bind:open {colorful} {composed} {disabled} {stayOpenOnClickAway}>
+<Dropdown
+  bind:open
+  {colorful}
+  {composed}
+  {disabled}
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  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:wheel
+  on:paste
+  {...$$restProps}
+>
   <div class="value" slot="value">
     <div class="color-box" style="background-color: {colorText}" />
     <Input

package/ColorPicker.svelte.d.ts

@@ -1,15 +1,42 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         colorText?: string | undefined;
         colorFormat?: "hex" | "rgb" | "hsl" | undefined;
         colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
-        stayOpenOnClickAway?: boolean | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        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;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/Dropdown.svelte

@@ -106,7 +106,9 @@ $:
   on:click_outside={onClickOutside}
   {...$$restProps}
 >
-  <slot name="value" {colorful} {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" />
@@ -136,9 +138,10 @@ $:
     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;
@@ -189,11 +192,12 @@ $:
 
   .sterling-dropdown::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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: '';
@@ -222,9 +226,12 @@ $:
     opacity: 0;
   }
 
+  .value {
+    overflow: hidden;
+  }
+
   .button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+    align-self: center;
     cursor: pointer;
   }
 

package/HexColorSliders.svelte

@@ -126,16 +126,37 @@ const onAlphaInputchange = (event) => {
     background-color: #eee;
     opacity: 0.1;
     background-image: repeating-linear-gradient(
-        45deg,
+        var(--stsv-common--disabled__stripe-angle),
         #444 25%,
         transparent 25%,
         transparent 75%,
         #444 75%,
         #444
       ),
-      repeating-linear-gradient(45deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
-      repeating-linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
-      repeating-linear-gradient(-45deg, #444 25%, #eee 25%, #eee 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;
   }

package/HexColorSliders.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         green?: number | undefined;
         blue?: number | undefined;
         alpha?: number | undefined;
-        colorful?: boolean | undefined;
+        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/HslColorSliders.svelte

@@ -163,16 +163,37 @@ const onAlphaInputchange = (event) => {
     background-color: #eee;
     opacity: 0.1;
     background-image: repeating-linear-gradient(
-        45deg,
+        var(--stsv-common--disabled__stripe-angle),
         #444 25%,
         transparent 25%,
         transparent 75%,
         #444 75%,
         #444
       ),
-      repeating-linear-gradient(45deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
-      repeating-linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
-      repeating-linear-gradient(-45deg, #444 25%, #eee 25%, #eee 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;
   }

package/HslColorSliders.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         saturation?: number | undefined;
         lightness?: number | undefined;
         alpha?: number | undefined;
-        colorful?: boolean | undefined;
+        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/Input.svelte

@@ -1,10 +1,9 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
-export let colorful = false;
-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) {
@@ -36,9 +35,9 @@ 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:colorful class:composed class:disabled>
   <input
@@ -162,11 +161,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 
   .sterling-input::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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: '';
@@ -179,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,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
-        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;

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