@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Label.svelte

@@ -1,101 +1,34 @@
-<script>import { onMount } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import {} from 'svelte';
 import Tooltip from './Tooltip.svelte';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-let htmlFor = undefined;
-export { htmlFor as for };
-/**
- * If true, clicking the label invokes a click on the content.
- * Needed only when the label is not associated with the content through containment or the `for`/`id` relationship.
- */
-export let forwardClick = false;
-/** The text to display in the label. Not used if the text slot is filled. */
-export let text = undefined;
-/** The status message to display. */
-export let message = undefined;
-/** When true, indicates a value is required. */
-export let required = false;
-/** The reason the value is required. */
-export let requiredReason = 'required';
-/** The status of the label. */
-export let status = 'none';
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the label appears above the content. */
-export let vertical = true;
+let { children, class: _class, for: _for, forwardClick = false, message, required, requiredIndicator = '*', requiredReason, text, ...rest } = $props();
 // ----- State ----- //
-let labelRef;
-let targetDisabled = false;
-let targetRef = null;
+let labelRef = $state(null);
+let targetRef = $state(null);
+let requiredRef = $state(null);
 const findTarget = () => {
     let candidate = null;
-    if (htmlFor) {
-        candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
+    if (_for) {
+        candidate = labelRef?.querySelector(`[id="${_for}"]`) || null;
     }
     if (!candidate) {
-        candidate = labelRef?.querySelector('a[href], ' +
-            'audio[controls], ' +
-            'button, ' +
-            'details, ' +
-            'div[contenteditable], ' +
-            'form, ' +
-            'input, ' +
-            'select, ' +
-            'textarea, ' +
-            'video[controls], ' +
-            '[tabindex]:not([tabindex="-1"])');
+        candidate =
+            labelRef?.querySelector('a[href], ' +
+                'audio[controls], ' +
+                'button, ' +
+                'details, ' +
+                'div[contenteditable], ' +
+                'form, ' +
+                'input, ' +
+                'select, ' +
+                'textarea, ' +
+                'video[controls], ' +
+                '[tabindex]:not([tabindex="-1"])') || null;
     }
     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, labelRef, htmlFor, findTarget();
-$: {
-    targetDisabled = isElementDisabled(targetRef);
-}
-const mutationCallback = (mutations) => {
-    let disabled = undefined;
-    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)) {
-                    // a mutation caused the target to be disabled
-                    disabled = true;
-                    break;
-                }
-                // a mutation caused the target to be enabled
-                disabled = false;
-            }
-        }
-    }
-    // if we found a mutation that changed disabled, then set targetDisabled
-    if (disabled !== undefined) {
-        targetDisabled = disabled;
-    }
-};
-let mutationObserver;
-onMount(() => {
-    mutationObserver = new MutationObserver(mutationCallback);
-    return () => mutationObserver?.disconnect();
-});
-$: {
-    mutationObserver?.disconnect();
-    if (targetRef) {
-        mutationObserver?.observe(targetRef, {
-            attributes: true
-        });
-    }
-}
 // ----- Methods ----- //
 export const click = () => {
     labelRef?.click();
@@ -107,91 +40,52 @@ export const focus = (options) => {
     labelRef?.focus(options);
 };
 // ----- Event Handlers ----- //
-const onClick = () => {
+const onClick = (event) => {
     if (forwardClick) {
         targetRef?.click();
     }
+    rest.onclick?.(event);
 };
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+{#snippet snippetOrText(item?: string | Snippet, _class?: string)}
+  {#if item}
+    {#if typeof item === 'string'}
+      <div class={_class}>{item}</div>
+    {:else}
+      <div class={_class}>
+        {@render item()}
+      </div>
+    {/if}
+  {/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <label
   bind:this={labelRef}
-  aria-disabled={targetDisabled}
-  class={`sterling-label ${variant}`}
-  class:disabled={targetDisabled}
+  class={['sterling-label', _class].filter(Boolean).join(' ')}
   class:using-keyboard={$usingKeyboard}
-  class:vertical
-  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}
+  for={_for}
+  {...rest}
+  onclick={onClick}
 >
-  {#if text || $$slots.text}
-    <slot
-      name="text"
-      disabled={targetDisabled}
-      for={htmlFor}
-      {forwardClick}
-      {required}
-      {text}
-      {variant}
-    >
-      <div class="text">
-        {text}
-      </div>
-    </slot>
-  {/if}
-  {#if $$slots.default}
+  {@render snippetOrText(text, 'text')}
+  {#if children}
     <div class="content">
-      <slot />
+      {@render children()}
     </div>
   {/if}
-  {#if message}
-    <slot name="message" disabled={targetDisabled} {message} {required} {status} {variant}>
-      <div
-        class="message"
-        class:info={status === 'info'}
-        class:success={status === 'success'}
-        class:warning={status === 'warning'}
-        class:error={status === 'danger'}
-      >
-        {message}
-      </div>
-    </slot>
-  {/if}
-  {#if required}
-    <slot name="required" {requiredReason} {variant}>
-      <Tooltip showOn="hover">
-        <span class="required-reason" slot="tip">{requiredReason}</span>
-        <div class="required">*</div>
+  {@render snippetOrText(message, 'message')}
+  <div class="required" bind:this={requiredRef}>
+    {#if required && requiredReason}
+      <Tooltip>
+        {@render snippetOrText(requiredIndicator, 'required')}
+        {#snippet tip()}
+          {@render snippetOrText(requiredReason, 'required-reason')}
+        {/snippet}
       </Tooltip>
-    </slot>
-  {/if}
+    {:else if required}
+      {@render snippetOrText(requiredIndicator, 'required')}
+    {/if}
+  </div>
 </label>

package/dist/Label.svelte.d.ts

@@ -1,82 +1,17 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        for?: string | undefined;
-        forwardClick?: boolean | undefined;
-        text?: string | undefined;
-        message?: string | undefined;
-        required?: boolean | undefined;
-        requiredReason?: string | undefined;
-        status?: string | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | 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: {
-        text: {
-            disabled: boolean;
-            for: string | undefined;
-            forwardClick: boolean;
-            required: boolean;
-            text: string | undefined;
-            variant: string;
-        };
-        default: {};
-        message: {
-            disabled: boolean;
-            message: string | undefined;
-            required: boolean;
-            status: string;
-            variant: string;
-        };
-        required: {
-            requiredReason: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import { type Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = HTMLLabelAttributes & {
+    forwardClick?: boolean | null;
+    message?: string | Snippet;
+    required?: boolean | null;
+    requiredIndicator?: string | Snippet;
+    requiredReason?: string | Snippet;
+    text?: string | Snippet;
 };
-export type LabelProps = typeof __propDef.props;
-export type LabelEvents = typeof __propDef.events;
-export type LabelSlots = typeof __propDef.slots;
-export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const Label: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/Link.svelte

@@ -1,11 +1,7 @@
-<script>export let href;
-export let disabled = false;
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+<svelte:options runes={true} />
+
+<script lang="ts">let { children, class: _class, disabled, ...rest } = $props();
 let linkRef;
-// ----- Methods ----- //
 export const blur = () => {
     linkRef?.blur();
 };
@@ -19,39 +15,11 @@ export const focus = (options) => {
 
 <a
   bind:this={linkRef}
-  class={`sterling-link ${variant}`}
+  class={['sterling-link', _class].filter(Boolean).join(' ')}
   class:disabled
-  {href}
-  on:blur
-  on:click
-  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:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}><slot {disabled} {href} {variant} /></a
+  {...rest}
 >
+  {#if children}
+    {@render children()}
+  {/if}
+</a>

package/dist/Link.svelte.d.ts

@@ -1,65 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href: string;
-        disabled?: boolean | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        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;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            href: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type Props = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
 };
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const Link: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/List.svelte

@@ -1,43 +1,26 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
 import { LIST_CONTEXT_KEY } from './List.constants';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/** If the list and all its items are disabled. */
-export let disabled = false;
-/** When true, items are arranged horizontally. */
-export let horizontal = false;
-/** The value of the currently selected item. */
-export let selectedValue = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, disabled = false, horizontal = false, selectedValue = $bindable(), onSelect, ...rest } = $props();
 let listRef;
 let lastSelectedItemRef;
-const disabledStore = writable(disabled);
-const horizontalStore = writable(horizontal);
-const selectedValueStore = writable(selectedValue);
-$: {
-    disabledStore.set(disabled);
-}
-$: {
-    horizontalStore.set(horizontal);
-}
-$: {
-    selectedValueStore.set(selectedValue);
-}
-$: {
-    selectedValue = $selectedValueStore;
-}
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-$: {
-    raiseSelect(selectedValue);
-}
-// ----- Methods ----- //
+let listContext = $state({
+    disabled,
+    selectedValue,
+    horizontal
+});
+$effect(() => {
+    listContext.disabled = disabled;
+});
+$effect(() => {
+    listContext.horizontal = horizontal;
+});
+$effect(() => {
+    listContext.selectedValue = selectedValue;
+});
+setContext(LIST_CONTEXT_KEY, listContext);
 export const blur = () => {
     listRef?.blur();
 };
@@ -51,8 +34,9 @@ export const scrollToSelectedItem = () => {
     const element = getSelectedItemElement();
     element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
-// ----- Focus ----- //
-// ----- Selection ----- //
+$effect(() => {
+    onSelect?.(selectedValue);
+});
 const isElementListItem = (candidate) => {
     return (candidate &&
         candidate.getAttribute('data-value') !== null &&
@@ -70,7 +54,7 @@ const getSelectedItemElement = () => {
     }
 };
 const selectItem = (value, element) => {
-    selectedValueStore.set(value);
+    selectedValue = value;
     lastSelectedItemRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
@@ -124,7 +108,6 @@ export const selectLastItem = () => {
     }
     return false;
 };
-// ----- Event Handlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         let candidate = event.target;
@@ -137,6 +120,7 @@ const onClick = (event) => {
             selectItem(candidateValue, candidate);
         }
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -189,65 +173,31 @@ const onKeydown = (event) => {
                 return false;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(LIST_CONTEXT_KEY, {
-    disabled: disabledStore,
-    selectedValue: selectedValueStore,
-    horizontal: horizontalStore
-});
 </script>
 
-<!--
-@component
-A list of items where a single item can be selected.
-  -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-role-supports-aria-props -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   aria-activedescendant={selectedValue}
   aria-disabled={disabled}
   aria-orientation={horizontal ? 'horizontal' : 'vertical'}
   bind:this={listRef}
-  class={`sterling-list ${variant}`}
+  class={['sterling-list', _class].filter(Boolean).join(' ')}
   class:disabled
   class:horizontal
   class:using-keyboard={$usingKeyboard}
   role="list"
   tabindex={0}
-  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:keydown={onKeydown}
-  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}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
 >
   <div class="container">
-    <slot {disabled} {horizontal} {selectedValue} {variant} />
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>