@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/Label.svelte.d.ts

@@ -2,9 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        disabled?: boolean | undefined;
-        blur?: (() => void) | undefined;
+        for?: string | undefined;
+        forwardClick?: boolean | undefined;
+        text?: string | undefined;
+        message?: string | undefined;
+        required?: boolean | undefined;
+        requiredReason?: string | undefined;
+        status?: string | undefined;
         click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
@@ -39,8 +45,22 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
+        text: {
+            disabled: boolean;
+            for: string | undefined;
+            forwardClick: boolean;
+            text: string | undefined;
+            required: boolean;
+        };
+        default: {};
+        message: {
             disabled: boolean;
+            message: string | undefined;
+            required: boolean;
+            status: string;
+        };
+        required: {
+            requiredReason: string;
         };
     };
 };
@@ -48,8 +68,8 @@ export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
-    get blur(): () => void;
     get click(): () => void;
+    get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Label.types.d.ts

@@ -0,0 +1,4 @@
+import type { LABEL_STATUSES } from './Label.constants';
+type LabelStatusTuple = typeof LABEL_STATUSES;
+export type LabelStatus = LabelStatusTuple[number];
+export {};

package/Label.types.js

@@ -0,0 +1 @@
+export {};

package/Link.svelte

@@ -1,5 +1,6 @@
 <script>export let href;
 export let disabled = false;
