@geoffcox/sterling-svelte 0.0.23 → 0.0.25

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,6 +24,7 @@ export const focus = (options) => {
   class:circular={shape === 'circular'}
   class:outline={variant === 'outline'}
   class:ghost={variant === 'ghost'}
+  {disabled}
   type="button"
   on:blur
   on:click
@@ -122,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;
   }
@@ -141,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;
@@ -168,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;

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"
@@ -56,13 +57,12 @@ export const focus = (options) => {
       on:mouseout
       on:mouseup
       on:wheel
-      bind:checked
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <Label {disabled} for={id}>
+    <Label for={id}>
       <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
         {$$restProps.value}
       </slot>
@@ -133,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);
@@ -140,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;
@@ -160,18 +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);
+  }
+
+  .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;
   }
 
-  input:checked:disabled + .indicator::after {
-    border-color: var(--stsv-Common__color--disabled);
+  .sterling-checkbox.disabled .container::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
     .indicator,
-    input:checked + .indicator::after {
+    .indicator::after,
+    .container::after {
       transition: none;
     }
   }

package/Dropdown.svelte

@@ -1,5 +1,5 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher } from "svelte";
+import Popup from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 const popupId = idGenerator.nextId("Dropdown-popup");
@@ -8,11 +8,7 @@ export let disabled = false;
 export let open = false;
 export let stayOpenOnClickAway = false;
 let dropdownRef;
-let popupRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
+let popupContentRef;
 const dispatch = createEventDispatcher();
 const raiseOpen = (open2) => {
   dispatch("open", { open: open2 });
@@ -29,29 +25,11 @@ export const blur = () => {
 export const focus = (options) => {
   dropdownRef?.focus(options);
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(dropdownRef, popupRef, async () => {
-    const { x, y } = await computePosition(dropdownRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onClick = (event) => {
-  if (!disabled && mounted) {
-    const targetNode = event.target;
-    const withinPopup = popupRef?.contains(targetNode);
-    if (!withinPopup) {
-      open = !open;
-      event.preventDefault();
-      event.stopPropagation();
-    }
+  if (!disabled) {
+    open = !open;
+    event.preventDefault();
+    event.stopPropagation();
   }
 };
 const onKeydown = (event) => {
@@ -81,7 +59,7 @@ const onClickOutside = (event) => {
   class:disabled
   role="combobox"
   tabindex="0"
-  use:clickOutside
+  use:clickOutside={{ ignoreOthers: [popupContentRef] }}
   on:blur
   on:click
   on:click={onClick}
@@ -120,15 +98,11 @@ const onClickOutside = (event) => {
     </div>
   </slot>
 
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <slot {composed} {disabled} {open} />
-  </div>
+  <Popup reference={dropdownRef} open={!disabled && open}>
+    <div class="popup-content" bind:this={popupContentRef}>
+      <slot {composed} {disabled} {open} />
+    </div>
+  </Popup>
 </div>
 
 <style>
@@ -146,6 +120,7 @@ const onClickOutside = (event) => {
     grid-template-rows: auto;
     outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -166,22 +141,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;
@@ -248,8 +240,13 @@ const onClickOutside = (event) => {
     grid-template-rows: 1fr;
   }
 
+  .popup-content {
+    padding: 0.25em;
+  }
+
   @media (prefers-reduced-motion) {
-    .sterling-dropdown {
+    .sterling-dropdown,
+    .sterling-dropdown::after {
       transition: none;
     }
   }

package/Field.svelte

@@ -180,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);
@@ -196,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 {
@@ -211,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;
   }
 
@@ -247,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;
@@ -271,6 +269,7 @@ const onClick = () => {
 
   @media (prefers-reduced-motion) {
     .sterling-field,
+    .sterling-field::after,
     .message {
       transition: none;
     }

package/Input.svelte

@@ -39,51 +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: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 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);
@@ -97,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);
@@ -113,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/List.svelte

@@ -231,7 +231,9 @@ A list of items where a single item can be selected.
   on:paste
   {...$$restProps}
 >
-  <slot {composed} {disabled} {horizontal} {selectedValue} />
+  <div class="container">
+    <slot {composed} {disabled} {horizontal} {selectedValue} />
+  </div>
 </div>
 
 <style>
@@ -243,13 +245,10 @@ A list of items where a single item can be selected.
     border-width: var(--stsv-Common__border-width);
     box-sizing: border-box;
     color: var(--stsv-Common__color);
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
     height: 100%;
-    margin: 0;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
+    margin: 0;
     outline: none;
     padding: 0;
     position: relative;
@@ -257,9 +256,8 @@ A list of items where a single item can be selected.
   }
 
   .sterling-list.horizontal {
-    flex-direction: row;
     height: unset;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
     width: 100%;
   }
@@ -278,13 +276,6 @@ A list of items where a single item can be selected.
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-list.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-list.composed,
   .sterling-list.composed:hover,
   .sterling-list.composed.using-keyboard:focus-within,
@@ -294,8 +285,46 @@ A list of items where a single item can be selected.
     outline: none;
   }
 
+  .sterling-list.disabled * {
+    cursor: not-allowed;
+  }
+
+  /* ----- container - a layout panel that grows with the items ----- */
+
+  .container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  .sterling-list.horizontal .container {
+    flex-direction: row;
+  }
+
+  .container::after {
+    background: var(--stsv-Disabled__background);
+    content: '';
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-list.disabled .container::after {
+    opacity: 1;
+  }
+
+  /* ----- media queries ----- */
+
   @media (prefers-reduced-motion) {
-    .sterling-list {
+    .sterling-list,
+    .container::after {
       transition: none;
     }
   }