vanilla-jui 1.7.27 → 1.7.28

package/src/css/themes/default/menu.css

@@ -45,7 +45,7 @@
 
     text-decoration: underline;
     text-decoration-style: wavy;
-    text-decoration-color: var(--state-danger);
+    text-decoration-color: var(--state-error);
     text-underline-offset: 4px;
     padding: 4px 1rem;
 
@@ -54,7 +54,7 @@
   }
 
   .j-menu .menu .menu-item:not(:has(a)):hover {
-    background: var(--state-danger-subtle);
+    background: var(--state-error-subtle);
     border-radius: 4px;
   }
 
@@ -63,8 +63,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    background: var(--state-danger);
-    color: var(--state-danger-fg);
+    background: var(--state-error);
+    color: var(--state-error-fg);
     font-size: 12px;
     padding: 0 4px;
     border-radius: 4px;
@@ -95,11 +95,11 @@
     height: var(--menu-item-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a {
+  .j-menu .menu .menu-item.menu-item-has-children>a {
     position: relative;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a::after {
+  .j-menu .menu .menu-item.menu-item-has-children>a::after {
     /* width: 0; */
     /* height: 0; */
     /* vertical-align: middle; */
@@ -111,7 +111,7 @@
     border-top: 4px solid currentColor;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children:hover > a::after {
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a::after {
     transform: rotate(180deg);
   }
 
@@ -124,11 +124,9 @@
     background-color: var(--ui-bg-subtle);
 
     @supports (color: color-mix(in srgb, red 50%, blue)) {
-      background-color: color-mix(
-        in srgb,
-        var(--ui-bg-subtle) 75%,
-        transparent
-      );
+      background-color: color-mix(in srgb,
+          var(--ui-bg-subtle) 75%,
+          transparent);
     }
 
     backdrop-filter: blur(4px);
@@ -150,36 +148,23 @@
     white-space: normal;
   }
 
-  .j-menu .menu > .menu-item.current-menu-item > a,
-  .j-menu .menu > .menu-item.current-menu-ancestor > a {
+  .j-menu .menu>.menu-item.current-menu-item>a,
+  .j-menu .menu>.menu-item.current-menu-ancestor>a {
     color: var(--tone-solid);
   }
 
-  .j-menu
-    .menu
-    .menu-item.current-menu-item
-    > .sub-menu
-    > .menu-item:not(.current-menu-item)
-    a {
+  .j-menu .menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item) a {
     color: inherit;
   }
 
-  .j-menu
-    .menu-item.current-menu-item
-    > .sub-menu
-    > .menu-item:not(.current-menu-item):hover
-    a {
+  .j-menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item):hover a {
     color: var(--tone-fg);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a,
   .j-menu .menu .menu-item a:hover,
-  .j-menu .menu .menu-item.menu-item-has-children:hover > a,
-  .j-menu
-    .menu-item.menu-item-has-children:hover
-    > .sub-menu
-    > .menu-item.current-menu-item
-    a {
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a,
+  .j-menu .menu-item.menu-item-has-children:hover>.sub-menu>.menu-item.current-menu-item a {
     background: var(--tone-soft);
     color: var(--tone-text);
   }
@@ -189,21 +174,18 @@
     z-index: var(--z-submenu);
   }
 
-  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
-    .menu
-    .menu-item.menu-item-has-children
-    > a {
+  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom']) .menu .menu-item.menu-item-has-children>a {
     pointer-events: none;
   }
 
   /* list card menu */
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
     width: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -211,13 +193,13 @@
     line-clamp: 1;
   }
 
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
     min-width: 240px;
     max-width: 360px;
     transform: translateX(-20%) translateY(1px);
   }
 
-  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
     padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
     line-height: 1.75;
   }
@@ -265,10 +247,7 @@
     line-height: var(--line-height-paragraph);
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children
-    > a::after {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children>a::after {
     vertical-align: middle;
     position: absolute;
     right: 1rem;
@@ -278,10 +257,7 @@
     border-top: 4px solid transparent;
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a::after {
     transform: none;
   }
 
@@ -299,10 +275,7 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a:hover,
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children:hover
-    > a,
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a,
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
     background: inherit;
     color: inherit;
@@ -312,10 +285,7 @@
     background: var(--menu-item-active-bg);
   }
 
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
+  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
     visibility: visible;
     opacity: 1;
     z-index: var(--z-submenu);
@@ -356,10 +326,7 @@
     color: var(--ui-fg);
   }
 
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    > .menu-item.menu-item-has-children
-    > a::after {
+  .j-menu[data-menu-type='bottom']>.menu>.menu-item.menu-item-has-children>a::after {
     content: '☰';
     font-size: var(--font-size-sm);
     margin-left: unset;
@@ -369,26 +336,17 @@
     transition: unset;
   }
 
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
+  .j-menu[data-menu-type='bottom']>.menu .menu-item.menu-item-has-children:hover>a::after {
     transform: none;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent > a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item > a,
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent>a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item>a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>a {
     color: var(--tone-solid);
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu {
     opacity: 0;
     visibility: hidden;
     display: flex;
@@ -407,29 +365,17 @@
     z-index: -1;
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0%);
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item {
     white-space: normal;
   }
 
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item
-    > a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
     min-height: var(--el-height-2xl);
     justify-content: center;
   }
@@ -493,4 +439,4 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }
-}
+}

package/src/css/themes/default/tip.css

@@ -65,15 +65,15 @@
     margin: 6px 0;
   }
 
-  .j-tip .tip-content > *:first-child {
+  .j-tip .tip-content>*:first-child {
     margin-top: 0;
   }
 
-  .j-tip .tip-content > *:last-child {
+  .j-tip .tip-content>*:last-child {
     margin-bottom: 0;
   }
 
-  .j-tip.is-primary {
+  .j-tip.is-info {
     --tip-border-color: var(--state-info-border);
     --tip-bg: var(--state-info-soft);
     --tip-fg: var(--state-info-text);
@@ -91,9 +91,9 @@
     --tip-fg: var(--state-warning-text);
   }
 
-  .j-tip.is-danger {
-    --tip-border-color: var(--state-danger-border);
-    --tip-bg: var(--state-danger-soft);
-    --tip-fg: var(--state-danger-text);
+  .j-tip.is-error {
+    --tip-border-color: var(--state-error-border);
+    --tip-bg: var(--state-error-soft);
+    --tip-fg: var(--state-error-text);
   }
-}
+}

package/src/css/themes/default/toast.css

@@ -17,7 +17,7 @@
   .j-toast {
     --toast-fg: var(--ui-fg);
     --toast-bg: var(--ui-bg);
-    --toast-border-color: var(--ui-border);
+    --toast-border-color: var(--ui-border-subtle);
 
     gap: var(--s2);
     padding: var(--s3) var(--s4);
@@ -52,31 +52,35 @@
   }
 
   .j-toast.is-info {
-    --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent);
-  }
+    /* --toast-fg: var(--state-info-text); */
+    /* --toast-bg: var(--state-info-soft); */
+    /* --toast-border-color: var(--state-info-ring); */
 
-  .j-toast.is-primary {
-    --toast-fg: var(--state-info-text);
-    --toast-bg: var(--state-info-soft);
-    --toast-border-color: var(--state-info-ring);
+    --toast-fg: var(--state-info);
   }
 
   .j-toast.is-success {
-    --toast-fg: var(--state-success-text);
-    --toast-bg: var(--state-success-soft);
-    --toast-border-color: var(--state-success-ring);
+    /* --toast-fg: var(--state-success-text); */
+    /* --toast-bg: var(--state-success-soft); */
+    /* --toast-border-color: var(--state-success-ring); */
+
+    --toast-fg: var(--state-success);
   }
 
   .j-toast.is-warning {
-    --toast-fg: var(--state-warning-text);
-    --toast-bg: var(--state-warning-soft);
-    --toast-border-color: var(--state-warning-ring);
+    /* --toast-fg: var(--state-warning-text); */
+    /* --toast-bg: var(--state-warning-soft); */
+    /* --toast-border-color: var(--state-warning-ring); */
+
+    --toast-fg: var(--state-warning);
   }
 
   .j-toast.is-error {
-    --toast-fg: var(--state-danger-text);
-    --toast-bg: var(--state-danger-soft);
-    --toast-border-color: var(--state-danger-ring);
+    /* --toast-fg: var(--state-error-text); */
+    /* --toast-bg: var(--state-error-soft); */
+    /* --toast-border-color: var(--state-error-ring); */
+
+    --toast-fg: var(--state-error);
   }
 
   .j-toast-lite {
@@ -99,7 +103,7 @@
   }
 
   .j-toast.is-confirm {
-    --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent);
+    /* --toast-bg: color-mix(in srgb, var(--ui-bg) 50%, transparent); */
 
     gap: var(--s4);
     min-width: 280px;
@@ -117,4 +121,4 @@
     justify-content: flex-end;
     position: relative;
   }
-}
+}

