@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/Tab.svelte

@@ -1,14 +1,15 @@
 <script>import { getContext } from "svelte";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let disabled = false;
 export let selected = false;
 export let text = void 0;
 export let value;
 let tabRef;
 const {
+  colorful,
   disabled: tabListDisabled,
   selectedValue,
-  usingKeyboard,
   vertical
 } = getContext(TAB_LIST_CONTEXT_KEY);
 $:
@@ -36,6 +37,7 @@ export const focus = (options) => {
   bind:this={tabRef}
   aria-selected={selected}
   class="sterling-tab"
+  class:colorful={$colorful}
   disabled={_disabled}
   class:selected
   class:using-keyboard={$usingKeyboard}
@@ -74,7 +76,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
 >
   <div class="content">
     <slot disabled={_disabled} {selected} {value} {text}>
@@ -90,13 +92,13 @@ export const focus = (options) => {
   .sterling-tab {
     align-content: center;
     align-items: center;
-    background-color: var(--stsv-Common__background-color);
+    background-color: var(--stsv-common__background-color);
     border-color: transparent;
-    border-radius: var(--stsv-Button__border-radius);
-    border-style: var(--stsv-Common__border-style);
+    border-radius: var(--stsv-button__border-radius);
+    border-style: var(--stsv-common__border-style);
     border-width: 0;
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -127,30 +129,28 @@ export const focus = (options) => {
     column-gap: 0.15em;
   }
 
-  .sterling-tab:hover {
-    background-color: var(--stsv-Common__background-color--hover);
-    color: var(--stsv-Common__color--hover);
-  }
-
-  .sterling-tab:active {
-    background-color: var(--stsv-Common__background-color--active);
-    color: var(--stsv-Common__color--active);
-  }
-
   .sterling-tab.using-keyboard:focus-visible {
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
+  /* ----- disabled -----*/
+
   .sterling-tab:disabled {
     cursor: not-allowed;
     outline: none;
   }
 
   .sterling-tab::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -166,6 +166,8 @@ export const focus = (options) => {
     opacity: 1;
   }
 
+  /* ----- content -----*/
+
   .content {
     padding: 0 0.2em;
   }
@@ -174,6 +176,8 @@ export const focus = (options) => {
     padding-top: 0.25em;
   }
 
+  /* ----- indicator -----*/
+
   .indicator {
     background-color: transparent;
     border-radius: 10000px;
@@ -190,24 +194,43 @@ export const focus = (options) => {
     width: 0.4em;
   }
 
-  .sterling-tab:hover .indicator {
-    background-color: var(--stsv-Display__color--faint);
+  .sterling-tab:not(.selected):not(:active):hover .indicator {
+    background-color: var(--stsv-input__border-color--hover);
+    opacity: 0.3;
   }
 
   .sterling-tab:active .indicator {
-    background-color: var(--stsv-Button__border-color--hover);
+    background-color: var(--stsv-input__border-color--selected);
   }
 
-  .sterling-tab:disabled .indicator,
-  .sterling-tab:disabled:hover .indicator,
-  .sterling-tab:disabled:active .indicator {
-    background-color: transparent;
+  .sterling-tab.selected .indicator {
+    background-color: var(--stsv-input__border-color--selected);
   }
 
-  .sterling-tab.selected .indicator {
-    background-color: var(--stsv-Input__color);
+  /* ----- indicator colorful -----*/
+
+  .sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
+    background-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  .sterling-tab.colorful:active .indicator {
+    background-color: var(--stsv-input--colorful__border-color--selected);
+  }
+
+  .sterling-tab.colorful.selected .indicator {
+    background-color: var(--stsv-input--colorful__border-color--selected);
   }
 
+  /* ----- indicator disabled -----*/
+
+  .sterling-tab:disabled:not(.selected) .indicator,
+  .sterling-tab:disabled:not(.selected):hover .indicator,
+  .sterling-tab:disabled:not(.selected):active .indicator {
+    background-color: transparent;
+  }
+
+  /* ----- reduced motion -----*/
+
   @media (prefers-reduced-motion) {
     .sterling-tab,
     .sterling-tab::after,

package/TabList.svelte

@@ -1,21 +1,19 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let disabled = false;
 export let vertical = false;
 export let selectedValue = void 0;
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 let tabListRef;
 let lastSelectedTabRef;
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const selectedValueStore = writable(selectedValue);
-const usingKeyboardStore = writable(usingKeyboard);
 const verticalStore = writable(vertical);
+$:
+  colorfulStore.set(colorful);
 $:
   disabledStore.set(disabled);
 $:
@@ -23,8 +21,6 @@ $:
 $: {
   selectedValue = $selectedValueStore;
 }
-$:
-  usingKeyboardStore.set(usingKeyboard);
 $:
   verticalStore.set(vertical);
 const dispatch = createEventDispatcher();
@@ -38,7 +34,12 @@ export const blur = () => {
   tabListRef?.blur();
 };
 export const focus = (options) => {
-  tabListRef?.focus(options);
+  let selectedItem = getSelectedTabElement();
+  if (selectedValue && selectedItem) {
+    selectTab(selectedValue, selectedItem);
+  } else {
+    selectFirstTab();
+  }
 };
 const isElementTab = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "tab";
@@ -69,8 +70,8 @@ export const selectFirstTab = () => {
   return false;
 };
 export const selectPreviousTab = () => {
-  let selectedItem = getSelectedTabElement();
-  let candidate = selectedItem?.previousElementSibling;
+  let selectedTab = getSelectedTabElement();
+  let candidate = selectedTab?.previousElementSibling;
   while (candidate && !isElementTab(candidate)) {
     candidate = candidate.previousElementSibling;
   }
@@ -82,8 +83,8 @@ export const selectPreviousTab = () => {
   return false;
 };
 export const selectNextTab = () => {
-  let selectedItem = getSelectedTabElement();
-  let candidate = selectedItem?.nextElementSibling;
+  let selectedTab = getSelectedTabElement();
+  let candidate = selectedTab?.nextElementSibling;
   while (candidate && !isElementTab(candidate)) {
     candidate = candidate.nextElementSibling;
   }
@@ -106,12 +107,6 @@ export const selectLastTab = () => {
   }
   return false;
 };
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 const onClick = (event) => {
   if (!disabled) {
     let candidate = event.target;
@@ -126,7 +121,6 @@ const onClick = (event) => {
   }
 };
 const onKeydown = (event) => {
-  console.log("tabList onKeydown", event);
   if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
     switch (event.key) {
       case "Home":
@@ -173,9 +167,9 @@ const onKeydown = (event) => {
   }
 };
 setContext(TAB_LIST_CONTEXT_KEY, {
+  colorful: colorfulStore,
   disabled: disabledStore,
   selectedValue: selectedValueStore,
-  usingKeyboard: usingKeyboardStore,
   vertical: verticalStore
 });
 </script>
@@ -184,9 +178,10 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
   class="sterling-tab-list"
-  role="tablist"
-  class:vertical
+  class:colorful
   class:disabled
+  class:vertical
+  role="tablist"
   on:blur
   on:click
   on:click={onClick}
@@ -214,7 +209,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -226,7 +221,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     box-sizing: border-box;
     display: grid;
     margin: 0;
-    padding: calc(2 * var(--stsv-Common__outline-width));
+    padding: calc(2 * var(--stsv-common__outline-width));
   }
 
   .sterling-tab-list:not(.vertical) {
@@ -248,7 +243,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   }
 
   .sterling-tab-list:hover {
-    color: var(--stsv-Common__color--hover);
+    color: var(--stsv-common__color--hover);
   }
 
   @media (prefers-reduced-motion) {

package/TabList.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         vertical?: boolean | undefined;
         selectedValue?: string | undefined;

package/TabList.types.d.ts

@@ -1,7 +1,7 @@
 import type { Readable, Writable } from 'svelte/store';
 export type TabListContext = {
+    colorful: Readable<boolean>;
     disabled: Readable<boolean>;
     selectedValue: Writable<string | undefined>;
-    usingKeyboard: Readable<boolean>;
     vertical: Readable<boolean>;
 };

package/TextArea.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from "svelte";
 export let autoHeight = false;
+export let colorful = false;
 export let disabled = false;
 export let resize = "none";
 export let value = "";
@@ -42,7 +43,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class="sterling-text-area" class:disabled>
+<div class="sterling-text-area" class:colorful class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
@@ -81,7 +82,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     on:select
     on:submit
     on:reset
-    on:wheel
+    on:wheel|passive
     on:input={onInput}
     {...$$restProps}
   />
@@ -95,13 +96,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-radius: var(--stsv-Input__border-radius);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     display: block;
     font: inherit;
     line-height: inherit;
@@ -117,19 +118,37 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea:hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   textarea:focus {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Input__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    background-color: var(--stsv-input__background-color--focus);
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
+  }
+
+  .sterling-text-area.colorful textarea {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-text-area.colorful textarea:hover {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  .sterling-text-area.colorful textarea:focus {
+    background-color: var(--stsv-input--colorful__background-color--focus);
+    border-color: var(--stsv-input--colorful__border-color--focus);
+    color: var(--stsv-input--colorful__color--focus);
   }
 
   .sterling-text-area:disabled {
@@ -138,7 +157,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-text-area::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -155,7 +180,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   textarea::placeholder {
-    color: var(--stsv-Display__color--faint);
+    color: var(--stsv-common__color--subtle);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 

package/TextArea.svelte.d.ts

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
-        resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
+        resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
         value?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
@@ -60,7 +61,7 @@ export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAr
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
     get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Tooltip.svelte

@@ -114,6 +114,7 @@ const autoShowUpdate = () => {
   cleanupAutoShowUpdate = () => {
   };
   const element = reference;
+  open = false;
   if (element) {
     switch (showOn) {
       case "click":
@@ -171,12 +172,12 @@ onMount(() => {
   }
 
   .sterling-tooltip {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
-    color: var(--stsv-Common__color);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
+    color: var(--stsv-common__color);
     position: absolute;
     overflow: visible;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
@@ -187,11 +188,11 @@ onMount(() => {
     position: absolute;
     width: 10px;
     height: 10px;
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
   }
 </style>

package/Tree.svelte

@@ -1,15 +1,17 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { TREE_CONTEXT_KEY } from "./Tree.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
 export let expandedValues = [];
 let treeRef;
-const selectedValueStore = writable(selectedValue);
-const expandedValuesStore = writable(expandedValues);
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
+const expandedValuesStore = writable(expandedValues);
+const selectedValueStore = writable(selectedValue);
 export const blur = () => {
   treeRef?.blur();
 };
@@ -23,11 +25,6 @@ const raiseExpandCollapse = (expandedValues2) => {
 const raiseSelect = (selectedValue2) => {
   dispatch("select", { selectedValue: selectedValue2 });
 };
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 $: {
   selectedValueStore.set(selectedValue);
 }
@@ -42,19 +39,17 @@ $: {
   expandedValues = $expandedValuesStore;
   raiseExpandCollapse($expandedValuesStore);
 }
+$: {
+  colorfulStore.set(colorful);
+}
 $: {
   disabledStore.set(disabled);
 }
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 setContext(TREE_CONTEXT_KEY, {
+  colorful: colorfulStore,
+  disabled: disabledStore,
   expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore,
-  disabled: disabledStore
+  selectedValue: selectedValueStore
 });
 </script>
 
@@ -63,9 +58,10 @@ setContext(TREE_CONTEXT_KEY, {
   bind:this={treeRef}
   aria-disabled={disabled}
   class="sterling-tree"
+  class:colorful
   class:composed
   class:disabled
-  class:using-keyboard={usingKeyboard}
+  class:using-keyboard={$usingKeyboard}
   role="tree"
   on:blur
   on:click
@@ -97,23 +93,23 @@ setContext(TREE_CONTEXT_KEY, {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container">
-    <slot {composed} {disabled} />
+    <slot {colorful} {composed} {disabled} />
   </div>
 </div>
 
 <style>
   .sterling-tree {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -122,17 +118,17 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .sterling-tree:hover {
-    border-color: var(--stsv-Common__border-color--hover);
-    color: var(--stsv-Common__color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   .sterling-tree.using-keyboard:focus-within {
-    border-color: var(--stsv-Button__border-color--focus);
-    color: var(--stsv-Common__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    border-color: var(--stsv-button__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
   .sterling-tree.composed,
@@ -158,7 +154,13 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;

package/Tree.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         selectedValue?: string | undefined;
@@ -48,6 +49,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
         };

package/Tree.types.d.ts

@@ -3,6 +3,7 @@ import type { Readable, Writable } from 'svelte/store';
  * Context for a Tree and its tree items.
  */
 export type TreeContext = {
+    colorful: Readable<boolean>;
     /** If the tree is disabled */
     disabled: Readable<boolean>;
     /**

package/TreeChevron.svelte

@@ -52,7 +52,7 @@ $: {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 />