@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/ListItem.svelte

@@ -1,40 +1,43 @@
-<script>import { getContext } from "svelte";
-import { readable, writable } from "svelte/store";
-import { LIST_CONTEXT_KEY } from "./List.constants";
+<script>import { getContext } from 'svelte';
+import { readable, writable } from 'svelte/store';
+import { LIST_CONTEXT_KEY } from './List.constants';
+// ----- Props ----- //
+/** When true the item is disabled.  The item is also disabled if the parent list is disabled. */
 export let disabled = false;
+/** The value uniquely identifying this item within the list. */
 export let value;
-const {
-  colorful,
-  disabled: listDisabled,
-  selectedValue,
-  horizontal
-} = getContext(LIST_CONTEXT_KEY) || {
-  colorful: readable(false),
-  disabled: readable(false),
-  selectedValue: writable(void 0),
-  horizontal: readable(false)
+/** Additional class names to apply. */
+export let variant = '';
+// ----- GetContext ----- //
+const { disabled: listDisabled, selectedValue, horizontal } = getContext(LIST_CONTEXT_KEY) || {
+    disabled: readable(false),
+    selectedValue: writable(undefined),
+    horizontal: readable(false)
 };
+// ----- State ----- //
 let itemRef;
-$:
-  selected = $selectedValue === value;
+$: selected = $selectedValue === value;
+// ----- Methods ----- //
 export const click = () => {
-  itemRef?.click();
+    itemRef?.click();
 };
 export const blur = () => {
-  itemRef?.blur();
+    itemRef?.blur();
 };
 export const focus = (options) => {
-  itemRef?.focus(options);
+    itemRef?.focus(options);
 };
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-role-supports-aria-props -->
 <div
   aria-selected={selected}
   bind:this={itemRef}
-  class="sterling-list-item"
-  class:colorful={$colorful}
+  class={`sterling-list-item ${variant}`}
   class:disabled={disabled || $listDisabled}
-  class:item-disabled={disabled && !$listDisabled}
+  class:item-disabled={disabled}
+  class:list-disabled={$listDisabled}
   class:selected
   data-value={value}
   role="listitem"
@@ -71,77 +74,5 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}
 >
-  <slot {disabled} {horizontal} {selected} {value}>{value}</slot>
+  <slot {disabled} {horizontal} {selected} {value} {variant}>{value}</slot>
 </div>
-
-<style>
-  .sterling-list-item {
-    background-color: transparent;
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    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):not(.selected):hover {
-    background-color: var(--stsv-button__background-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  .sterling-list-item.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 {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-list-item::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    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::after {
-      transition: none;
-    }
-  }
-</style>

package/ListItem.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         disabled?: boolean | undefined;
         value: string;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -49,6 +50,7 @@ declare const __propDef: {
             horizontal: import("svelte/store").Readable<boolean> | undefined;
             selected: boolean;
             value: string;
+            variant: string;
         };
     };
 };

package/Menu.svelte

@@ -1,71 +1,78 @@
-<script>import { getContext } from "svelte";
-import { slide } from "svelte/transition";
-import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
-import { isElementEnabledMenuItem, isElementMenuItem } from "./MenuItem.utils";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
+<script>import { getContext } from 'svelte';
+import { slide } from 'svelte/transition';
+import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
+import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+// ----- Props ----- //
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let menuRef;
 let menuItemsRef;
+// ----- Media Queries ----- //
 const slidNoOp = (node, params) => {
-  return { delay: 0, duration: 0 };
+    return { delay: 0, duration: 0 };
 };
-$:
-  slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
+$: slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
+// ----- Get Context ----- //
 const { rootValue } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+// ----- Methods ----- //
 export const blur = () => {
-  menuRef?.blur();
+    menuRef?.blur();
 };
 export const focus = (options) => {
-  menuRef?.focus(options);
+    menuRef?.focus(options);
 };
 const isElementInThisMenu = (candidate) => {
-  return candidate && candidate.closest('[role="menu"]') === menuRef;
+    return candidate && candidate.closest('[role="menu"]') === menuRef;
 };
 export const focusFirstMenuItem = () => {
-  let candidate = menuItemsRef?.firstElementChild;
-  while (candidate && !isElementEnabledMenuItem(candidate)) {
-    candidate = candidate.nextElementSibling;
-  }
-  candidate?.focus({ preventScroll: true });
-  return !!candidate;
+    let candidate = menuItemsRef?.firstElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.nextElementSibling;
+    }
+    candidate?.focus({ preventScroll: true });
+    return !!candidate;
 };
 export const focusPreviousMenuItem = () => {
-  let candidate = document.activeElement;
-  if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-    candidate = menuItemsRef?.previousElementSibling;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-      candidate = candidate.previousElementSibling;
+    let candidate = document.activeElement;
+    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+        candidate = menuItemsRef?.previousElementSibling;
+        while (candidate && !isElementEnabledMenuItem(candidate)) {
+            candidate = candidate.previousElementSibling;
+        }
+        candidate?.focus();
     }
