@geoffcox/sterling-svelte 0.0.27 → 0.0.28

package/index.js

@@ -16,28 +16,27 @@ export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueA
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 // ----- Component constants ----- //
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
-export { FIELD_STATUSES } from './Field.constants';
+export { LABEL_STATUSES } from './Label.constants';
 export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
-export { PROGRESS_COLORFULS } from './Progress.constants';
+export { PROGRESS_STATUSES } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
 export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
-export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
+export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
 // ----- Components ----- //
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
-import Field from './Field.svelte';
+import Label from './Label.svelte';
 import HexColorSliders from './HexColorSliders.svelte';
 import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
-import Label from './Label.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
@@ -62,4 +61,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, ColorPicker, Dialog, Dropdown, Field, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -60,13 +60,12 @@
     "./ColorPicker.types": "./ColorPicker.types.js",
     "./Dialog.svelte": "./Dialog.svelte",
     "./Dropdown.svelte": "./Dropdown.svelte",
-    "./Field.constants": "./Field.constants.js",
-    "./Field.svelte": "./Field.svelte",
-    "./Field.types": "./Field.types.js",
     "./HexColorSliders.svelte": "./HexColorSliders.svelte",
     "./HslColorSliders.svelte": "./HslColorSliders.svelte",
     "./Input.svelte": "./Input.svelte",
+    "./Label.constants": "./Label.constants.js",
     "./Label.svelte": "./Label.svelte",
+    "./Label.types": "./Label.types.js",
     "./Link.constants": "./Link.constants.js",
     "./Link.svelte": "./Link.svelte",
     "./Link.types": "./Link.types.js",

package/theme/darkTheme.js