package/src/css/themes/default/tooltip.css

@@ -41,9 +41,9 @@
   }
 
   .j-tooltip.is-error {
-    --tooltip-fg: var(--state-danger-fg);
-    --tooltip-bg: var(--state-danger-text);
-    --tooltip-border-color: var(--state-danger-border);
+    --tooltip-fg: var(--state-error-fg);
+    --tooltip-bg: var(--state-error-text);
+    --tooltip-border-color: var(--state-error-border);
   }
 
   .j-tooltip .el-text {
@@ -60,4 +60,4 @@
     background: unset;
     box-shadow: unset;
   }
-}
+}

package/src/css/tokens.css

@@ -94,6 +94,7 @@
     --ui-fg-muted: #6b7280;
     --ui-fg-soft: #9ca3af;
     --ui-fg-subtle: #d1d5db;
+    --ui-reverse: #000;
     --ui-border-subtle: rgba(0, 0, 0, 0.06);
     --ui-border: rgba(0, 0, 0, 0.1);
     --ui-border-strong: rgba(0, 0, 0, 0.2);
@@ -206,17 +207,17 @@
     --tone-code-fg: #374151;
 
     /* States */
-    --state-danger: #ef4444;
-    --state-danger-hover: #dc2626;
-    --state-danger-active: #b91c1c;
-    --state-danger-fg: #ffffff;
-    --state-danger-text: #dc2626;
-    --state-danger-subtle: rgba(239, 68, 68, 0.08);
-    --state-danger-soft: rgba(239, 68, 68, 0.12);
-    --state-danger-muted: rgba(239, 68, 68, 0.16);
-    --state-danger-weak: #fce1e1;
-    --state-danger-border: rgba(239, 68, 68, 0.25);
-    --state-danger-ring: rgba(239, 68, 68, 0.3);
+    --state-error: #ef4444;
+    --state-error-hover: #dc2626;
+    --state-error-active: #b91c1c;
+    --state-error-fg: #ffffff;
+    --state-error-text: #dc2626;
+    --state-error-subtle: rgba(239, 68, 68, 0.08);
+    --state-error-soft: rgba(239, 68, 68, 0.12);
+    --state-error-muted: rgba(239, 68, 68, 0.16);
+    --state-error-weak: #fce1e1;
+    --state-error-border: rgba(239, 68, 68, 0.25);
+    --state-error-ring: rgba(239, 68, 68, 0.3);
 
     --state-success: #22c55e;
     --state-success-hover: #16a34a;
