@geoffcox/sterling-svelte 0.0.22 → 0.0.24

package/Link.svelte

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

package/Link.svelte.d.ts

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

package/List.svelte

@@ -206,6 +206,12 @@ A list of items where a single item can be selected.
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -225,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>
@@ -237,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;
@@ -251,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%;
   }
@@ -272,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,
@@ -288,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/List.svelte.d.ts

@@ -21,6 +21,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/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,13 +30,20 @@ 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"
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -69,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);
   }
@@ -86,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;
     }
   }

package/ListItem.svelte.d.ts

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

package/Menu.svelte

@@ -80,6 +80,12 @@ onMount(() => {
       on:copy
       on:cut
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -127,7 +133,7 @@ onMount(() => {
     height: fit-content;
     left: 0;
     max-height: calc(50vh);
-    overflow: scroll;
+    overflow: auto;
     overscroll-behavior: contain;
     padding: 0.25em;
     position: absolute;

package/Menu.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;

package/MenuBar.svelte

@@ -72,6 +72,12 @@ setContext(MENU_BAR_CONTEXT_KEY, {
   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/MenuBar.svelte.d.ts

@@ -11,6 +11,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/MenuButton.svelte

@@ -87,6 +87,12 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:click
   on:click={onClick}
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuButton.svelte.d.ts

@@ -14,6 +14,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

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) {
@@ -241,6 +241,12 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -271,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>
@@ -327,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/MenuItem.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

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/MenuSeparator.svelte

@@ -8,6 +8,12 @@ A styled line to visually separate menu items in a menu.
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/MenuSeparator.svelte.d.ts

@@ -8,6 +8,12 @@ export default class MenuSeparator extends SvelteComponentTyped<{
     blur: FocusEvent;
     click: MouseEvent;
     dblclick: MouseEvent;
+    dragend: DragEvent;
+    dragenter: DragEvent;
+    dragleave: DragEvent;
+    dragover: DragEvent;
+    dragstart: DragEvent;
+    drop: DragEvent;
     focus: FocusEvent;
     focusin: FocusEvent;
     focusout: FocusEvent;
@@ -46,6 +52,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

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,12 +33,17 @@ $:
 
 <div
   class="sterling-progress"
-  class:disabled
   class:vertical
   role="progressbar"
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -151,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,12 +7,17 @@ declare const __propDef: {
         percent?: number | undefined;
         vertical?: boolean | undefined;
         colorful?: string | undefined;
-        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;