@geoffcox/sterling-svelte 0.0.26 → 0.0.27

package/ListItem.svelte

@@ -1,16 +1,18 @@
 <script>import { getContext } from "svelte";
 import { LIST_CONTEXT_KEY } from "./List.constants";
-import { readable } from "svelte/store";
+import { readable, writable } from "svelte/store";
 export let disabled = false;
 export let value;
 const {
+  colorful,
   disabled: listDisabled,
   selectedValue,
   horizontal
 } = getContext(LIST_CONTEXT_KEY) || {
+  colorful: readable(false),
   disabled: readable(false),
-  selectedValue: void 0,
-  horizontal: false
+  selectedValue: writable(void 0),
+  horizontal: readable(false)
 };
 let itemRef;
 $:
@@ -30,6 +32,7 @@ export const focus = (options) => {
   aria-selected={selected}
   bind:this={itemRef}
   class="sterling-list-item"
+  class:colorful={$colorful}
   class:disabled={disabled || $listDisabled}
   class:item-disabled={disabled && !$listDisabled}
   class:selected
@@ -65,7 +68,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <slot {disabled} {horizontal} {selected} {value}>{value}</slot>
@@ -75,7 +78,7 @@ export const focus = (options) => {
   .sterling-list-item {
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     margin: 0;
     padding: 0.5em;
@@ -87,13 +90,23 @@ export const focus = (options) => {
   }
 
   .sterling-list-item:not(.disabled):not(.selected):hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-list-item.selected {
-    background-color: var(--stsv-Input__background-color--selected);
-    color: var(--stsv-Input__color--selected);
+    background-color: var(--stsv-button__background-color--active);
+    color: var(--stsv-button__color--active);
+  }
+
+  .sterling-list-item.colorful:not(.disabled):not(.selected):hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-list-item.colorful.selected {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   .sterling-list-item.disabled {
@@ -102,7 +115,13 @@ export const focus = (options) => {
   }
 
   .sterling-list-item::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/ListItem.svelte.d.ts

@@ -46,7 +46,7 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
-            horizontal: import("svelte/store").Readable<boolean>;
+            horizontal: import("svelte/store").Readable<boolean> | undefined;
             selected: boolean;
             value: string;
         };

package/Menu.svelte

@@ -93,7 +93,7 @@ export const focusLastMenuItem = () => {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -104,11 +104,11 @@ export const focusLastMenuItem = () => {
 
 <style>
   .sterling-menu {
-    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;
     display: grid;
     grid-template-columns: 1fr;
@@ -121,6 +121,6 @@ export const focusLastMenuItem = () => {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    row-gap: calc(2 * var(--stsv-Common__outline-width));
+    row-gap: calc(2 * var(--stsv-common__outline-width));
   }
 </style>

package/MenuBar.svelte

@@ -135,7 +135,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
   use:clickOutside

package/MenuButton.svelte

@@ -6,7 +6,6 @@ import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import { idGenerator } from "./idGenerator";
 import Popover from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
-import { usingKeyboard } from "./stores/usingKeyboard";
 export let open = false;
 export let shape = "rounded";
 export let value;
@@ -46,10 +45,8 @@ export const focus = (options) => {
 const onClick = async () => {
   if (!open) {
     openValues.set(["menu-button"]);
-    if ($usingKeyboard) {
-      await tick();
-      menuRef?.focusFirstMenuItem();
-    }
+    await tick();
+    menuRef?.focusFirstMenuItem();
   } else {
     open = false;
     openValues.set([]);
@@ -78,6 +75,7 @@ const onClickOutside = (event) => {
   closeAllMenus?.();
 };
 setContext(MENU_ITEM_CONTEXT_KEY, {
+  depth: 1,
   openValues,
   rootValue: value,
   closeContainingMenu: () => {

package/MenuItem.svelte

@@ -16,6 +16,7 @@ import MenuItemDisplay from "./MenuItemDisplay.svelte";
 import Popover from "./Popover.svelte";
 import { usingKeyboard } from "./stores/usingKeyboard";
 export let checked = false;
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let value;
@@ -258,6 +259,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-owns={menuId}
   bind:this={menuItemRef}
   class="sterling-menu-item"
+  class:colorful
   class:composed
   class:using-keyboard={usingKeyboard}
   data-value={value}
@@ -296,7 +298,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   on:click={onClick}
   on:keydown={onKeyDown}
   on:mouseenter={onMouseEnter}
@@ -337,11 +339,11 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   .sterling-menu-item {
     background-color: transparent;
     border-color: transparent;
-    border-radius: var(--stsv-Button__border-radius);
+    border-radius: var(--stsv-button__border-radius);
     border-style: none;
     border-width: 0;
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     font: inherit;
     margin: 0;
@@ -357,8 +359,8 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   }
 
   .sterling-menu-item:hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-menu-item:focus {
@@ -366,15 +368,35 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   }
 
   .sterling-menu-item.using-keyboard:focus {
-    border-color: var(--stsv-Button__border-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);
+    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-menu-item:focus {
-    background-color: var(--stsv-Input__background-color--selected);
+    background-color: var(--stsv-input__background-color--selected);
+  }
+
+  /** ----- colorful ----- */
+
+  .sterling-menu-item.colorful {
+    color: var(--stsv-common--colorful__color);
+  }
+
+  .sterling-menu-item.colorful:hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-menu-item.colorful.using-keyboard:focus {
+    border-color: var(--stsv-button--colorful__border-color--focus);
+  }
+
+  .sterling-menu-item.colorful:focus {
+    background-color: var(--stsv-button--colorful__background-color--focus);
+    color: var(--stsv-button--colorful__color--focus);
   }
 
   .sterling-menu-item.composed,

package/MenuItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         value: string;

package/MenuItemDisplay.svelte

@@ -103,7 +103,13 @@ export let menuItemRole = "menuitem";
   }
 
   .sterling-menu-item-display::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/MenuSeparator.svelte

@@ -35,14 +35,14 @@ A styled line to visually separate menu items in a menu.
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 />
 
 <style>
   .sterling-menu-item-separator {
-    height: var(--stsv-Common__border-width);
-    background-color: var(--stsv-Common__border-color);
+    height: var(--stsv-common__border-width);
+    background-color: var(--stsv-common__border-color);
     margin: 0.1em 0;
   }
 </style>

package/Popover.svelte

@@ -1,31 +1,37 @@
 <script>import { onMount } from "svelte";
 import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { portal } from "./actions/portal";
-export let placement = "bottom-start";
+export let offsetOptions = { mainAxis: 0, crossAxis: 0 };
 export let open = false;
-export let reference;
+export let persistent = false;
+export let placement = "bottom-start";
 export let portalHost = void 0;
+export let reference;
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
 const hostId = "SterlingPopoverPortal";
 const ensurePortalHost = () => {
-  if (portalHost) {
-    return portalHost;
+  if (document) {
+    if (portalHost) {
+      return portalHost;
+    }
+    let host = document.querySelector(`#${hostId}`);
+    if (!host) {
+      console.log("creating portal host");
+      host = document.createElement("div");
+      host.id = hostId;
+      host.style.overflow = "visible";
+      document.body.append(host);
+    }
+    portalHost = host;
   }
-  let host = document.querySelector(`#${hostId}`);
-  if (!host) {
-    host = document.createElement("div");
-    host.id = hostId;
-    host.style.overflow = "visible";
-    document.body.append(host);
-  }
-  portalHost = host;
 };
 let bodyHeight = 0;
 const resizeObserver = new ResizeObserver((entries) => {
   bodyHeight = entries[0].target.clientHeight;
 });
-const middleware = [offset({ mainAxis: -2 }), flip()];
+$:
+  middleware = [offset(offsetOptions), flip()];
 const computePopupPosition = async () => {
   if (reference && popupRef) {
     popupPosition = await computePosition(reference, popupRef, {
@@ -47,7 +53,7 @@ const autoUpdateMenuPosition = () => {
 $:
   popupRef, reference, autoUpdateMenuPosition();
 $:
-  open, bodyHeight, placement, computePopupPosition();
+  open, bodyHeight, middleware, placement, computePopupPosition();
 onMount(() => {
   ensurePortalHost();
   resizeObserver.observe(document.body);
@@ -55,46 +61,55 @@ onMount(() => {
     resizeObserver.unobserve(document.body);
   };
 });
+const onKeydown = (event) => {
+  if (event.key === "Escape") {
+    open = false;
+  }
+};
+ensurePortalHost();
 </script>
 
-<div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
-  <div
-    bind:this={popupRef}
-    class="sterling-popover"
-    class:open
-    on:blur
-    on:click
-    on:copy
-    on:cut
-    on:dblclick
-    on:dragend
-    on:dragenter
-    on:dragleave
-    on:dragover
-    on:dragstart
-    on:drop
-    on:focus
-    on:focusin
-    on:focusout
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:scroll
-    on:wheel
-    on:paste
-    {...$$restProps}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <slot />
+{#if open || persistent}
+  <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+    <div
+      bind:this={popupRef}
+      class="sterling-popover"
+      class:open
+      on:blur
+      on:click
+      on:copy
+      on:cut
+      on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
+      on:focus
+      on:focusin
+      on:focusout
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mousedown
+      on:mouseenter
+      on:mouseleave
+      on:mousemove
+      on:mouseover
+      on:mouseout
+      on:mouseup
+      on:scroll
+      on:wheel|passive
+      on:paste
+      on:keydown={onKeydown}
+      {...$$restProps}
+      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+    >
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .sterling-popover-portal {

package/Popover.svelte.d.ts

@@ -3,10 +3,12 @@ import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: Placement | undefined;
+        offsetOptions?: import("@floating-ui/core").OffsetOptions | undefined;
         open?: boolean | undefined;
-        reference: HTMLElement;
+        persistent?: boolean | undefined;
+        placement?: Placement | undefined;
         portalHost?: HTMLElement | undefined;
+        reference: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/Progress.svelte

@@ -67,7 +67,7 @@ $:
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container" bind:clientWidth bind:clientHeight>
@@ -89,14 +89,14 @@ $:
     align-content: flex-start;
     align-items: flex-start;
     display: block;
-    background: var(--stsv-Common__background-color);
+    background: var(--stsv-common__background-color);
     box-sizing: border-box;
     height: 1em;
     padding: 0.25em;
-    border-width: var(--stsv-Common__border-width);
-    border-style: var(--stsv-Common__border-style);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
+    border-width: var(--stsv-common__border-width);
+    border-style: var(--stsv-common__border-style);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -108,7 +108,7 @@ $:
   }
 
   .indicator {
-    background-color: var(--stsv-Display__border-color);
+    background-color: var(--stsv-common__border-color);
     box-sizing: border-box;
     height: 100%;
     min-height: 1px;
@@ -140,30 +140,30 @@ $:
   /* ----- Colorful ----- */
 
   .indicator.info {
-    background-color: var(--stsv-Info__border-color);
+    background-color: var(--stsv-status--info__border-color);
   }
 
   .indicator.success {
-    background-color: var(--stsv-Success__border-color);
+    background-color: var(--stsv-status--success__border-color);
   }
 
   .indicator.warning {
-    background-color: var(--stsv-Warning__border-color);
+    background-color: var(--stsv-status--warning__border-color);
   }
 
   .indicator.error {
-    background-color: var(--stsv-Error__border-color);
+    background-color: var(--stsv-status--error__border-color);
   }
 
   /* ----- Disabled ----- */
 
   .sterling-progress.disabled {
-    background: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--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);
+    background-color: var(--stsv-common__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/Radio.svelte

@@ -1,5 +1,6 @@
 <script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
+export let colorful = false;
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
@@ -59,7 +60,7 @@ const onChange = (e) => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class="sterling-radio" class:disabled>
+<div class="sterling-radio" class:colorful class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}
@@ -93,7 +94,7 @@ const onChange = (e) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:wheel
+      on:wheel|passive
       {...$$restProps}
     />
     <div class="indicator" />
@@ -152,10 +153,10 @@ const onChange = (e) => {
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    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-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     border-radius: 10000px;
     box-sizing: border-box;
     display: inline-block;
@@ -167,20 +168,20 @@ const onChange = (e) => {
   }
 
   input:checked + .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
+    background-color: var(--stsv-input__background-color);
+    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);
+    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);
-    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);
   }
 
   .indicator::after {
@@ -197,7 +198,26 @@ const onChange = (e) => {
   }
 
   input:checked + .indicator::after {
-    background-color: var(--stsv-Input__color);
+    background-color: var(--stsv-input__color);
+  }
+
+  .sterling-radio.colorful .indicator {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+  }
+
+  .sterling-radio.colorful input:checked + .indicator {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+  }
+
+  .sterling-radio.colorful:not(.disabled):hover .indicator {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  .sterling-radio.colorful input:checked + .indicator::after {
+    background-color: var(--stsv-input--colorful__color);
   }
 
   .sterling-radio.disabled * {
@@ -205,7 +225,13 @@ const onChange = (e) => {
   }
 
   .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
+    );
     border-radius: 10000px;
     bottom: 0;
     content: '';

package/Radio.svelte.d.ts

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