@geoffcox/sterling-svelte 0.0.23 → 0.0.24

package/MenuItem.svelte

@@ -110,7 +110,7 @@ afterUpdate(() => {
   prevOpen = open;
 });
 const onKeyDown = (event) => {
-  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+  if (!disabled && !event.altKey && !event.ctrlKey && !event.shiftKey) {
     switch (event.key) {
       case "ArrowDown":
         if (depth === 0 && hasChildren) {
@@ -277,8 +277,11 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
 >
   <div class="item" id={displayId}>
     <slot name="item" {checked} {depth} {disabled} {hasChildren} {open} {role} {text} {value}>
-      <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
-        >{text}</MenuItemDisplay
+      <MenuItemDisplay
+        {checked}
+        {disabled}
+        hasChildren={depth > 0 && hasChildren}
+        menuItemRole={role}>{text}</MenuItemDisplay
       >
     </slot>
   </div>
@@ -333,10 +336,6 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
     background-color: var(--stsv-Input__background-color--selected);
   }
 
-  .sterling-menu-item.disabled {
-    color: var(--stsv-Common__color--disabled);
-  }
-
   .sterling-menu-item.composed,
   .sterling-menu-item.composed:focus,
   .sterling-menu-item.composed:hover {

package/MenuItemDisplay.svelte

@@ -1,9 +1,10 @@
 <script>export let checked = false;
+export let disabled = false;
 export let hasChildren = false;
 export let menuItemRole = "menuitem";
 </script>
 
-<div class="menu-item-display">
+<div class="sterling-menu-item-display" class:disabled>
   <div
     class="check"
     class:checkmark={menuItemRole === 'menuitemcheckbox'}
@@ -23,7 +24,7 @@ export let menuItemRole = "menuitem";
 </div>
 
 <style>
-  .menu-item-display {
+  .sterling-menu-item-display {
     align-items: center;
     justify-items: flex-start;
     display: grid;
@@ -94,4 +95,34 @@ export let menuItemRole = "menuitem";
     border-top: 3px solid currentColor;
     transform: translate(-50%, -50%) rotate(45deg);
   }
+
+  .sterling-menu-item-display.disabled {
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-menu-item-display::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-menu-item-display.disabled::after {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-menu-item-display::after,
+    .check,
+    .check::after {
+      transition: none;
+    }
+  }
 </style>

package/MenuItemDisplay.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         checked?: boolean | undefined;
+        disabled?: boolean | undefined;
         hasChildren?: boolean | undefined;
         menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
     };

package/Progress.svelte

@@ -3,7 +3,6 @@ export let max = 100;
 export let percent = 0;
 export let vertical = false;
 export let colorful = "none";
-export let disabled = false;
 let clientHeight;
 let clientWidth;
 $:
@@ -34,7 +33,6 @@ $:
 
 <div
   class="sterling-progress"
-  class:disabled
   class:vertical
   role="progressbar"
   on:blur
@@ -157,17 +155,6 @@ $:
     background-color: var(--stsv-Error__border-color);
   }
 
-  /* ----- Disabled ----- */
-
-  .sterling-progress.disabled {
-    background: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-  }
-
-  .sterling-progress.disabled .indicator {
-    background-color: var(--stsv-Display__color--disabled);
-  }
-
   @media (prefers-reduced-motion) {
     .sterling-progress,
     .indicator {

package/Progress.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         percent?: number | undefined;
         vertical?: boolean | undefined;
         colorful?: string | undefined;
-        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/Radio.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class="sterling-radio">
+<div class="sterling-radio" class:disabled>
   <div class="container">
     <input
       bind:this={radioRef}
@@ -154,6 +154,11 @@ onMount(() => {
     border-color: var(--stsv-Input__border-color);
   }
 
+  .sterling-radio:not(.disabled):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);
@@ -161,11 +166,6 @@ onMount(() => {
     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);
-  }
-
   .indicator::after {
     background-color: transparent;
     border-radius: 10000px;
@@ -183,13 +183,32 @@ onMount(() => {
     background-color: var(--stsv-Input__color);
   }
 
-  input:checked:disabled + .indicator::after {
-    background-color: var(--stsv-Common__color--disabled);
+  .sterling-radio.disabled * {
+    cursor: not-allowed;
+  }
+
+  .container::after {
+    background: var(--stsv-Disabled__background);
+    border-radius: 10000px;
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-radio.disabled .container::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
     .indicator,
-    .indicator::after {
+    .indicator::after,
+    .container::after {
       transition: none;
     }
   }

package/Select.svelte

@@ -255,6 +255,7 @@ const onListSelect = (event) => {
     grid-template-rows: auto;
     outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -275,13 +276,27 @@ const onListSelect = (event) => {
   }
 
   .sterling-select.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-select::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-select.disabled::after {
+    opacity: 1;
+  }
+
   .sterling-select.composed,
   .sterling-select.composed:hover,
   .sterling-select.composed.focus,
@@ -291,6 +306,10 @@ const onListSelect = (event) => {
     outline: none;
   }
 
+  .sterling-select.composed.disabled::after {
+    opacity: 0;
+  }
+
   .value {
     padding: 0.5em;
   }
@@ -355,7 +374,8 @@ const onListSelect = (event) => {
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-select {
+    .sterling-select,
+    .sterling-select::after {
       transition: none;
     }
   }

package/Slider.svelte

@@ -236,6 +236,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     height: 1.5em;
     overflow: hidden;
     padding: 0;
+    position: relative;
     text-decoration: none;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
@@ -327,19 +328,26 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   /* ----- disabled ----- */
 
-  .sterling-slider.disabled .track {
-    background: var(--stsv-Common__background-color--disabled);
+  .sterling-slider.disabled .thumb {
+    cursor: not-allowed;
+    outline: none;
   }
 
-  .sterling-slider.disabled .fill {
-    background: var(--stsv-Common__color--disabled);
+  .sterling-slider .thumb::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-slider.disabled .thumb {
-    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-slider.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-slider.composed,
@@ -355,7 +363,8 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     .sterling-slider,
     .track,
     .fill,
-    .thumb {
+    .thumb,
+    .thumb::after {
       transition: none;
     }
   }

package/Switch.svelte

@@ -108,6 +108,14 @@ export const focus = (options) => {
     position: relative;
   }
 
+  .sterling-switch input {
+    cursor: pointer;
+  }
+
+  .sterling-switch.disabled input {
+    cursor: not-allowed;
+  }
+
   .sterling-switch:not(.vertical) {
     align-items: center;
     column-gap: 0.5em;
@@ -175,12 +183,6 @@ export const focus = (options) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-switch.disabled .switch {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
-  }
-
   .sterling-switch:not(.vertical) .switch {
     width: 2em;
     height: 1.25em;
@@ -204,7 +206,6 @@ export const focus = (options) => {
     border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
     color: var(--stsv-Button__color);
-    cursor: pointer;
     display: block;
     font: inherit;
     height: 1.25em;
@@ -225,10 +226,21 @@ export const focus = (options) => {
     color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-switch.disabled .thumb {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  .sterling-switch .thumb::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-switch.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-switch:not(.vertical) .thumb {
@@ -240,4 +252,12 @@ export const focus = (options) => {
     left: calc(-1 * var(--stsv-Button__border-width));
     transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
   }
+
+  @media (prefers-reduced-motion) {
+    .switch,
+    .thumb,
+    .thumb::after {
+      transition: none;
+    }
+  }
 </style>

package/Tab.svelte

@@ -102,6 +102,7 @@ export const focus = (options) => {
     font: inherit;
     overflow: hidden;
     padding: 0.5em 1em 0.25em 1em;
+    position: relative;
     text-decoration: none;
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
@@ -144,8 +145,25 @@ export const focus = (options) => {
   }
 
   .sterling-tab:disabled {
-    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-tab::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-tab:disabled::after {
+    opacity: 1;
   }
 
   .content {
@@ -190,7 +208,11 @@ export const focus = (options) => {
     background-color: var(--stsv-Input__color);
   }
 
-  .sterling-tab.selected:disabled .indicator {
-    background-color: var(--stsv-Common__color--disabled);
+  @media (prefers-reduced-motion) {
+    .sterling-tab,
+    .sterling-tab::after,
+    .indicator {
+      transition: none;
+    }
   }
 </style>

package/TabList.svelte

@@ -234,7 +234,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-auto-flow: column;
     grid-template-columns: repeat(auto-fill, auto);
     grid-template-rows: 1fr;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
   }
 
@@ -243,7 +243,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-template-rows: auto;
     grid-template-columns: 1fr;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     row-gap: 0.5em;
   }
 

package/TextArea.svelte

@@ -1,4 +1,6 @@
-<script>export let autoHeight = false;
+<script>import { onMount } from "svelte";
+export let autoHeight = false;
+export let disabled = false;
 export let resize = "none";
 export let value;
 let textAreaRef;
@@ -13,6 +15,9 @@ const onInput = () => {
 };
 $:
   autoHeight, autoSetHeight();
+onMount(() => {
+  autoSetHeight();
+});
 export const blur = () => {
   textAreaRef?.blur();
 };
@@ -37,51 +42,57 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<textarea
-  bind:this={textAreaRef}
-  class="sterling-text-area"
-  rows="1"
-  style={`--TextArea__resize: ${resize};`}
-  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
-  on:input={onInput}
-  {...$$restProps}
-/>
+<div class="sterling-text-area2" class:disabled>
+  <textarea
+    bind:this={textAreaRef}
+    bind:value
+    {disabled}
+    rows="1"
+    style={`--TextArea__resize: ${resize};`}
+    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
+    on:input={onInput}
+    {...$$restProps}
+  />
+</div>
 
 <style>
-  .sterling-text-area {
+  .sterling-text-area2 {
+    position: relative;
+  }
+
+  textarea {
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -89,6 +100,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
     color: var(--stsv-Input__color);
+    display: block;
     font: inherit;
     line-height: inherit;
     height: 100%;
@@ -102,13 +114,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     width: 100%;
   }
 
-  .sterling-text-area:hover {
+  textarea:hover {
     background-color: var(--stsv-Input__background-color--hover);
     border-color: var(--stsv-Input__border-color--hover);
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-text-area:focus {
+  textarea:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -118,24 +130,37 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-text-area:disabled {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv--Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  .sterling-text-area2:disabled {
     cursor: not-allowed;
+    outline: none;
   }
 
-  .sterling-text-area::placeholder {
-    color: var(--stsv-Display__color--faint);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
+  .sterling-text-area2::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-text-area2.disabled::after {
+    opacity: 1;
   }
 
-  .sterling-text-area:disabled::placeholder {
-    color: var(--stsv-Display__color--disabled);
+  textarea::placeholder {
+    color: var(--stsv-Display__color--faint);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-text-area {
+    textarea,
+    .sterling-text-area2,
+    .sterling-text-area2::after {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
+        disabled?: boolean | undefined;
         resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
         value: string;
         blur?: (() => void) | undefined;