@@ -254,8 +255,8 @@
     --state-info-ring: rgba(59, 130, 246, 0.3);
 
     /* Component Aliases */
-    --state-danger-solid: var(--state-danger);
-    --state-danger-surface: var(--state-danger-subtle);
+    --state-error-solid: var(--state-error);
+    --state-error-surface: var(--state-error-subtle);
     --state-success-solid: var(--state-success);
     --state-success-surface: var(--state-success-subtle);
     --state-warning-solid: var(--state-warning);
@@ -284,6 +285,7 @@
     --ui-fg-muted: #cbd5e1;
     --ui-fg-soft: #94a3b8;
     --ui-fg-subtle: #64748b;
+    --ui-reverse: #fff;
     --ui-border-subtle: rgba(148, 163, 184, 0.12);
     --ui-border: rgba(148, 163, 184, 0.18);
     --ui-border-strong: rgba(148, 163, 184, 0.28);
@@ -396,17 +398,17 @@
     --tone-code-fg: #e5e7eb;
 
     /* States */
-    --state-danger: #f87171;
-    --state-danger-hover: #fca5a5;
-    --state-danger-active: #fecaca;
-    --state-danger-fg: #030712;
-    --state-danger-text: #fca5a5;
-    --state-danger-subtle: rgba(248, 113, 113, 0.1);
-    --state-danger-soft: rgba(248, 113, 113, 0.15);
-    --state-danger-muted: rgba(248, 113, 113, 0.2);
-    --state-danger-weak: #291111;
-    --state-danger-border: rgba(248, 113, 113, 0.25);
-    --state-danger-ring: rgba(248, 113, 113, 0.4);
+    --state-error: #f87171;
+    --state-error-hover: #fca5a5;
+    --state-error-active: #fecaca;
+    --state-error-fg: #030712;
+    --state-error-text: #fca5a5;
+    --state-error-subtle: rgba(248, 113, 113, 0.1);
+    --state-error-soft: rgba(248, 113, 113, 0.15);
+    --state-error-muted: rgba(248, 113, 113, 0.2);
+    --state-error-weak: #291111;
+    --state-error-border: rgba(248, 113, 113, 0.25);
+    --state-error-ring: rgba(248, 113, 113, 0.4);
 
     --state-success: #4ade80;
     --state-success-hover: #86efac;
@@ -1290,4 +1292,4 @@
     --el-height-2xl: 3.5rem;
     --el-height-3xl: 3.75rem;
   }
-}
+}

