@geoffcox/sterling-svelte 0.0.23 → 0.0.25

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;
     }
   }

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

@@ -0,0 +1,135 @@
+<script>import { onMount } from "svelte";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { portal } from "./actions/portal";
+export let placement = "bottom-start";
+export let open = false;
+export let reference;
+export let portalHost = void 0;
+let popupRef;
+let popupPosition = { x: 0, y: 0 };
+const hostId = "SterlingPopoverPortal";
+const ensurePortalHost = () => {
+  if (portalHost) {
+    return portalHost;
+  }
+  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(),
+  shift({ padding: 0, mainAxis: true, crossAxis: true })
+];
+const computePopupPosition = async () => {
+  if (reference && popupRef) {
+    popupPosition = await computePosition(reference, popupRef, {
+      placement,
+      middleware
+    });
+  } else {
+    popupPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateMenuPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && popupRef) {
+    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopupPosition);
+  }
+};
+$:
+  popupRef, reference, autoUpdateMenuPosition();
+$:
+  open, bodyHeight, placement, computePopupPosition();
+onMount(() => {
+  ensurePortalHost();
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
+</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 />
+  </div>
+</div>
+
+<style>
+  .sterling-popover-portal {
+    position: relative;
+    overflow: visible;
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  .sterling-popover {
+    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-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    box-sizing: border-box;
+    display: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    height: fit-content;
+    left: 0;
+    max-height: calc(50vh);
+    overflow: auto;
+    overscroll-behavior: contain;
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 1;
+  }
+
+  .sterling-popover.open {
+    display: grid;
+  }
+</style>

package/Popover.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placement?: Placement | undefined;
+        open?: boolean | undefined;
+        reference: HTMLElement;
+        portalHost?: HTMLElement | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/Progress.svelte

@@ -105,7 +105,6 @@ $:
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    min-width: 100px;
   }
 
   .indicator {
@@ -129,7 +128,6 @@ $:
     flex-direction: column;
     justify-content: flex-end;
     min-width: unset;
-    min-height: 100px;
   }
 
   .sterling-progress.vertical .indicator {

package/Radio.svelte

@@ -1,54 +1,71 @@
-<script>import { onMount } from "svelte";
-import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
-let mounted = false;
-let radioRef;
+if (checked && $$restProps.value !== group) {
+  group = $$restProps.value;
+} else if (!checked && $$restProps.value === group) {
+  checked = true;
+}
+let inputRef;
+let previousChecked = checked;
+let previousGroup = group;
+const reconcile = () => {
+  if (checked !== previousChecked) {
+    if (checked && $$restProps.value) {
+      group = $$restProps.value;
+      previousGroup = $$restProps.value;
+    }
+    previousChecked = checked;
+  } else if (group !== previousGroup) {
+    if ($$restProps.value) {
+      checked = $$restProps.value === group;
+      previousChecked = checked;
+    }
+    previousGroup = group;
+  }
+};
+$:
+  checked, group, $$restProps.value, reconcile();
 $: {
-  if ($$slots.default && id === void 0) {
-    id = idGenerator.nextId("Radio");
+  if (inputRef && checked && !inputRef.checked) {
+    inputRef.click();
   }
 }
 $: {
-  if (mounted) {
-    checked = group === $$restProps.value;
+  if ($$slots.default && id === void 0) {
+    id = idGenerator.nextId("Radio");
   }
 }
-const onChange = (e) => {
-  if (e.currentTarget.checked) {
-    group = $$restProps.value;
-  }
-};
 export const blur = () => {
-  radioRef?.blur();
+  inputRef?.blur();
 };
 export const click = () => {
-  radioRef?.click();
+  inputRef?.click();
 };
 export const focus = (options) => {
-  radioRef?.focus(options);
+  inputRef?.focus(options);
 };
-onMount(() => {
-  if (checked) {
+const onChange = (e) => {
+  if (e.currentTarget.checked) {
     group = $$restProps.value;
   }
-  mounted = true;
-});
+};
 </script>
 
 <!--
 	@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}
-      checked={group === $$restProps.value}
+      bind:this={inputRef}
+      {checked}
       {disabled}
+      {group}
       {id}
       type="radio"
       on:blur
@@ -154,6 +171,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 +183,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 +200,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;
     }
   }