@geoffcox/sterling-svelte 0.0.23 → 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,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

@@ -123,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"
   >
@@ -146,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;
   }
 
@@ -166,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;
@@ -249,7 +267,8 @@ const onClickOutside = (event) => {
   }
 
   @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,47 @@ 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;
+    width: fit-content;
+  }
+
+  .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;
     }
   }

package/ListItem.svelte

@@ -1,15 +1,18 @@
 <script>import { getContext } from "svelte";
 import { LIST_CONTEXT_KEY } from "./List.constants";
+import { readable } from "svelte/store";
 export let disabled = false;
 export let value;
 const {
   disabled: listDisabled,
   selectedValue,
   horizontal
-} = getContext(LIST_CONTEXT_KEY);
+} = getContext(LIST_CONTEXT_KEY) || {
+  disabled: readable(false),
+  selectedValue: void 0,
+  horizontal: false
+};
 let itemRef;
-$:
-  _disabled = disabled || $listDisabled;
 $:
   selected = $selectedValue === value;
 export const click = () => {
@@ -27,7 +30,8 @@ export const focus = (options) => {
   aria-selected={selected}
   bind:this={itemRef}
   class="sterling-list-item"
-  class:disabled={_disabled}
+  class:disabled={disabled || $listDisabled}
+  class:item-disabled={disabled && !$listDisabled}
   class:selected
   data-value={value}
   role="listitem"
@@ -75,13 +79,14 @@ export const focus = (options) => {
     cursor: pointer;
     margin: 0;
     padding: 0.5em;
+    position: relative;
     outline: none;
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
   }
 
-  .sterling-list-item:not(.disabled):hover {
+  .sterling-list-item:not(.disabled):not(.selected):hover {
     background-color: var(--stsv-Button__background-color--hover);
     color: var(--stsv-Button__color--hover);
   }
@@ -92,12 +97,30 @@ export const focus = (options) => {
   }
 
   .sterling-list-item.disabled {
-    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-list-item::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-list-item.item-disabled::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-list-item {
+    .sterling-list-item,
+    .sterling-list-item::after {
       transition: none;
     }
   }