@@ -19,11 +19,10 @@ export const darkTheme = {
     'stsv-common__outline-style': 'solid',
     'stsv-common__outline-width': '2px',
     // disabled
-    'stsv-common__background-color--disabled': neutralColors.color5,
-    'stsv-common__border-color--disabled': neutralColors.color9,
-    'stsv-common__color--disabled': neutralColors.color6,
-    'stsv-common__background-color1--disabled': 'hsla(0, 0%, 0%, 0.2)',
-    'stsv-common__background-color2--disabled': `hsla(0, 0%, 100%, 0.2)`,
+    'stsv-common--disabled__stripe-color': 'hsla(0, 0%, 0%, 0.2)',
+    'stsv-common--disabled__stripe-color--alt': `hsla(0, 0%, 100%, 0.2)`,
+    'stsv-common--disabled__stripe-angle': '135deg',
+    'stsv-common--disabled__stripe-width': '3px',
     // ----- Common--colorful (15) ---- //
     'stsv-common--colorful__background-color': blueColors.color1,
     'stsv-common--colorful__border-color': blueColors.color8,
@@ -114,9 +113,9 @@ export const darkTheme = {
     'stsv-status--warning__background-color': darkStatusColors.warning.backgroundColor,
     'stsv-status--warning__border-color': darkStatusColors.warning.borderColor,
     'stsv-status--warning__color': darkStatusColors.warning.color,
-    'stsv-status--error__background-color': darkStatusColors.error.backgroundColor,
-    'stsv-status--error__border-color': darkStatusColors.error.borderColor,
-    'stsv-status--error__color': darkStatusColors.error.color,
+    'stsv-status--danger__background-color': darkStatusColors.error.backgroundColor,
+    'stsv-status--danger__border-color': darkStatusColors.error.borderColor,
+    'stsv-status--danger__color': darkStatusColors.error.color,
     // ----- Colorful (18) ---- //
     'stsv-Colorful__background-color': blueColors.color4,
     'stsv-Colorful__border-color': blueColors.color8,

package/theme/lightTheme.js

@@ -1,6 +1,6 @@
 import { blueColors, lightStatusColors, neutralColors } from './colors';
 export const lightTheme = {
-    // ----- Common (18) ---- //
+    // ----- Common ---- //
     'stsv-common__background-color': neutralColors.color12,
     'stsv-common__border-color': neutralColors.color5,
     'stsv-common__border-radius': '0',
@@ -19,12 +19,11 @@ export const lightTheme = {
     'stsv-common__outline-style': 'solid',
     'stsv-common__outline-width': '2px',
     // disabled
-    'stsv-common__background-color--disabled': neutralColors.color10,
-    'stsv-common__border-color--disabled': neutralColors.color7,
-    'stsv-common__color--disabled': neutralColors.color7,
-    'stsv-common__background-color1--disabled': 'hsla(0, 0%, 0%, 0.2)',
-    'stsv-common__background-color2--disabled': `hsla(0, 0%, 100%, 0.2)`,
-    // ----- Common--colorful (15) ---- //
+    'stsv-common--disabled__stripe-color': 'hsla(0, 0%, 0%, 0.2)',
+    'stsv-common--disabled__stripe-color--alt': `hsla(0, 0%, 100%, 0.2)`,
+    'stsv-common--disabled__stripe-angle': '135deg',
+    'stsv-common--disabled__stripe-width': '3px',
+    // ----- Common--colorful ---- //
     'stsv-common--colorful__background-color': blueColors.color12,
     'stsv-common--colorful__border-color': blueColors.color4,
     'stsv-common--colorful__color': blueColors.color3,
@@ -34,7 +33,7 @@ export const lightTheme = {
     'stsv-common--colorful__color--subtle': blueColors.color7,
     'stsv-common--colorful__background-color--faint': blueColors.color11,
     'stsv-common--colorful__color--faint': blueColors.color9,
-    // ----- Button (15) ----- //
+    // ----- Button ----- //
     'stsv-button__background-color': neutralColors.color10,
     'stsv-button__border-color': neutralColors.color5,
     'stsv-button__border-radius': '8px',
@@ -53,7 +52,7 @@ export const lightTheme = {
     'stsv-button__background-color--active': neutralColors.color8,
     'stsv-button__border-color--active': neutralColors.color3,
     'stsv-button__color--active': neutralColors.color1,
-    // ----- Button--colorful (12) ---- //
+    // ----- Button--colorful ---- //
     'stsv-button--colorful__background-color': blueColors.color6,
     'stsv-button--colorful__border-color': blueColors.color4,
     'stsv-button--colorful__color': blueColors.color11,
@@ -69,7 +68,7 @@ export const lightTheme = {
     'stsv-button--colorful__background-color--active': blueColors.color5,
     'stsv-button--colorful__border-color--active': blueColors.color3,
     'stsv-button--colorful__color--active': blueColors.color12,
-    // ----- Input (15) ----- //
+    // ----- Input ----- //
     'stsv-input__background-color': neutralColors.color11,
     'stsv-input__border-color': neutralColors.color5,
     'stsv-input__border-radius': '3px',
@@ -88,7 +87,7 @@ export const lightTheme = {
     'stsv-input__background-color--selected': neutralColors.color9,
     'stsv-input__border-color--selected': neutralColors.color3,
     'stsv-input__color--selected': neutralColors.color2,
-    // ----- Input--colorful (12) ---- //
+    // ----- Input--colorful ---- //
     'stsv-input--colorful__background-color': blueColors.color11,
     'stsv-input--colorful__border-color': blueColors.color4,
     'stsv-input--colorful__color': blueColors.color2,
@@ -104,7 +103,7 @@ export const lightTheme = {
     'stsv-input--colorful__background-color--selected': blueColors.color9,
     'stsv-input--colorful__border-color--selected': blueColors.color3,
     'stsv-input--colorful__color--selected': blueColors.color2,
-    // ----- Status (12) ----- //
+    // ----- Status ----- //
     'stsv-status--info__background-color': lightStatusColors.info.backgroundColor,
     'stsv-status--info__border-color': lightStatusColors.info.borderColor,
     'stsv-status--info__color': lightStatusColors.info.color,
@@ -114,7 +113,7 @@ export const lightTheme = {
     'stsv-status--warning__background-color': lightStatusColors.warning.backgroundColor,
     'stsv-status--warning__border-color': lightStatusColors.warning.borderColor,
     'stsv-status--warning__color': lightStatusColors.warning.color,
-    'stsv-status--error__background-color': lightStatusColors.error.backgroundColor,
-    'stsv-status--error__border-color': lightStatusColors.error.borderColor,
-    'stsv-status--error__color': lightStatusColors.error.color
+    'stsv-status--danger__background-color': lightStatusColors.error.backgroundColor,
+    'stsv-status--danger__border-color': lightStatusColors.error.borderColor,
+    'stsv-status--danger__color': lightStatusColors.error.color
 };

package/Field.constants.d.ts

@@ -1 +0,0 @@
-export declare const FIELD_STATUSES: string[];

package/Field.constants.js

@@ -1 +0,0 @@
-export const FIELD_STATUSES = ['none', 'info', 'success', 'warning', 'error'];

package/Field.svelte

@@ -1,265 +0,0 @@
-<script>import Tooltip from "./Tooltip.svelte";
-import { usingKeyboard } from "./stores/usingKeyboard";
-export let forwardClick = false;
-let htmlFor = void 0;
-export { htmlFor as for };
-export let label = void 0;
-export let message = void 0;
-export let required = false;
-export let requiredReason = "This field is required";
-export let status = "none";
-let fieldRef;
-let targetDisabled = false;
-let targetRef = null;
-const findTarget = () => {
-  let candidate = null;
-  if (htmlFor) {
-    candidate = fieldRef?.querySelector(`[id="${htmlFor}"]`);
-  }
-  if (!candidate) {
-    candidate = fieldRef?.querySelector(
-      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
-    );
-  }
-  targetRef = candidate;
-};
-const isElementDisabled = (element) => {
-  if (element) {
-    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
-  }
-  return false;
-};
-$:
-  $$slots.default, fieldRef, htmlFor, findTarget();
-$: {
-  targetDisabled = isElementDisabled(targetRef);
-}
-const mutationCallback = (mutations) => {
-  let disabled = void 0;
-  for (let i = 0; i < mutations.length; i++) {
-    const mutation = mutations[i];
-    if (mutation.type === "attributes") {
-      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
-        if (isElementDisabled(targetRef)) {
-          disabled = true;
-          break;
-        }
-        disabled = false;
-      }
-    }
-  }
-  if (disabled !== void 0) {
-    targetDisabled = disabled;
-  }
-};
-let mutationObserver = new MutationObserver(mutationCallback);
-$: {
-  mutationObserver.disconnect();
-  if (targetRef) {
-    mutationObserver.observe(targetRef, {
-      attributes: true
-    });
-  }
-}
-export const click = () => {
-  fieldRef?.click();
-};
-export const blur = () => {
-  fieldRef?.blur();
-};
-export const focus = (options) => {
-  fieldRef?.focus(options);
-};
-const onClick = () => {
-  if (forwardClick) {
-    targetRef?.click();
-  }
-};
-</script>
-
-<label
-  bind:this={fieldRef}
-  aria-disabled={targetDisabled}
-  class="sterling-field"
-  class:disabled={targetDisabled}
-  class:using-keyboard={$usingKeyboard}
-  for={htmlFor}
-  on:blur
-  on:click
-  on:click={onClick}
-  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
-  {...$$restProps}
->
-  {#if label || $$slots.label}
-    <slot name="label" disabled={targetDisabled} for={htmlFor} {forwardClick} {label} {required}>
-      <div class="label-text">
-        {label}
-      </div>
-    </slot>
-  {/if}
-  {#if $$slots.default}
-    <div class="content">
-      <slot />
-    </div>
-  {/if}
-  {#if message}
-    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
-      <div
-        class="message"
-        class:info={status === 'info'}
-        class:success={status === 'success'}
-        class:warning={status === 'warning'}
-        class:error={status === 'error'}
-      >
-        {message}
-      </div>
-    </slot>
-  {/if}
-  {#if required}
-    <slot name="required" requiredTip={requiredReason}>
-      <Tooltip showOn="hover">
-        <span class="required-tip" slot="tip">{requiredReason}</span>
-        <div class="required">*</div>
-      </Tooltip>
-    </slot>
-  {/if}
-</label>
-
-<style>
-  .sterling-field {
-    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);
-    display: flex;
-    flex-direction: column;
-    font: inherit;
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-field:not(.disabled):hover {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-field.using-keyboard:focus-within {
-    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-field.disabled {
-    cursor: not-allowed;
-  }
-
-  .sterling-field.disabled * {
-    cursor: not-allowed;
-  }
-
-  .label-text {
-    color: var(--stsv-common__color--secondary);
-    font-size: 0.8em;
-    margin: 0.5em 0.7em 0.2em 0.2em;
-  }
-
-  .label-text:empty {
-    margin: 0;
-  }
-
-  .content {
-    display: grid;
-  }
-
-  .message {
-    box-sizing: border-box;
-    font-size: 0.8em;
-    background-color: var(--stsv-common__background-color--secondary);
-    color: var(--stsv-common__color--secondary);
-    padding: 0.5em;
-    width: 100%;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .message.info {
-    background-color: var(--stsv-status--info__background-color);
-    border-color: var(--stsv-status--info__border-color);
-    color: var(--stsv-status--info__color);
-  }
-
-  .message.success {
-    background-color: var(--stsv-status--success__background-color);
-    border-color: var(--stsv-status--success__border-color);
-    color: var(--stsv-status--success__color);
-  }
-
-  .message.warning {
-    background-color: var(--stsv-status--warning__background-color);
-    border-color: var(--stsv-status--warning__border-color);
-    color: var(--stsv-status--warning__color);
-  }
-
-  .message.error {
-    background-color: var(--stsv-status--error__background-color);
-    border-color: var(--stsv_--error-color);
-    color: var(--stsv-status--error__color);
-  }
-
-  .required {
-    text-align: center;
-    font-weight: bold;
-    box-sizing: border-box;
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .required-tip {
-    display: block;
-    padding: 4px;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-field,
-    .sterling-field::after,
-    .message {
-      transition: none;
-    }
-  }
-</style>

package/Field.svelte.d.ts

@@ -1,75 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        forwardClick?: boolean | undefined;
-        for?: string | undefined;
-        label?: 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: {
-        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: {
-        label: {
-            disabled: boolean;
-            for: string | undefined;
-            forwardClick: boolean;
-            label: string | undefined;
-            required: boolean;
-        };
-        default: {};
-        message: {
-            disabled: boolean;
-            message: string | undefined;
-            required: boolean;
-            status: string;
-        };
-        required: {
-            requiredTip: string;
-        };
-    };
-};
-export type FieldProps = typeof __propDef.props;
-export type FieldEvents = typeof __propDef.events;
-export type FieldSlots = typeof __propDef.slots;
-export default class Field extends SvelteComponentTyped<FieldProps, FieldEvents, FieldSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/Field.types.d.ts

@@ -1,4 +0,0 @@
-import type { FIELD_STATUSES } from './Field.constants';
-type FieldStatusTuple = typeof FIELD_STATUSES;
-export type FieldStatus = FieldStatusTuple[number];
-export {};