@geoffcox/sterling-svelte 0.0.22 → 0.0.24

package/Button.svelte

@@ -1,4 +1,5 @@
-<script>export let variant = "regular";
+<script>export let disabled = false;
+export let variant = "regular";
 export let shape = "rounded";
 let buttonRef;
 export const click = () => {
@@ -23,9 +24,17 @@ export const focus = (options) => {
   class:circular={shape === 'circular'}
   class:outline={variant === 'outline'}
   class:ghost={variant === 'ghost'}
+  {disabled}
   type="button"
   on:blur
   on:click
+  on:drag
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:dblclick
   on:focus
   on:focusin
@@ -115,13 +124,6 @@ export const focus = (options) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  button: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;
-  }
-
   button.outline {
     background-color: transparent;
   }
@@ -134,14 +136,6 @@ export const focus = (options) => {
     background-color: var(--stsv-Button__background-color--active);
   }
 
-  button.outline:disabled {
-    background-color: transparent;
-  }
-
-  button.outline:disabled:hover {
-    border-color: var(--stsv-Common__border-color--disabled);
-  }
-
   button.ghost {
     background-color: transparent;
     border-color: transparent;
@@ -161,12 +155,20 @@ export const focus = (options) => {
     border-color: var(--stsv-Button__border-color--focus);
   }
 
-  button.ghost:disabled {
-    border-color: transparent;
-  }
-
-  button.ghost:disabled:hover {
-    background-color: var(--stsv-Common__background-color--disabled);
+  button:disabled {
+    cursor: not-allowed;
+    position: relative;
+  }
+
+  button:disabled::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: var(--stsv-Disabled__background);
+    pointer-events: none;
   }
 
   @media (prefers-reduced-motion) {

package/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        disabled?: boolean | undefined;
         variant?: "regular" | "outline" | "ghost" | undefined;
         shape?: "circular" | "rounded" | "square" | undefined;
         click?: (() => void) | undefined;
@@ -11,6 +12,13 @@ declare const __propDef: {
     events: {
         blur: FocusEvent;
         click: MouseEvent;
+        drag: DragEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         dblclick: MouseEvent;
         focus: FocusEvent;
         focusin: FocusEvent;

package/Checkbox.svelte

@@ -24,10 +24,11 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class="sterling-checkbox">
+<div class="sterling-checkbox" class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}
+      bind:checked
       {disabled}
       {id}
       type="checkbox"
@@ -35,6 +36,12 @@ export const focus = (options) => {
       on:click
       on:change
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -49,35 +56,30 @@ export const focus = (options) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:toggle
       on:wheel
-      bind:checked
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <div class="label">
-      <Label {disabled} for={id}>
-        <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
-          {$$restProps.value}
-        </slot>
-      </Label>
-    </div>
+    <Label for={id}>
+      <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
+        {$$restProps.value}
+      </slot>
+    </Label>
   {/if}
 </div>
 
 <style>
   .sterling-checkbox {
-    display: inline-flex;
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
     box-sizing: border-box;
+    display: inline-flex;
     font: inherit;
-    gap: 0.4em;
+    margin: 0;
     outline: none;
     padding: 0;
-    margin: 0;
   }
 
   /* 
@@ -91,6 +93,7 @@ export const focus = (options) => {
     position: relative;
     display: grid;
     align-items: center;
+    margin-right: 0.25em;
   }
 
   /*
@@ -130,6 +133,11 @@ export const focus = (options) => {
     border-color: var(--stsv-Input__border-color);
   }
 
+  .sterling-checkbox:hover .indicator {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+  }
+
   input:focus-visible + .indicator {
     outline-color: var(--stsv-Common__outline-color);
     outline-offset: var(--stsv-Common__outline-offset);
@@ -137,15 +145,10 @@ export const focus = (options) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  input:disabled + .indicator {
-    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 {
+  .indicator::after {
     border-color: var(--stsv-Input__color);
     border-style: solid;
     border-width: 0 3px 3px 0;
@@ -157,23 +160,45 @@ export const focus = (options) => {
     top: 45%;
     transform: translate(-50%, -50%) rotate(45deg);
     transform-origin: center;
-    transition: border-color 250ms;
+    transition: border-color 250ms, opacity 150ms;
     width: 7px;
-    visibility: visible;
+    opacity: 0;
+  }
+
+  input:checked + .indicator::after {
+    opacity: 1;
+  }
+
+  .sterling-checkbox:hover input:checked + .indicator::after {
+    border-color: var(--stsv-Input__color--hover);
   }
 
-  input:checked:disabled + .indicator::after {
-    border-color: var(--stsv-Common__color--disabled);
+  .sterling-checkbox.disabled,
+  .sterling-checkbox.disabled input {
+    cursor: not-allowed;
+  }
+
+  .container::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
   }
 
-  .label {
-    user-select: none;
-    margin-top: 0.25em;
+  .sterling-checkbox.disabled .container::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
     .indicator,
-    input:checked + .indicator::after {
+    .indicator::after,
+    .container::after {
       transition: none;
     }
   }

package/Checkbox.svelte.d.ts

@@ -14,6 +14,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -28,7 +34,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Dropdown.svelte

@@ -88,6 +88,12 @@ const onClickOutside = (event) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -117,7 +123,7 @@ const onClickOutside = (event) => {
   <div
     bind:this={popupRef}
     class="popup"
-    class:open
+    class:open={open && !disabled}
     id={popupId}
     style="left:{popupPosition.x}px; top:{popupPosition.y}px"
   >
@@ -140,6 +146,7 @@ const onClickOutside = (event) => {
     grid-template-rows: auto;
     outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -160,22 +167,39 @@ const onClickOutside = (event) => {
   }
 
   .sterling-dropdown.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;
     outline: none;
   }
 
+  .sterling-dropdown::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-dropdown.disabled::after {
+    opacity: 1;
+  }
+
   .sterling-dropdown.composed,
   .sterling-dropdown.composed:hover,
-  .sterling-dropdown.composed.focus,
-  .sterling-dropdown.composed.disabled {
+  .sterling-dropdown.composed.focus {
     background: none;
     border: none;
     outline: none;
   }
 
+  .sterling-dropdown.composed.disabled::after {
+    opacity: 0;
+  }
+
   .button {
     grid-column-start: 2;
     grid-row-start: 1;
@@ -243,7 +267,8 @@ const onClickOutside = (event) => {
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-dropdown {
+    .sterling-dropdown,
+    .sterling-dropdown::after {
       transition: none;
     }
   }

package/Dropdown.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Field.svelte

@@ -102,6 +102,12 @@ const onClick = () => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -174,7 +180,7 @@ const onClick = () => {
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  .sterling-field:hover {
+  .sterling-field: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);
@@ -190,9 +196,11 @@ const onClick = () => {
   }
 
   .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);
+    cursor: not-allowed;
+  }
+
+  .sterling-field.disabled * {
+    cursor: not-allowed;
   }
 
   .label-text {
@@ -205,15 +213,17 @@ const onClick = () => {
     margin: 0;
   }
 
-  .sterling-field.disabled .label-text {
-    color: var(--stsv-Common__color--disabled);
+  .content {
+    display: grid;
   }
 
   .message {
+    box-sizing: border-box;
     font-size: 0.8em;
     background-color: var(--stsv-Display__background-color);
     color: var(--stsv-Display__color);
     padding: 0.5em;
+    width: 100%;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -241,12 +251,6 @@ const onClick = () => {
     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;
@@ -265,6 +269,7 @@ const onClick = () => {
 
   @media (prefers-reduced-motion) {
     .sterling-field,
+    .sterling-field::after,
     .message {
       transition: none;
     }

package/Field.svelte.d.ts

@@ -19,6 +19,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Input.svelte

@@ -39,44 +39,59 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     <slot {composed} {disabled} {value} />
   </Label>
 {/if}
-<input
-  bind:this={inputRef}
-  class="sterling-input"
-  class:composed
-  {disabled}
-  {id}
-  bind:value
-  on:blur
-  on:click
-  on:change
-  on:copy
-  on:cut
-  on:paste
-  on:dblclick
-  on:focus
-  on:focusin
-  on:focusout
-  on:input
-  on:invalid
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:select
-  on:submit
-  on:reset
-  on:wheel
-  {...$$restProps}
-/>
+<div class="sterling-input" class:composed class:disabled>
+  <input
+    bind:this={inputRef}
+    {disabled}
+    {id}
+    bind:value
+    on:beforeinput
+    on:blur
+    on:click
+    on:change
+    on:copy
+    on:cut
+    on:paste
+    on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
+    on:focus
+    on:focusin
+    on:focusout
+    on:input
+    on:invalid
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mousedown
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+    on:mouseover
+    on:mouseout
+    on:mouseup
+    on:select
+    on:submit
+    on:reset
+    on:wheel
+    {...$$restProps}
+  />
+</div>
 
 <style>
   .sterling-input {
+    box-sizing: border-box;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  input {
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -90,13 +105,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  .sterling-input:hover {
+  .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:focus {
+  input:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -106,33 +121,43 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-input: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;
-  }
-
-  .sterling-input.composed,
-  .sterling-input.composed:hover,
-  .sterling-input.composed:focus,
-  .sterling-input.composed.disabled {
+  .sterling-input.composed input,
+  .sterling-input.composed:hover input,
+  .sterling-input.composed:focus input {
     background: transparent;
     border: none;
     outline: none;
   }
 
-  .sterling-input::placeholder {
+  input::placeholder {
     color: var(--stsv-Display__color--faint);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  .sterling-input:disabled::placeholder {
-    color: var(--stsv-Display__color--disabled);
+  .sterling-input.disabled * {
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-input::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-input.disabled::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-input {
+    .sterling-input::after,
+    input {
       transition: none;
     }
   }

package/Input.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
+        beforeinput: InputEvent;
         blur: FocusEvent;
         click: MouseEvent;
         change: Event;
@@ -21,6 +22,12 @@ declare const __propDef: {
         cut: ClipboardEvent;
         paste: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Label.svelte

@@ -21,6 +21,12 @@ export const focus = (options) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Label.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;