+export let colorful = false;
 export let variant = "regular";
 let linkRef;
 export const blur = () => {
@@ -16,6 +17,7 @@ export const focus = (options) => {
 <a
   bind:this={linkRef}
   class="sterling-link"
+  class:colorful
   class:disabled
   class:ghost={variant === 'ghost'}
   class:undecorated={variant === 'undecorated'}
@@ -50,7 +52,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}><slot {disabled} {href} {variant} /></a
 >
 
@@ -61,10 +63,10 @@ export const focus = (options) => {
     border-left: none;
     border-right: none;
     border-radius: 0;
-    border-bottom-style: var(--stsv-Button__border-style);
-    border-bottom-width: calc(var(--stsv-Button__border-width));
-    border-bottom-color: var(--stsv-Button__border-color);
-    color: var(--stsv-Button__color);
+    border-bottom-style: var(--stsv-common__border-style);
+    border-bottom-width: calc(var(--stsv-common__border-width));
+    border-bottom-color: var(--stsv-common__border-color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     font: inherit;
     text-decoration: none;
@@ -75,34 +77,78 @@ export const focus = (options) => {
   }
 
   a:visited {
-    border-bottom-color: var(--stsv-Button__border-color);
+    border-bottom-color: var(--stsv-input__border-color);
   }
 
+  a:hover {
+    border-bottom-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
+  }
+
+  a:active {
+    border-bottom-color: var(--stsv-input__border-color--selected);
+    color: var(--stsv-input__color--active);
+  }
+
+  /* ----- colorful ----- */
+
+  a.colorful,
+  a.colorful:visited {
+    border-bottom-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  a.colorful:hover {
+    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  a.colorful:active {
+    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
+    color: var(--stsv-input--colorful__color--active);
+  }
+
+  /* ----- ghost ----- */
+
   a.ghost {
     border-bottom-color: transparent;
   }
 
-  a:hover {
-    border-bottom-color: var(--stsv-Button__border-color--hover);
-    color: var(--stsv-Button__color--hover);
+  a.ghost:hover {
+    border-bottom-color: var(--stsv-input__border-color--hover);
   }
 
-  a:active {
-    border-bottom-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--active);
+  a.ghost:active {
+    border-bottom-color: var(--stsv-input__border-color--selected);
   }
 
-  a.disabled {
-    border-bottom-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  /* ----- ghost colorful ----- */
+
+  a.ghost.colorful:hover {
+    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  a.ghost.colorful:active {
+    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
+  }
+
+  /* ----- disabled ----- */
+
+  a.disabled,
+  a.disabled:visited,
+  a.disabled:hover,
+  a.disabled:active {
+    border-bottom-color: var(--stsv-common__border-color--disabled);
+    color: var(--stsv-common__color--disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
+  /* ----- undecorated ----- */
   a.undecorated,
   a.undecorated:hover,
   a.undecorated:active,
   a.undecorated:visited {
-    border: none;
+    border-bottom-color: transparent;
   }
 </style>

package/Link.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         href: string;
         disabled?: boolean | undefined;
+        colorful?: boolean | undefined;
         variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;

package/List.svelte

@@ -2,15 +2,20 @@
 import { writable } from "svelte/store";
 import { LIST_CONTEXT_KEY } from "./List.constants";
 import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let horizontal = false;
 export let selectedValue = void 0;
 let listRef;
 let lastSelectedItemRef;
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const horizontalStore = writable(horizontal);
 const selectedValueStore = writable(selectedValue);
+$: {
+  colorfulStore.set(colorful);
+}
 $: {
   disabledStore.set(disabled);
 }
@@ -166,6 +171,7 @@ const onKeydown = (event) => {
   }
 };
 setContext(LIST_CONTEXT_KEY, {
+  colorful: colorfulStore,
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   horizontal: horizontalStore
@@ -216,7 +222,7 @@ A list of items where a single item can be selected.
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -227,13 +233,13 @@ A list of items where a single item can be selected.
 
 <style>
   .sterling-list {
-    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-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-Common__color);
+    color: var(--stsv-input__color);
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -252,17 +258,17 @@ A list of items where a single item can be selected.
   }
 
   .sterling-list: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-list.using-keyboard:focus-within {
-    border-color: var(--stsv-Common__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-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-list.composed,
@@ -292,7 +298,14 @@ A list of items where a single item can be selected.
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    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))
+    );
     content: '';
     bottom: 0;
     left: 0;

package/List.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;
         horizontal?: boolean | undefined;

package/List.types.d.ts

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

package/ListItem.svelte

@@ -1,16 +1,18 @@
 <script>import { getContext } from "svelte";
+import { readable, writable } from "svelte/store";
 import { LIST_CONTEXT_KEY } from "./List.constants";
-import { readable } 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,14 @@ export const focus = (options) => {
   }
 
   .sterling-list-item::after {
-    background: var(--stsv-Disabled__background);
+    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;

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,11 +6,8 @@ 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;
-export let variant = "regular";
 const instanceId = idGenerator.nextId("MenuButton");
 let buttonRef;
 let reference;
@@ -46,10 +43,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 +73,7 @@ const onClickOutside = (event) => {
   closeAllMenus?.();
 };
 setContext(MENU_ITEM_CONTEXT_KEY, {
+  depth: 1,
   openValues,
   rootValue: value,
   closeContainingMenu: () => {
@@ -101,8 +97,6 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-owns={menuId}
   data-value={value}
   data-root-value={value}
-  {variant}
-  {shape}
   on:blur
   on:click
   on:click={onClick}

package/MenuButton.svelte.d.ts

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        shape?: "circular" | "rounded" | "square" | undefined;
         value: string;
-        variant?: "regular" | "outline" | "ghost" | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -50,8 +48,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            shape: "circular" | "rounded" | "square";
-            variant: "regular" | "outline" | "ghost";
+            shape: any;
+            variant: any;
         };
         items: {};
     };

package/MenuItem.svelte

@@ -16,11 +16,12 @@ 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;
 export let role = "menuitem";
 export let text = void 0;
+export let value;
 const {
   isMenuBarItem,
   openValues = writable([]),
@@ -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,11 +3,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
-        value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
+        value: string;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/MenuItemDisplay.svelte

@@ -103,7 +103,14 @@ export let menuItemRole = "menuitem";
   }
 
   .sterling-menu-item-display::after {
-    background: var(--stsv-Disabled__background);
+    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;

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>