-    candidate?.focus();
-  }
-  return !!candidate;
+    return !!candidate;
 };
 export const focusNextMenuItem = () => {
-  let candidate = document.activeElement;
-  if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-    candidate = menuItemsRef?.nextElementSibling;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-      candidate = candidate.nextElementSibling;
+    let candidate = document.activeElement;
+    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+        candidate = menuItemsRef?.nextElementSibling;
+        while (candidate && !isElementEnabledMenuItem(candidate)) {
+            candidate = candidate.nextElementSibling;
+        }
+        candidate?.focus();
     }
-    candidate?.focus();
-  }
-  return !!candidate;
+    return !!candidate;
 };
 export const focusLastMenuItem = () => {
-  let candidate = menuItemsRef?.lastElementChild;
-  while (candidate && !isElementEnabledMenuItem(candidate)) {
-    candidate = candidate.previousElementSibling;
-  }
-  candidate?.focus({ preventScroll: true });
-  return !!candidate;
+    let candidate = menuItemsRef?.lastElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.previousElementSibling;
+    }
+    candidate?.focus({ preventScroll: true });
+    return !!candidate;
 };
 </script>
 
 <div
   bind:this={menuRef}
-  class="sterling-menu"
+  class={`sterling-menu ${variant}`}
   role="menu"
   class:open
   data-root-value={rootValue}
+  tabindex="-1"
   in:slideMotion|global={{ duration: 300 }}
   out:slideMotion|global={{ duration: 100 }}
   on:blur
@@ -98,30 +105,6 @@ export const focusLastMenuItem = () => {
   {...$$restProps}
 >
   <div bind:this={menuItemsRef} class="menu-items">
-    <slot />
+    <slot {variant} />
   </div>
 </div>
-
-<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);
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: fit-content;
-    padding: 0.25em;
-  }
-
-  .menu-items {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    row-gap: calc(2 * var(--stsv-common__outline-width));
-  }
-</style>

package/Menu.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
         focusFirstMenuItem?: (() => boolean) | undefined;
@@ -41,7 +42,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            variant: string;
+        };
     };
 };
 export type MenuProps = typeof __propDef.props;

package/MenuBar.svelte

