vanilla-jui 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "private": false,
   "description": "A lightweight vanilla JavaScript UI plugin library.",
   "keywords": [

package/src/components/accordion.ts

@@ -1,6 +1,5 @@
 import {
   bindAttr,
-  bindClass,
   createDeepStore,
   createRoot,
   flushSync,
@@ -36,7 +35,6 @@ export interface AccordionClassNames {
   arrow: string;
   panel: string;
   content: string;
-  active: string;
 }
 
 export type AccordionClassNameConfig = Partial<AccordionClassNames>;
@@ -107,7 +105,6 @@ const DEFAULT_CLASS_NAMES: AccordionClassNames = {
   arrow: 'header-arrow',
   panel: 'accordion-panel',
   content: 'panel-content',
-  active: 'is-active',
 };
 
 const ACCORDION_ITEMS_RULE = {
@@ -316,18 +313,18 @@ export class Accordion extends Component<
     this.bindingsDispose = createRoot((dispose) => {
       this.dom.headers.forEach((header) => {
         const name = header.dataset.accordionHeader || '';
-        bindClass(header, this.props.className.active, () =>
-          this.state.activeNames.includes(name)
-        );
+        // bindClass(header, this.props.className.active, () =>
+        //   this.state.activeNames.includes(name)
+        // );
         bindAttr(header, 'aria-expanded', () =>
-          this.state.activeNames.includes(name)
+          this.state.activeNames.includes(name) ? 'true' : 'false'
         );
       });
       this.dom.panels.forEach((panel, i) => {
         const name = this.dom.headers[i]?.dataset.accordionHeader || '';
-        bindClass(panel, this.props.className.active, () =>
-          this.state.activeNames.includes(name)
-        );
+        // bindClass(panel, this.props.className.active, () =>
+        //   this.state.activeNames.includes(name)
+        // );
         bindAttr(panel, 'aria-hidden', () =>
           this.state.activeNames.includes(name) ? 'false' : 'true'
         );

package/src/components/drop.ts

@@ -30,7 +30,6 @@ export type DropPosition =
 export interface DropClassNames {
   root: string;
   container: string;
-  active: string;
 }
 
 export type DropClassNameConfig = Partial<DropClassNames>;
@@ -48,7 +47,6 @@ export interface DropProps extends Record<string, unknown> {
   content?: RenderableContent<Drop>;
   className?: DropClassNameConfig;
   id?: string | null;
-  containerClassName?: string | null;
   delay?: number | DropDelay;
   hoverIntent?: boolean;
   onShown?: ((drop: Drop) => void | Promise<void>) | null;
@@ -63,7 +61,6 @@ interface ResolvedDropProps extends Record<string, unknown> {
   content: RenderableContent<Drop>;
   className: DropClassNames;
   id: string;
-  containerClassName: string | null;
   delay: number | DropDelay;
   hoverIntent: boolean;
   onShown: NonNullable<DropProps['onShown']> | null;
@@ -88,7 +85,6 @@ interface HoverIntentData {
 const DEFAULT_CLASS_NAMES: DropClassNames = {
   root: 'j-drop',
   container: 'drop-container',
-  active: 'is-active',
 };
 
 const DROP_PROPS_SCHEMA = {
@@ -140,7 +136,6 @@ const DROP_PROPS_SCHEMA = {
       return value;
     },
   },
-  containerClassName: { default: null, types: ['string', 'null'] },
   delay: { default: 0, types: ['number', 'object'] },
   hoverIntent: { default: true, type: 'boolean' },
   onShown: { default: null, types: ['function', 'null'] },
@@ -157,7 +152,6 @@ function normalizeProps(input: DropProps): ResolvedDropProps {
     content: props.content as RenderableContent<Drop>,
     className: props.className as DropClassNames,
     id: props.id as string,
-    containerClassName: props.containerClassName as string | null,
     delay: props.delay as number | DropDelay,
     hoverIntent: props.hoverIntent as boolean,
     onShown: props.onShown as ResolvedDropProps['onShown'],
@@ -165,12 +159,6 @@ function normalizeProps(input: DropProps): ResolvedDropProps {
   };
 }
 
-function joinClasses(
-  ...classes: Array<string | null | undefined | false>
-): string {
-  return classes.filter(Boolean).join(' ');
-}
-
 function normalizeDelay(delay: number | DropDelay): Required<DropDelay> {
   if (typeof delay === 'number' && delay >= 0) {
     return { show: delay, hide: delay };
@@ -232,12 +220,12 @@ export class Drop {
   }
 
   private buildDrop(props: ResolvedDropProps): void {
-    const { className, content, id, name, containerClassName } = props;
+    const { className, content, id, name } = props;
     const wrapper =
       isNode(content) && content.nodeType === Node.ELEMENT_NODE
         ? content
         : jsx('div', {
-            className: joinClasses(className.container, containerClassName),
+            className: className.container,
             'data-drop-container': name || id,
             children: normalizeContentNodes(content, this),
           });
@@ -433,7 +421,9 @@ export class Drop {
       this.root.remove();
     }
 
-    this.root.classList.toggle(this.props.className.active, visible);
+    this.root.setAttribute('aria-hidden', visible ? 'false' : 'true');
+    this.root.setAttribute('aria-expanded', visible ? 'true' : 'false');
+
     this.isVisible = visible;
   }
 

package/src/components/offcanvas.ts

@@ -18,7 +18,7 @@ import {
 } from '../utilities/dom.ts';
 
 export type OffcanvasDirection = 'top' | 'right' | 'bottom' | 'left';
-export type OffcanvasAnimation = 'slide' | 'push' | 'none';
+export type OffcanvasAnimation = 'slide' | 'none';
 
 export interface OffcanvasClassNames {
   root: string;
@@ -30,13 +30,7 @@ export interface OffcanvasClassNames {
   bottom: string;
   left: string;
   slide: string;
-  push: string;
   none: string;
-  pushBody: string;
-  pushTop: string;
-  pushRight: string;
-  pushBottom: string;
-  pushLeft: string;
 }
 
 export type OffcanvasClassNameConfig = Partial<OffcanvasClassNames>;
@@ -112,13 +106,7 @@ const DEFAULT_CLASS_NAMES: OffcanvasClassNames = {
   bottom: 'is-bottom',
   left: 'is-left',
   slide: 'is-slide',
-  push: 'is-push',
   none: 'is-none',
-  pushBody: 'offcanvas-push-body',
-  pushTop: 'offcanvas-push-top',
-  pushRight: 'offcanvas-push-right',
-  pushBottom: 'offcanvas-push-bottom',
-  pushLeft: 'offcanvas-push-left',
 };
 
 const OFFCANVAS_PROPS_SCHEMA = {
@@ -139,7 +127,7 @@ const OFFCANVAS_PROPS_SCHEMA = {
   animation: {
     default: 'slide',
     type: 'string',
-    enum: ['slide', 'push', 'none'],
+    enum: ['slide', 'none'],
   },
   bgClose: { default: true, type: 'boolean' },
   escClose: { default: true, type: 'boolean' },
@@ -373,44 +361,31 @@ export class Offcanvas extends Component<
   }
 
   private renderPanel(): void {
-    const { overlay, animation, direction, id, className } = this.props;
+    const { overlay, id, className } = this.props;
     const body = document.body;
 
     if (overlay && this._overlay) body.appendChild(this._overlay);
     if (this.dom.root) body.appendChild(this.dom.root);
 
     body.style.overflow = 'hidden';
-    if (animation === 'push') {
-      body.classList.add(className.pushBody);
-    }
 
     timer.start(`oc-show-${id}`, 10, () => {
       if (!this.dom.root) return;
       this._overlay?.classList.add(className.active);
-      if (animation === 'push') {
-        body.classList.add(className[`push${capitalizeDirection(direction)}`]);
-      }
       this.dom.root.classList.add(className.active);
     });
   }
 
   private removePanel(): void {
-    const { animation, direction, id, className } = this.props;
+    const { id, className } = this.props;
     const body = document.body;
 
     this._overlay?.classList.remove(className.active);
     this.dom.root?.classList.remove(className.active);
 
-    if (animation === 'push') {
-      body.classList.remove(className[`push${capitalizeDirection(direction)}`]);
-    }
-
     timer.start(`oc-remove-${id}`, 100, () => {
       this._overlay?.remove();
       this.dom.root?.remove();
-      if (animation === 'push') {
-        body.classList.remove(className.pushBody);
-      }
       body.style.overflow = '';
     });
   }
@@ -458,7 +433,7 @@ export class Offcanvas extends Component<
   }
 
   onDestroy(): void {
-    const { id, direction, className } = this.props;
+    const { id, className } = this.props;
 
     timer.cancel(`oc-show-${id}`);
     timer.cancel(`oc-remove-${id}`);
@@ -472,25 +447,11 @@ export class Offcanvas extends Component<
 
     const body = document.body;
     body.style.overflow = '';
-    body.classList.remove(
-      className.pushBody,
-      className[`push${capitalizeDirection(direction)}`]
-    );
 
     this._overlay = null;
   }
 }
 
-function capitalizeDirection(
-  direction: OffcanvasDirection
-): 'Top' | 'Right' | 'Bottom' | 'Left' {
-  return `${direction[0].toUpperCase()}${direction.slice(1)}` as
-    | 'Top'
-    | 'Right'
-    | 'Bottom'
-    | 'Left';
-}
-
 export function createOffcanvas(options: OffcanvasProps = {}): Offcanvas {
   return new Offcanvas(options);
 }

package/src/components/parabola.ts

@@ -53,8 +53,8 @@ interface ParabolaPath {
 }
 
 const DEFAULT_BALL: ParabolaBallOptions = {
-  color: 'var(--primary, #3e63dd)',
-  size: '10px',
+  color: 'var(--tone-solid)',
+  size: '12px',
 };
 
 const DEFAULT_CLASS_NAMES: ParabolaClassNames = {

package/src/components/tabs.ts

@@ -1,6 +1,5 @@
 import {
   bindAttr,
-  bindClass,
   createDeepStore,
   createRoot,
   flushSync,
@@ -43,7 +42,6 @@ export interface TabsClassNames {
   tab: string;
   panelWrap: string;
   panel: string;
-  active: string;
   disabled: string;
   dragging: string;
 }
@@ -163,7 +161,6 @@ const DEFAULT_CLASS_NAMES: TabsClassNames = {
   tab: 'tab-item',
   panelWrap: 'tab-panel',
   panel: 'panel-item',
-  active: 'is-active',
   disabled: 'is-disabled',
   dragging: 'dragging',
 };
@@ -389,33 +386,16 @@ export class Tabs extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
     this.bindingsDispose = createRoot((dispose) => {
       this.dom.tabs.forEach((tab, index) => {
         const name = tab.dataset.tabsTab || '';
-        bindClass(
-          tab,
-          this.props.className.active,
-          () => this.state.current.index === index
-        );
-        bindClass(tab, this.props.className.disabled, () =>
-          this.state.disabled.names.includes(name)
-        );
-        bindAttr(
-          tab,
-          'aria-selected',
-          () => this.state.current.index === index
+        bindAttr(tab, 'aria-selected', () =>
+          this.state.current.index === index ? 'true' : 'false'
         );
         bindAttr(tab, 'aria-disabled', () =>
-          this.state.disabled.names.includes(name)
+          this.state.disabled.names.includes(name) ? 'true' : 'false'
         );
       });
       this.dom.panels.forEach((panel, index) => {
-        bindClass(
-          panel,
-          this.props.className.active,
-          () => this.state.current.index === index
-        );
-        bindAttr(
-          panel,
-          'aria-hidden',
-          () => this.state.current.index !== index
+        bindAttr(panel, 'aria-hidden', () =>
+          this.state.current.index !== index ? 'true' : 'false'
         );
       });
       return dispose;

package/src/components/theme.ts

@@ -260,33 +260,36 @@ export class Theme {
       className: containerClass || className.panel,
       'data-theme-palette': 'root',
       children: [
-        jsx('div', {
-          className: className.closeWrap,
-          'data-theme-close-wrap': '',
-          style: {
-            display: 'flex',
-            justifyContent: 'center',
-          },
-          children: jsx('button', {
-            className: className.closeButton,
-            'data-action': 'close',
-            children: this.translate('b'),
-          }),
-        }),
+        // jsx('div', {
+        //   className: className.closeWrap,
+        //   'data-theme-close-wrap': '',
+        //   style: {
+        //     display: 'flex',
+        //     justifyContent: 'center',
+        //   },
+        //   children: jsx('button', {
+        //     className: className.closeButton,
+        //     'data-action': 'close',
+        //     children: this.translate('b'),
+        //   }),
+        // }),
         jsx('h3', {
           className: className.title,
           'data-theme-title': '',
-          children: this.translate('t'),
-        }),
-        jsx('p', {
-          className: className.description,
-          'data-theme-description': '',
           style: {
-            marginTop: 0,
-            fontSize: 'var(--text-sm, 0.875rem)',
+            margin: '0 0 1rem',
           },
-          children: this.translate('d'),
+          children: this.translate('t'),
         }),
+        // jsx('p', {
+        //   className: className.description,
+        //   'data-theme-description': '',
+        //   style: {
+        //     marginTop: 0,
+        //     fontSize: 'var(--text-sm, 0.875rem)',
+        //   },
+        //   children: this.translate('d'),
+        // }),
         jsx('div', {
           className: className.container,
           'data-theme-container': '',
@@ -373,7 +376,7 @@ export class Theme {
   private defaultPanelConfig(): ThemePanelGroup[] {
     return [
       {
-        title: this.translate('Theme'),
+        title: this.translate('Primary'),
         type: 'theme',
         buttons: [
           ['gray', this.translate('Gray')],

package/src/components/toast.ts

@@ -1,5 +1,7 @@
 import { jsx } from 'vanilla-signal';
+import { t } from 'vanilla-signal-i18n';
 
+import locales from '../locales/index.ts';
 import { randomId, timer, validateParam } from '../utilities/core.ts';
 import { q } from '../utilities/dom.ts';
 import { listen } from '../utilities/events.ts';
@@ -12,13 +14,12 @@ export interface ToastClassNames {
   toast: string;
   icon: string;
   message: string;
-  shown: string;
   hidden: string;
   lite: string;
   action: string;
   actions: string;
   button: string;
-  cancelButton: string;
+  closeButton: string;
   actionButton: string;
   info: string;
   success: string;
@@ -35,10 +36,11 @@ export interface ToastOptions {
 
 export interface ToastActionProps extends ToastOptions {
   text?: {
-    cancel?: string;
+    close?: string;
     action?: string;
   };
   onAction?: () => void | Promise<void>;
+  onClose?: () => void | Promise<void>;
 }
 
 interface ResolvedToastOptions {
@@ -50,13 +52,12 @@ const DEFAULT_CLASS_NAMES: ToastClassNames = {
   toast: 'j-toast',
   icon: 'toast-icon',
   message: 'toast-message',
-  shown: 'is-shown',
   hidden: 'is-hidden',
   lite: 'j-toast-lite',
   action: 'is-action',
   actions: 'toast-actions',
   button: 'j-button is-sm',
-  cancelButton: 'is-ghost',
+  closeButton: 'is-ghost',
   actionButton: 'is-outline',
   info: 'is-info',
   success: 'is-success',
@@ -135,6 +136,8 @@ export class Toast {
     const toast = jsx('div', {
       className: joinClasses(className.toast, className[type]),
       'data-toast': id,
+      role: 'alert',
+      'aria-atomic': 'true',
       children: [
         jsx('span', {
           className: className.icon,
@@ -152,7 +155,8 @@ export class Toast {
     Toast.classNames.set(toast, className);
     toastContainer.appendChild(toast);
 
-    Toast.setTimer(id, 'show', () => toast.classList.add(className.shown), 10);
+    const v = type === 'error' ? 'assertive' : 'polite';
+    Toast.setTimer(id, 'show', () => toast.setAttribute('aria-live', v), 10);
 
     if (duration > 0) {
       Toast.setTimer(id, 'hide', () => Toast.hide(toast), duration);
@@ -207,12 +211,11 @@ export class Toast {
   static hide(toast: HTMLElement | null | undefined): void {
     if (!toast) return;
 
-    const className = Toast.classNames.get(toast) || Toast.options.className;
     Toast.disposers.get(toast)?.();
     Toast.disposers.delete(toast);
 
-    toast.classList.remove(className.shown);
-    toast.classList.add(className.hidden);
+    toast.removeAttribute('aria-live');
+    toast.setAttribute('aria-hidden', 'true');
 
     const id = toast.dataset.toast || randomId();
     Toast.setTimer(
@@ -252,13 +255,19 @@ export class Toast {
     Toast.classNames.set(lite, className);
     document.body.appendChild(lite);
 
-    Toast.setTimer(id, 'show', () => lite.classList.add(className.shown), 10);
+    Toast.setTimer(
+      id,
+      'show',
+      () => lite.setAttribute('aria-live', 'polite'),
+      10
+    );
+
     Toast.setTimer(
       id,
       'hide',
       () => {
-        lite.classList.remove(className.shown);
-        lite.classList.add(className.hidden);
+        lite.removeAttribute('aria-live');
+        lite.setAttribute('aria-hidden', 'true');
         Toast.setTimer(id, 'remove', () => lite.remove(), 300);
       },
       duration
@@ -269,7 +278,8 @@ export class Toast {
 
   static action(message = '', props: ToastActionProps = {}): HTMLElement {
     validateParam('message', message, 'string', 'Toast.action');
-
+    const c = t('Close', locales);
+    const a = t('Confirm', locales);
     const className = Toast.resolveClassNames(props);
     const toastContainer = Toast.getOrCreateContainer(className);
     const id = randomId();
@@ -288,15 +298,20 @@ export class Toast {
           'data-toast-actions': id,
           children: [
             jsx('button', {
-              className: joinClasses(className.button, className.cancelButton),
-              children: props.text?.cancel || 'cancel',
-              'data-action': 'cancel',
-              onClick: () => Toast.hide(action),
+              className: joinClasses(className.button, className.closeButton),
+              children: props.text?.close || c,
+              'data-action': 'close',
+              'aria-label': props.text?.close || c,
+              onClick: async () => {
+                await props.onClose?.();
+                Toast.hide(action);
+              },
             }),
             jsx('button', {
               className: joinClasses(className.button, className.actionButton),
-              children: props.text?.action || 'action',
+              children: props.text?.action || a,
               'data-action': 'toast-action',
+              'aria-label': props.text?.action || a,
               onClick: async () => {
                 await props.onAction?.();
                 Toast.hide(action);
@@ -314,7 +329,7 @@ export class Toast {
       id,
       'show',
       () => {
-        action.classList.add(className.shown);
+        action.setAttribute('aria-live', 'polite');
         q<HTMLButtonElement>('[data-action="toast-action"]', action)?.focus();
       },
       10

package/src/components/tooltip.ts

@@ -4,14 +4,13 @@ import { type ResolveSchema, resolveProps } from '../utilities/core.ts';
 import { type DOMReference } from '../utilities/dom.ts';
 import {
   Drop,
-  type DropClassNameConfig,
   type DropDelay,
   type DropMode,
   type DropPosition,
 } from './drop.ts';
 
 export interface TooltipClassNames {
-  root: string;
+  container: string;
   message: string;
 }
 
@@ -24,7 +23,6 @@ export interface TooltipProps extends Record<string, unknown> {
   offset?: number;
   message?: string;
   className?: TooltipClassNameConfig;
-  dropClassName?: DropClassNameConfig;
   id?: string | null;
   delay?: number | DropDelay;
   hoverIntent?: boolean;
@@ -39,7 +37,6 @@ interface ResolvedTooltipProps extends Record<string, unknown> {
   offset: number;
   message: string;
   className: TooltipClassNames;
-  dropClassName: DropClassNameConfig;
   id: string | null;
   delay: number | DropDelay;
   hoverIntent: boolean;
@@ -48,7 +45,7 @@ interface ResolvedTooltipProps extends Record<string, unknown> {
 }
 
 const DEFAULT_CLASS_NAMES: TooltipClassNames = {
-  root: 'j-tooltip',
+  container: 'j-tooltip',
   message: 'tooltip-message',
 };
 
@@ -87,7 +84,6 @@ const TOOLTIP_OPTIONS_SCHEMA = {
       ...(value && typeof value === 'object' ? value : {}),
     }),
   },
-  dropClassName: { default: {}, type: 'object' },
   id: { default: null, types: ['string', 'null'] },
   delay: { default: 100, types: ['number', 'object'] },
   hoverIntent: { default: true, type: 'boolean' },
@@ -104,7 +100,6 @@ function normalizeProps(input: TooltipProps): ResolvedTooltipProps {
     offset: props.offset as number,
     message: props.message as string,
     className: props.className as TooltipClassNames,
-    dropClassName: props.dropClassName as DropClassNameConfig,
     id: props.id as string | null,
     delay: props.delay as number | DropDelay,
     hoverIntent: props.hoverIntent as boolean,
@@ -135,14 +130,13 @@ export class Tooltip {
       hoverIntent: settings.hoverIntent,
       onShown: settings.onShown,
       onHidden: settings.onHidden,
-      className: settings.dropClassName,
       content: this.buildContent(settings),
     });
   }
 
   private buildContent(settings: ResolvedTooltipProps): HTMLElement {
     return jsx('div', {
-      className: settings.className.root,
+      className: settings.className.container,
       'data-tooltip': settings.name || settings.id || '',
       children: jsx('div', {
         className: settings.className.message,

package/src/core/Component.ts

@@ -325,7 +325,7 @@ export default class Component<
    */
   destroy(): void {
     if (this.runtime.destroyed) return;
-    this.runtime = { destroyed: true };
+    this.runtime.destroyed = true;
 
     if (typeof this.onDestroy === 'function') this.onDestroy();
     this.emit('destroy');