package/src/primitives/toast.ts

@@ -16,7 +16,7 @@ import { mergeShallowConfig } from '../utilities/merge.ts';
 import { timer } from '../utilities/timer.ts';
 import { validateParam } from '../utilities/types.ts';
 
-export type ToastTheme = 'info' | 'success' | 'warning' | 'error' | 'primary';
+export type ToastTheme = '' | 'info' | 'success' | 'warning' | 'error';
 
 export interface ToastClassNames {
   container: string;
@@ -33,7 +33,6 @@ export interface ToastClassNames {
   success: string;
   warning: string;
   error: string;
-  primary: string;
 }
 
 export type ToastClassNameConfig = Partial<ToastClassNames>;
@@ -77,9 +76,8 @@ const DEFAULT_CLASS_NAMES: ToastClassNames = {
   buttons: 'toast-buttons',
   button: 'j-button is-sm',
   closeBtn: 'is-ghost',
-  confirmBtn: 'is-outline',
+  confirmBtn: 'is-reverse',
   info: 'is-info',
-  primary: 'is-primary',
   success: 'is-success',
   warning: 'is-warning',
   error: 'is-error',
@@ -87,7 +85,7 @@ const DEFAULT_CLASS_NAMES: ToastClassNames = {
 
 const TOAST_THEME_RULE = {
   type: 'string',
-  enum: ['info', 'success', 'warning', 'error', 'primary'],
+  enum: ['', 'info', 'success', 'warning', 'error'],
 };
 const TOAST_DURATION_RULE = { type: 'number', min: 0 };
 const LITE_DURATION_RULE = { type: 'number', greaterThan: 0 };
@@ -135,10 +133,6 @@ function isToastLoading(options: ToastOptions): boolean {
   return !!access(options.loading ?? false);
 }
 
-function toastIconName(theme: ToastTheme): ToastTheme {
-  return theme === 'primary' ? 'info' : theme;
-}
-
 function toastIconStyle(options: ToastOptions): Record<string, string> {
   return isToastLoading(options)
     ? {
@@ -156,9 +150,9 @@ function toastIconStyle(options: ToastOptions): Record<string, string> {
 function toastIconContent(
   theme: ToastTheme,
   options: ToastOptions
-): HTMLElement | SVGElement {
+): HTMLElement | SVGElement | null {
   if (isToastLoading(options)) return createLoading();
-  return icon(toastIconName(theme));
+  return theme ? icon(theme) : null;
 }
 
 function toastMessage(message: string, options: ToastOptions): string {
@@ -188,6 +182,11 @@ function bindToastStatus(
 ): void {
   const id = element.dataset.toast || randomId();
   const dispose = createRoot((dispose) => {
+    insert(
+      element,
+      () => (theme || isToastLoading(options) ? iconElement : null),
+      messageElement
+    );
     insert(iconElement, () => toastIconContent(theme, options));
     insert(messageElement, () => toastMessage(message, options));
     createEffect(() => {
@@ -366,7 +365,7 @@ function show(message = '', options: ToastOptions = {}): HTMLElement {
   }
   validateParam('message', message, 'string', 'Toast.show');
   const duration = options.duration ?? 3000;
-  const theme = options.theme || 'info';
+  const theme = options.theme ?? '';
   validateParam('once', once, 'boolean', 'Toast.show');
   validateParam('duration', duration, TOAST_DURATION_RULE, 'Toast.show');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.show');
@@ -386,11 +385,11 @@ function show(message = '', options: ToastOptions = {}): HTMLElement {
     'data-toast-message': id,
   }) as HTMLElement;
   const toast = jsx('div', {
-    className: joinClasses(names.toast, names[theme]),
+    className: joinClasses(names.toast, theme ? names[theme] : ''),
     'data-toast': id,
     role: 'alert',
     'aria-atomic': 'true',
-    children: [iconElement, messageElement],
+    children: messageElement,
   }) as HTMLElement;
   bindToastStatus(
     toast,
@@ -533,12 +532,10 @@ export const Toast = {
     return { className: classNames };
   },
   show,
-  success: (message = '', options: ToastOptions = {}) =>
-    show(message, { ...options, theme: 'success' }),
   info: (message = '', options: ToastOptions = {}) =>
     show(message, { ...options, theme: 'info' }),
-  primary: (message = '', options: ToastOptions = {}) =>
-    show(message, { ...options, theme: 'primary' }),
+  success: (message = '', options: ToastOptions = {}) =>
+    show(message, { ...options, theme: 'success' }),
   warning: (message = '', options: ToastOptions = {}) =>
     show(message, { ...options, theme: 'warning' }),
   error: (message = '', options: ToastOptions = {}) =>