@@ -1,115 +1,125 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import { MENU_BAR_CONTEXT_KEY } from "./MenuBar.constants";
-import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
-import { writable } from "svelte/store";
-import { isElementEnabledMenuItem } from "./MenuItem.utils";
-import { idGenerator } from "./idGenerator";
-import { clickOutside } from "./actions/clickOutside";
+<script>import { createEventDispatcher, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { clickOutside } from './actions/clickOutside';
+import { idGenerator } from './idGenerator';
+import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+import { isElementEnabledMenuItem } from './MenuItem.utils';
+// ----- Props ----- //
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 const openValues = writable([]);
-const rootValue = idGenerator.nextId("MenuBar");
+const rootValue = idGenerator.nextId('MenuBar');
 let menuBarRef;
-let prevOpenValue = void 0;
+let prevOpenValue = undefined;
+// Remember the last open value
 $: {
-  if ($openValues.length > 0) {
-    prevOpenValue = $openValues[0];
-  }
+    if ($openValues.length > 0) {
+        prevOpenValue = $openValues[0];
+    }
 }
+// Restore focus to the last open menu bar item when it closes
 $: {
-  if ($openValues.length === 0 && prevOpenValue !== void 0) {
-    const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
-    candidate?.focus();
-    prevOpenValue = void 0;
-  }
+    if ($openValues.length === 0 && prevOpenValue !== undefined) {
+        const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
+        candidate?.focus();
+        prevOpenValue = undefined;
+    }
 }
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
 const raiseClose = (value) => {
-  dispatch("close", { value });
+    dispatch('close', { value });
 };
 const raiseOpen = (value) => {
-  dispatch("open", { value });
+    dispatch('open', { value });
 };
 const raiseSelect = (value) => {
-  dispatch("select", { value });
+    dispatch('select', { value });
 };
+// ----- Methods ----- //
 export const blur = () => {
-  menuBarRef?.blur();
+    menuBarRef?.blur();
 };
 export const focus = (options) => {
-  menuBarRef?.focus(options);
+    menuBarRef?.focus(options);
 };
+// ----- Open/Close ----- //
 const getOpenMenuBarItem = () => {
-  const value = $openValues[0];
-  if (value) {
-    return menuBarRef.querySelector(`[data-value="${value}"]`);
-  }
-  return null;
+    const value = $openValues[0];
+    if (value) {
+        return menuBarRef.querySelector(`[data-value="${value}"]`);
+    }
+    return null;
 };
 const openPreviousMenuBarItem = () => {
-  const openItem = getOpenMenuBarItem() || menuBarRef.firstElementChild;
-  let candidate = openItem?.previousElementSibling || menuBarRef.lastElementChild;
-  while (candidate && !isElementEnabledMenuItem(candidate)) {
-    candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
-    if (candidate === openItem) {
-      return false;
+    const openItem = getOpenMenuBarItem() || menuBarRef.firstElementChild;
+    let candidate = openItem?.previousElementSibling || menuBarRef.lastElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
+        if (candidate === openItem) {
+            return false;
+        }
     }
-  }
-  if (!candidate) {
-    candidate = menuBarRef.lastElementChild;
-    candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
-  }
-  candidate?.click();
-  return !!candidate;
+    if (!candidate) {
+        candidate = menuBarRef.lastElementChild;
+        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+    }
+    candidate?.click();
+    return !!candidate;
 };
 const openNextMenuBarItem = () => {
-  const openItem = getOpenMenuBarItem() || menuBarRef.lastElementChild;
-  let candidate = openItem?.nextElementSibling || menuBarRef.firstElementChild;
-  while (candidate && !isElementEnabledMenuItem(candidate)) {
-    candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
-    if (candidate === openItem) {
-      return false;
+    const openItem = getOpenMenuBarItem() || menuBarRef.lastElementChild;
+    let candidate = openItem?.nextElementSibling || menuBarRef.firstElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
+        if (candidate === openItem) {
+            return false;
+        }
+    }
+    if (!candidate) {
+        candidate = menuBarRef.firstElementChild;
+        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
     }
-  }
-  if (!candidate) {
-    candidate = menuBarRef.firstElementChild;
-    candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
-  }
-  candidate?.click();
-  return !!candidate;
+    candidate?.click();
+    return !!candidate;
 };
 const closeAllMenus = () => {
-  openValues.set([]);
+    openValues.set([]);
 };
+// ----- Event Handlers ----- //
 const onClickOutside = (event) => {
-  const {
-    detail: { mouseEvent }
-  } = event;
-  let element = mouseEvent.target;
-  while (element) {
-    if (element.getAttribute("data-root-value") === rootValue) {
-      return;
+    const { detail: { mouseEvent } } = event;
+    let element = mouseEvent.target;
+    while (element) {
+        if (element.getAttribute('data-root-value') === rootValue) {
+            return;
+        }
+        element = element.parentElement;
     }
-    element = element.parentElement;
-  }
-  closeAllMenus?.();
+    closeAllMenus?.();
 };
+// ----- Set Context ----- //
 setContext(MENU_BAR_CONTEXT_KEY, {
-  openPreviousMenuBarItem,
-  openNextMenuBarItem
+    openPreviousMenuBarItem,
+    openNextMenuBarItem
 });
 setContext(MENU_ITEM_CONTEXT_KEY, {
-  isMenuBarItem: true,
-  openValues,
-  rootValue,
-  onClose: raiseClose,
-  onOpen: raiseOpen,
-  onSelect: raiseSelect
+    isMenuBarItem: true,
+    openValues,
+    rootValue,
+    onClose: raiseClose,
+    onOpen: raiseOpen,
+    onSelect: raiseSelect
 });
 </script>
 
 <div
   bind:this={menuBarRef}
-  class="sterling-menu-bar"
+  class={`sterling-menu-bar ${variant}`}
   role="menubar"
+  tabindex="-1"
   on:blur
   on:click
   on:copy
@@ -141,17 +151,5 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   use:clickOutside
   on:click_outside={onClickOutside}
 >
-  <slot />
+  <slot {variant} />
 </div>
-
-<style>
-  .sterling-menu-bar {
-    background-color: transparent;
-    align-items: center;
-    align-content: stretch;
-    display: flex;
-    gap: 1em;
-    justify-content: flex-start;
-    justify-items: flex-start;
-  }
-</style>

package/MenuBar.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
@@ -40,7 +41,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            variant: string;
+        };
     };
 };
 export type MenuBarProps = typeof __propDef.props;