@geoffcox/sterling-svelte 2.0.4 → 2.0.6

package/dist/Label.svelte

@@ -1,37 +1,37 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import type { HTMLLabelAttributes, MouseEventHandler } from 'svelte/elements';
   import Tooltip from './Tooltip.svelte';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { LabelProps } from './Label.types';
 
-  type Props = HTMLLabelAttributes & {
-    forwardClick?: boolean | null;
-    message?: Snippet | string;
-    required?: boolean | null;
-    requiredIndicator?: Snippet | string;
-    requiredReason?: Snippet | string;
-    text?: Snippet | string;
-  };
+  //TODO: All component props types should be exported on index
 
   let {
     children,
     class: _class,
     for: _for,
+    formValidation,
     forwardClick = false,
+    onValidation,
     message,
     required,
     requiredIndicator = '*',
     requiredReason,
     text,
     ...rest
-  }: Props = $props();
+  }: LabelProps = $props();
 
   // ----- State ----- //
 
   let labelRef: HTMLLabelElement | null = $state(null);
   let targetRef: HTMLElement | null = $state(null);
+  let targetRequired: boolean | null | undefined = $state(false);
+  let valid: boolean | null | undefined = $state(true);
+  let validationMessage: string | Snippet | undefined = $state(undefined);
+  let validationClass: string | undefined = $state();
 
   const findTarget = () => {
     let candidate: HTMLElement | null = null;
@@ -74,12 +74,93 @@
 
   // ----- Event Handlers ----- //
 
+  const updateValidity = () => {
+    if (formValidation) {
+      const validationTarget = targetRef as HTMLObjectElement;
+      if (validationTarget) {
+        const newValid = !!validationTarget.checkValidity?.();
+        const newValidity = validationTarget.validity;
+        const newValidationMessage = validationTarget.validationMessage;
+
+        const validationResult = onValidation?.(newValidity, newValidationMessage);
+
+        valid = validationResult?.valid || newValid;
+        validationClass = validationResult?.validationClass || valid ? undefined : 'error';
+        validationMessage = validationResult?.validationMessage || newValidationMessage;
+
+        // prevent the browser from showing a tooltip validation message
+        validationTarget.setCustomValidity?.('');
+      }
+    } else {
+      valid = true;
+      validationMessage = undefined;
+    }
+  };
+
   const onClick: MouseEventHandler<HTMLLabelElement> = (event) => {
     if (forwardClick) {
       targetRef?.click();
     }
     rest.onclick?.(event);
   };
+
+  const updateTargetRequired = () => {
+    targetRequired = targetRef && 'required' in targetRef && !!targetRef.required;
+  };
+
+  $inspect(targetRequired);
+
+  const onTargetAttributeChanged: MutationCallback = (mutations) => {
+    if (
+      mutations.findIndex(
+        (mutation: MutationRecord) =>
+          mutation.type === 'attributes' && mutation.attributeName === 'required'
+      ) !== -1
+    ) {
+      updateTargetRequired();
+    }
+  };
+
+  onMount(() => {
+    findTarget();
+
+    const observer = new MutationObserver(onTargetAttributeChanged);
+
+    if (targetRef) {
+      observer.observe(targetRef, {
+        attributes: true,
+        attributeFilter: ['required']
+      });
+
+      updateTargetRequired();
+
+      if ('on' + 'input' in targetRef) {
+        targetRef.addEventListener('input', updateValidity);
+      }
+      if ('on' + 'change' in targetRef) {
+        targetRef?.addEventListener('change', updateValidity);
+      }
+      if ('on' + 'blur' in targetRef) {
+        targetRef?.addEventListener('blur', updateValidity);
+      }
+    }
+
+    return () => {
+      if (targetRef) {
+        observer.disconnect();
+
+        if ('on' + 'input' in targetRef) {
+          targetRef.removeEventListener('input', updateValidity);
+        }
+        if ('on' + 'change' in targetRef) {
+          targetRef?.removeEventListener('change', updateValidity);
+        }
+        if ('on' + 'blur' in targetRef) {
+          targetRef?.removeEventListener('blur', updateValidity);
+        }
+      }
+    };
+  });
 </script>
 
 {#snippet stringOrSnippet(item?: string | Snippet)}
@@ -95,7 +176,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <label
   bind:this={labelRef}
-  class={['sterling-label', _class]}
+  class={['sterling-label', validationClass, _class]}
   class:using-keyboard={$usingKeyboard}
   for={_for}
   {...rest}
@@ -111,25 +192,31 @@
       {@render children()}
     </div>
   {/if}
-  {#if message}
+  {#if validationMessage}
+    <div class="message validation">
+      {@render stringOrSnippet(validationMessage)}
+    </div>
+  {:else if message}
     <div class="message">
       {@render stringOrSnippet(message)}
     </div>
   {/if}
-  {#if required && requiredIndicator && requiredReason}
-    <Tooltip>
+  {#if required || (formValidation && targetRequired)}
+    {#if requiredIndicator && requiredReason}
+      <Tooltip class="sterling-label-tooltip">
+        <div class="required">
+          {@render stringOrSnippet(requiredIndicator)}
+        </div>
+        {#snippet tip()}
+          <div class="required-reason">
+            {@render stringOrSnippet(requiredReason)}
+          </div>
+        {/snippet}
+      </Tooltip>
+    {:else if requiredIndicator}
       <div class="required">
         {@render stringOrSnippet(requiredIndicator)}
       </div>
-      {#snippet tip()}
-        <div class="required-reason">
-          {@render stringOrSnippet(requiredReason)}
-        </div>
-      {/snippet}
-    </Tooltip>
-  {:else if required && requiredIndicator}
-    <div class="required">
-      {@render stringOrSnippet(requiredIndicator)}
-    </div>
+    {/if}
   {/if}
 </label>

package/dist/Label.svelte.d.ts

@@ -1,14 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLLabelAttributes } from 'svelte/elements';
-type Props = HTMLLabelAttributes & {
-    forwardClick?: boolean | null;
-    message?: Snippet | string;
-    required?: boolean | null;
-    requiredIndicator?: Snippet | string;
-    requiredReason?: Snippet | string;
-    text?: Snippet | string;
-};
-declare const Label: import("svelte").Component<Props, {
+import type { LabelProps } from './Label.types';
+declare const Label: import("svelte").Component<LabelProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Label.types.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+export type LabelValidationResult = {
+    valid: boolean;
+    validationClass?: string;
+    validationMessage?: Snippet | string;
+};
+export type LabelValidationCallback = (validity: ValidityState, validationMessage: string) => LabelValidationResult | undefined;
+export type LabelProps = HTMLLabelAttributes & {
+    formValidation?: boolean | null;
+    forwardClick?: boolean | null;
+    message?: Snippet | string;
+    onValidation?: LabelValidationCallback;
+    required?: boolean | null;
+    requiredIndicator?: Snippet | string;
+    requiredReason?: Snippet | string;
+    text?: Snippet | string;
+};

package/dist/Label.types.js

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

package/dist/Link.svelte

@@ -1,13 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import type { LinkProps } from './Link.types';
 
-  type Props = HTMLAnchorAttributes & {
-    disabled?: boolean | null;
-  };
-
-  let { children, class: _class, disabled, ...rest }: Props = $props();
+  let { children, class: _class, disabled, ...rest }: LinkProps = $props();
 
   let linkRef: HTMLAnchorElement;
 

package/dist/Link.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-type Props = HTMLAnchorAttributes & {
-    disabled?: boolean | null;
-};
-declare const Link: import("svelte").Component<Props, {
+import type { LinkProps } from './Link.types';
+declare const Link: import("svelte").Component<LinkProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Link.types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+export type LinkProps = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
+};

package/dist/Link.types.js

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

package/dist/List.svelte

@@ -2,18 +2,11 @@
 
 <script lang="ts">
   import { setContext } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { LIST_CONTEXT_KEY } from './List.constants';
-  import type { ListContext } from './List.types';
+  import type { ListContext, ListProps } from './List.types';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    horizontal?: boolean | null;
-    selectedValue?: string;
-    onSelect?: (value?: string) => void;
-  };
-
   let {
     children,
     class: _class,
@@ -22,7 +15,7 @@
     selectedValue = $bindable(),
     onSelect,
     ...rest
-  }: Props = $props();
+  }: ListProps = $props();
 
   let listRef: HTMLDivElement;
   let lastSelectedItemRef: HTMLElement;

package/dist/List.svelte.d.ts

@@ -1,11 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    horizontal?: boolean | null;
-    selectedValue?: string;
-    onSelect?: (value?: string) => void;
-};
-declare const List: import("svelte").Component<Props, {
+import type { ListProps } from './List.types';
+declare const List: import("svelte").Component<ListProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/List.types.d.ts

@@ -1,5 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
 export type ListContext = {
     disabled?: boolean | null | undefined;
     selectedValue?: string;
     horizontal?: boolean | null | undefined;
 };
+export type ListProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
+};

package/dist/ListItem.svelte

@@ -2,16 +2,11 @@
 
 <script lang="ts">
   import { getContext } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
   import { LIST_CONTEXT_KEY } from './List.constants';
   import type { ListContext } from './List.types';
+  import type { ListItemProps } from './ListItem.types';
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    value?: string;
-  };
-
-  let { children, class: _class, disabled, value, ...rest }: Props = $props();
+  let { children, class: _class, disabled, value, ...rest }: ListItemProps = $props();
 
   const listContext = getContext<ListContext>(LIST_CONTEXT_KEY);
 

package/dist/ListItem.svelte.d.ts

@@ -1,9 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    value?: string;
-};
-declare const ListItem: import("svelte").Component<Props, {
+import type { ListItemProps } from './ListItem.types';
+declare const ListItem: import("svelte").Component<ListItemProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/ListItem.types.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type ListItemProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
+};

package/dist/ListItem.types.js

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

package/dist/Menu.svelte

@@ -2,16 +2,14 @@
 
 <script lang="ts">
   import { getContext } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
   import { slide, type SlideParams, type TransitionConfig } from 'svelte/transition';
   import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
   import type { MenuItemContext } from './MenuItem.types';
   import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
   import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+  import type { MenuProps } from './Menu.types';
 
-  type Props = HTMLAttributes<HTMLDivElement>;
-
-  let { children, class: _class, ...rest }: Props = $props();
+  let { children, class: _class, ...rest }: MenuProps = $props();
 
   let menuRef: HTMLDivElement;
   let menuItemsRef: HTMLDivElement;

package/dist/Menu.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement>;
-declare const Menu: import("svelte").Component<Props, {
+import type { MenuProps } from './Menu.types';
+declare const Menu: import("svelte").Component<MenuProps, {
     focus: (options?: FocusOptions) => void;
     blur: () => void;
     focusFirstMenuItem: () => boolean;

package/dist/Menu.types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type MenuProps = HTMLAttributes<HTMLDivElement>;

package/dist/Menu.types.js

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

package/dist/MenuBar.svelte

@@ -2,23 +2,16 @@
 
 <script lang="ts">
   import { setContext } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
   import { clickOutside } from './actions/clickOutside';
   import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
-  import type { MenuBarContext } from './MenuBar.types';
+  import type { MenuBarContext, MenuBarProps } from './MenuBar.types';
   import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
   import type { MenuItemContext } from './MenuItem.types';
   import { isElementEnabledMenuItem } from './MenuItem.utils';
 
   const uuid = $props.id();
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    onClose?: (value: string) => void;
-    onOpen?: (value: string) => void;
-    onSelect?: (value: string) => void;
-  };
-
-  let { class: _class, children, onClose, onOpen, onSelect, ...rest }: Props = $props();
+  let { class: _class, children, onClose, onOpen, onSelect, ...rest }: MenuBarProps = $props();
 
   const rootValue = `MenuBar-${uuid}`;
   let openValues: string[] = $state([]);

package/dist/MenuBar.svelte.d.ts

@@ -1,10 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    onClose?: (value: string) => void;
-    onOpen?: (value: string) => void;
-    onSelect?: (value: string) => void;
-};
-declare const MenuBar: import("svelte").Component<Props, {
+import type { MenuBarProps } from './MenuBar.types';
+declare const MenuBar: import("svelte").Component<MenuBarProps, {
     blur: () => void;
     focus: (options?: FocusOptions) => void;
 }, "">;

package/dist/MenuBar.types.d.ts

@@ -1,4 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
 export type MenuBarContext = {
     openPreviousMenuBarItem?: () => void;
     openNextMenuBarItem?: () => void;
 };
+export type MenuBarProps = HTMLAttributes<HTMLDivElement> & {
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+};

package/dist/MenuButton.svelte

@@ -10,20 +10,10 @@
   import type { MenuItemContext } from './MenuItem.types';
   import Popover from './Popover.svelte';
   import type { PopoverPlacement } from './Popover.types';
+  import type { MenuButtonProps } from './MenuButton.types';
 
   const uuid = $props.id();
 
-  type Props = HTMLButtonAttributes & {
-    items: Snippet;
-    menuClass?: string;
-    onOpen?: (value: string) => void;
-    onClose?: (value: string) => void;
-    onSelect?: (value: string) => void;
-    open?: boolean | null | undefined;
-    popoverPlacement?: PopoverPlacement;
-    value?: string;
-  };
-
   let {
     children,
     class: _class,
@@ -36,7 +26,7 @@
     popoverPlacement = 'bottom-start',
     value,
     ...rest
-  }: Props = $props();
+  }: MenuButtonProps = $props();
 
   const instanceId = `MenuButton-${uuid}`;
 

package/dist/MenuButton.svelte.d.ts

@@ -1,17 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { PopoverPlacement } from './Popover.types';
-type Props = HTMLButtonAttributes & {
-    items: Snippet;
-    menuClass?: string;
-    onOpen?: (value: string) => void;
-    onClose?: (value: string) => void;
-    onSelect?: (value: string) => void;
-    open?: boolean | null | undefined;
-    popoverPlacement?: PopoverPlacement;
-    value?: string;
-};
-declare const MenuButton: import("svelte").Component<Props, {
+import type { MenuButtonProps } from './MenuButton.types';
+declare const MenuButton: import("svelte").Component<MenuButtonProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/MenuButton.types.d.ts

@@ -0,0 +1,13 @@
+import type { PopoverPlacement } from './Popover.types';
+import type { ButtonProps } from './Button.types';
+import type { Snippet } from 'svelte';
+export type MenuButtonProps = ButtonProps & {
+    items: Snippet;
+    menuClass?: string;
+    onOpen?: (value: string) => void;
+    onClose?: (value: string) => void;
+    onSelect?: (value: string) => void;
+    open?: boolean | null | undefined;
+    popoverPlacement?: PopoverPlacement;
+    value?: string;
+};

package/dist/MenuButton.types.js

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

package/dist/MenuItem.svelte

@@ -1,36 +1,19 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { getContext, setContext, tick, type Snippet } from 'svelte';
-  import type {
-    HTMLButtonAttributes,
-    KeyboardEventHandler,
-    MouseEventHandler
-  } from 'svelte/elements';
+  import { getContext, setContext, tick } from 'svelte';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import Menu from './Menu.svelte';
   import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
   import type { MenuBarContext } from './MenuBar.types';
   import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
-  import type { MenuItemContext, MenuItemRole } from './MenuItem.types';
+  import type { MenuItemContext, MenuItemProps } from './MenuItem.types';
   import { isElementEnabledMenuItem } from './MenuItem.utils';
   import Popover from './Popover.svelte';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
 
   const uuid = $props.id();
 
-  type Props = HTMLButtonAttributes & {
-    checked?: boolean | null;
-    item?: Snippet;
-    menuClass?: string;
-    onClose?: (value: string) => void;
-    onOpen?: (value: string) => void;
-    onSelect?: (value: string) => void;
-    role?: MenuItemRole;
-    shortcut?: string | Snippet;
-    text?: string | Snippet;
-    value: string;
-  };
-
   let {
     checked,
     children,
@@ -46,7 +29,7 @@
     shortcut,
     value,
     ...rest
-  }: Props = $props();
+  }: MenuItemProps = $props();
 
   const menuItemContext = getContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY) || {};
 

package/dist/MenuItem.svelte.d.ts

@@ -1,19 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { MenuItemRole } from './MenuItem.types';
-type Props = HTMLButtonAttributes & {
-    checked?: boolean | null;
-    item?: Snippet;
-    menuClass?: string;
-    onClose?: (value: string) => void;
-    onOpen?: (value: string) => void;
-    onSelect?: (value: string) => void;
-    role?: MenuItemRole;
-    shortcut?: string | Snippet;
-    text?: string | Snippet;
-    value: string;
-};
-declare const MenuItem: import("svelte").Component<Props, {
+import type { MenuItemProps } from './MenuItem.types';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/MenuItem.types.d.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { MENU_ITEM_ROLES } from './MenuItem.constants';
 type MenuItemRoleTuple = typeof MENU_ITEM_ROLES;
 export type MenuItemRole = MenuItemRoleTuple[number];
@@ -17,4 +19,16 @@ export type MenuItemContext = {
     onClose?: (value: string) => void;
     onSelect?: (value: string) => void;
 };
+export type MenuItemProps = HTMLButtonAttributes & {
+    checked?: boolean | null;
+    item?: Snippet;
+    menuClass?: string;
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+    role?: MenuItemRole;
+    shortcut?: string | Snippet;
+    text?: string | Snippet;
+    value: string;
+};
 export {};

package/dist/MenuSeparator.svelte

@@ -1,11 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { MenuSeparatorProps } from './MenuSeparator.types';
 
-  type Props = HTMLAttributes<HTMLDivElement>;
-
-  let { class: _class, ...rest }: Props = $props();
+  let { class: _class, ...rest }: MenuSeparatorProps = $props();
 </script>
 
 <div class={['sterling-menu-separator', _class]} role="separator" {...rest}></div>

package/dist/MenuSeparator.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement>;
-declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+import type { MenuSeparatorProps } from './MenuSeparator.types';
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "">;
 type MenuSeparator = ReturnType<typeof MenuSeparator>;
 export default MenuSeparator;

package/dist/MenuSeparator.types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type MenuSeparatorProps = HTMLAttributes<HTMLDivElement>;