frappe-ui 1.0.0-beta.6 → 1.0.0-beta.8

package/internals.ts

@@ -0,0 +1,10 @@
+// frappe-ui internals — UNSTABLE. No backward-compatibility promise.
+
+export { inputFontSizeClasses } from './src/components/Combobox/utils'
+export {
+  InputLabel,
+  InputDescription,
+  InputError,
+  LabelingWrapper,
+} from './src/components/InputLabeling'
+export { useInputLabeling } from './src/composables/useInputLabeling'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [
@@ -13,6 +13,9 @@
     "#composables/*": "./src/composables/*",
     "#utils/*": "./src/utils/*"
   },
+  "bin": {
+    "tokens-v2": "./tailwind/migrate-tokens-v2.js"
+  },
   "scripts": {
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
@@ -42,6 +45,10 @@
       "import": "./src/index.ts",
       "types": "./src/index.ts"
     },
+    "./internals": {
+      "import": "./internals.ts",
+      "types": "./internals.ts"
+    },
     "./frappe": {
       "import": "./frappe/index.js"
     },
@@ -87,6 +94,7 @@
     "vite",
     "icons",
     "tailwind",
+    "internals.ts",
     "tsconfig.base.json"
   ],
   "repository": {

package/src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col rounded-lg border bg-white px-6 py-5 shadow">
+  <div class="flex flex-col rounded-lg border bg-white px-6 py-5">
     <div class="flex items-baseline justify-between">
       <div class="flex items-baseline space-x-2">
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">

package/src/components/Toast/Toast.sanitize.test.ts

@@ -0,0 +1,50 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Sanitization is verified against the REAL DOMPurify (needs a DOM, hence the
+ * jsdom environment) — the allow-list wiring is covered separately in
+ * Toast.test.ts with a stubbed DOMPurify.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type { VNode } from 'vue'
+
+const sonnerSpy = Object.assign(vi.fn(), {
+  success: vi.fn(),
+  error: vi.fn(),
+  warning: vi.fn(),
+  info: vi.fn(),
+})
+
+vi.mock('vue-sonner', () => ({ toast: sonnerSpy }))
+
+const { toast } = await import('./toast')
+
+// renderSafeHTML returns `() => h('span', { innerHTML })`. Pull that render
+// function off the sonner spy, invoke it, and read the sanitized markup back.
+function sanitizedHTML(): string {
+  const [message] = sonnerSpy.success.mock.calls[0]!
+  const vnode = (message as () => VNode)()
+  return (vnode.props as { innerHTML: string }).innerHTML
+}
+
+beforeEach(() => sonnerSpy.success.mockClear())
+
+describe('Toast v1 — DOMPurify stripping', () => {
+  it('strips tags outside the allow-list while keeping their text content', () => {
+    toast.success('<strong>safe</strong><div>nested</div>')
+    const html = sanitizedHTML()
+    expect(html).toContain('<strong>safe</strong>')
+    expect(html).not.toContain('<div>')
+    expect(html).toContain('nested')
+  })
+
+  it('removes script and event-handler payloads to prevent XSS', () => {
+    toast.success('<b>ok</b><img src=x onerror=alert(1)><script>alert(2)<\/script>')
+    const html = sanitizedHTML()
+    expect(html).toContain('<b>ok</b>')
+    expect(html).not.toContain('<img')
+    expect(html).not.toContain('onerror')
+    expect(html).not.toContain('<script')
+  })
+})

package/src/components/Toast/Toast.test.ts

@@ -23,6 +23,11 @@ const sonnerSpy = Object.assign(vi.fn(), {
 
 vi.mock('vue-sonner', () => ({ toast: sonnerSpy }))
 
+// Every toast path runs through renderSafeHTML → DOMPurify.sanitize, which
+// needs a DOM. Stub it with a passthrough so this node-environment file doesn't
+// crash; the real sanitization is verified in Toast.sanitize.test.ts (jsdom).
+vi.mock('dompurify', () => ({ default: { sanitize: (html: string) => html } }))
+
 const { toast } = await import('./toast')
 
 beforeEach(() => {

package/src/components/Toast/ToastProvider.vue

@@ -40,6 +40,15 @@ import { Toaster } from 'vue-sonner'
   height: auto;
 }
 
+/* In the collapsed stack vue-sonner clamps every non-front toast to the front
+   toast's height (--front-toast-height) and hides their content. The content is
+   hidden only on [data-styled='true'] toasts, which `unstyled` strips — so a
+   multiline toast behind a single-line one spills its extra lines out the top.
+   Replicate sonner's intended behavior and fade the collapsed back toasts out. */
+[data-sonner-toast][data-expanded='false'][data-front='false'] > * {
+  opacity: 0;
+}
+
 .sonner-loading-wrapper {
   position: static;
 }

package/src/components/Toast/toast.ts

@@ -1,9 +1,24 @@
+import DOMPurify from 'dompurify'
 import { h, isVNode, type Component, type VNode } from 'vue'
 import { toast as sonnerToast } from 'vue-sonner'
 import { warnDeprecated } from '../../utils/warnDeprecated'
 
 type ToastType = 'success' | 'error' | 'warning' | 'info'
 
+type SonnerData = Parameters<typeof sonnerToast>[1]
+
+// Tags that are safe to render inside a toast message. Anything outside this set is stripped by DOMPurify.
+const ALLOWED_TAGS = ['a', 'em', 'strong', 'i', 'b', 'u']
+
+// Sonner renders a string message as plain text and a VNode via
+// `<component :is>`. To render safe HTML we sanitize the string and return a
+// render function; non-string values (already VNodes/components) pass through.
+function renderSafeHTML<T>(message: T): T | (() => VNode) {
+  if (typeof message !== 'string') return message
+  const html = DOMPurify.sanitize(message, { ALLOWED_TAGS })
+  return () => h('span', { innerHTML: html })
+}
+
 interface LegacyCreateOptions {
   id?: string | number
   message: string
@@ -62,20 +77,21 @@ function isLegacyObject(arg: unknown): arg is LegacyToastObject {
 
 function dispatch(
   type: ToastType | undefined,
-  message: string,
-  data: Parameters<typeof sonnerToast>[1],
+  message: string | Component | VNode,
+  data: SonnerData,
 ) {
+  const safeMessage = renderSafeHTML(message)
   switch (type) {
     case 'success':
-      return sonnerToast.success(message, data)
+      return sonnerToast.success(safeMessage, data)
     case 'error':
-      return sonnerToast.error(message, data)
+      return sonnerToast.error(safeMessage, data)
     case 'warning':
-      return sonnerToast.warning(message, data)
+      return sonnerToast.warning(safeMessage, data)
     case 'info':
-      return sonnerToast.info(message, data)
+      return sonnerToast.info(safeMessage, data)
     default:
-      return sonnerToast(message, data)
+      return sonnerToast(safeMessage, data)
   }
 }
 
@@ -107,7 +123,7 @@ function toastFn(
   if (isLegacyObject(message)) {
     return callLegacyObject(message)
   }
-  return sonnerToast(message as string, options)
+  return sonnerToast(renderSafeHTML(message as string), options)
 }
 
 function create(options: LegacyCreateOptions) {
@@ -142,6 +158,14 @@ function removeAll() {
 }
 
 export const toast = Object.assign(toastFn, sonnerToast, {
+  success: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('success', message, data),
+  error: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('error', message, data),
+  warning: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('warning', message, data),
+  info: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('info', message, data),
   create,
   remove,
   removeAll,

package/tailwind/colorPalette.js

@@ -131,10 +131,9 @@ function generateSemanticColors() {
 // Emit `--elevation-*` and `--focus-*` CSS variables. Elevation uses the
 // Figma `light/*` values in both modes (matches how Espresso 2.0 actually
 // applies shadows in dark mode — see the dark-mode page in Figma, which
-// references `elevation/light/*` exclusively). The Figma `dark/*` set is
-// exposed as `--dark-elevation-*` for opt-in use via `shadow-dark-*`.
-// Focus rings still mode-swap. Theme-independent entries (e.g.
-// `elevation.custom.status`) land in `:root` only.
+// references `elevation/light/*` exclusively). Focus rings still mode-swap.
+// Theme-independent entries (e.g. `elevation.custom.status`) land in
+// `:root` only.
 function generateEffectVariables() {
   const output = {
     ':root': {},
@@ -144,9 +143,6 @@ function generateEffectVariables() {
   for (const [step, value] of Object.entries(effectsData.elevation.light)) {
     output[':root'][`--elevation-${step}`] = value
   }
-  for (const [step, value] of Object.entries(effectsData.elevation.dark)) {
-    output[':root'][`--dark-elevation-${step}`] = value
-  }
   for (const [name, value] of Object.entries(effectsData.elevation.custom)) {
     output[':root'][`--elevation-${name}`] = value
   }

package/tailwind/figma-tokens-to-theme.js

@@ -316,8 +316,13 @@ function buildEffects() {
   return out
 }
 
+// Figma paints its effect array back-to-front (index 0 = bottom of the stack),
+// while CSS box-shadow paints front-to-back (first listed = on top). Reverse the
+// layers so the composed CSS string matches Figma's visual stacking order.
 function shadowToCss(layers) {
   return layers
+    .slice()
+    .reverse()
     .map((layer) => {
       const parts = [
         layer.inset ? 'inset' : null,

package/tailwind/generated/effects.json

@@ -1,20 +1,20 @@
 {
   "elevation": {
     "light": {
-      "sm": "0px 1px 3px 0px #00000024, 0px 0px 1px 0px #00000024, inset 0px 0.25px 1.5px 0px #ffffff14",
-      "base": "0px 2px 5px 0px #00000024, 0px 0px 1.5px 0px #00000029, inset 0px 0.25px 1.5px 0px #ffffff14",
-      "md": "0px 6px 12px -2px #0000001f, 0px 0px 6px 2px #00000008, 0px 0px 1.5px 0px #00000026, inset 0px 0.25px 1.5px 0px #ffffff14",
-      "lg": "0px 18px 22px -6px #0000001a, 0px 0px 6px 3px #00000008, 0px 0px 1.5px 0px #0000002e",
-      "xl": "0px 24px 30px -8px #0000001a, 0px 0px 10px 2px #0000000a, 0px 0px 1px 0px #00000033, inset 0px 0.25px 2px 0px #ffffff26",
-      "2xl": "0px 44px 52px -10px #0000001a, 0px 0px 10px 2px #00000008, 0px 0px 1.5px 0px #00000040, inset 0px 0.1px 2px 0px #ffffff14"
+      "sm": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 1px 3px 0px #00000024",
+      "base": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000029, 0px 2px 5px 0px #00000024",
+      "md": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000026, 0px 0px 6px 2px #0000000a, 0px 6px 12px -2px #00000014",
+      "lg": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #0000002e, 0px 0px 6px 3px #00000008, 0px 18px 22px -6px #0000001a",
+      "xl": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 0px 10px 2px #0000000a, 0px 24px 30px -8px #0000001a",
+      "2xl": "inset 0px 0.25px 2px 0px #ffffff29, 0px 0px 1.5px 0px #00000040, 0px 0px 10px 2px #00000008, 0px 44px 52px -10px #0000001a"
     },
     "dark": {
-      "sm": "0px 1px 3px 0px #000000b2, 0px 0px 14px 0px #0000002e, inset 0px 0.5px 0.5px 0.5px #ffffff08",
-      "base": "0px 2px 5px 0px #00000099, 0px 0px 14px 0px #0000002e, inset 0px 0.5px 0.5px 0.5px #ffffff08",
-      "md": "0px 6px 12px -2px #00000099, 0px 0px 16px 2px #00000033, inset 0px 0.5px 0.5px 0.5px #ffffff08",
-      "lg": "0px 18px 20px -8px #00000085, 0px 0px 16px 0px #0000001a, inset 0px 0.5px 1.5px 0.5px #ffffff0a",
-      "xl": "0px 26px 34px -6px #0000006b, 0px 0px 14px 2px #0000001f, inset 0px 0.5px 1.5px 0.5px #ffffff0a",
-      "2xl": "0px 44px 52px -4px #0000006b, 0px 0px 14px 10px #0000001f, inset 0px 0.5px 1.5px 0.5px #ffffff0f"
+      "sm": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 1px 3px 0px #000000b2",
+      "base": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 2px 5px 0px #00000099",
+      "md": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 16px 2px #00000033, 0px 6px 12px -2px #00000099",
+      "lg": "inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 16px 0px #0000001a, 0px 18px 20px -8px #00000085",
+      "xl": "inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 14px 2px #0000001f, 0px 26px 34px -6px #0000006b",
+      "2xl": "inset 0px 0.5px 1.5px 0.5px #ffffff0f, 0px 0px 14px 10px #0000001f, 0px 44px 52px -4px #0000006b"
     },
     "custom": {
       "status": "0px 0px 0px 1.5px #ffffff"

package/tailwind/migrate-tokens-v2.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /**
  * Espresso v2 token migration codemod.
  *
@@ -13,7 +14,7 @@
  * class, which carries the correct per-weight letter-spacing (see
  * `mergeWeightClasses`).
  *
- *   Usage:  node tailwind/migrate-tokens-v2.js [--dry-run] [--force] <dir-or-file...>
+ *   Usage:  tokens-v2 [--dry-run] [--force] <dir-or-file...>
  *
  * IMPORTANT: the token replacement is single-pass/simultaneous. Several renames
  * chain (outline red-2→3, red-3→4, red-4→5); applying them sequentially would
@@ -28,6 +29,8 @@ import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
+const USAGE = 'Usage: tokens-v2 [--dry-run] [--force] <dir-or-file...>'
+
 // ---------- MAPPING ----------
 
 // Per-category renames: old suffix → new suffix.
@@ -322,12 +325,18 @@ function* walk(target) {
 
 function main() {
   const args = process.argv.slice(2)
+  const help = args.includes('--help') || args.includes('-h')
   const dryRun = args.includes('--dry-run')
   const force = args.includes('--force')
   const targets = args.filter((a) => !a.startsWith('--'))
 
+  if (help) {
+    console.log(USAGE)
+    return
+  }
+
   if (targets.length === 0) {
-    console.error('Usage: node tailwind/migrate-tokens-v2.js [--dry-run] [--force] <dir-or-file...>')
+    console.error(USAGE)
     process.exit(1)
   }
 
@@ -387,5 +396,7 @@ function main() {
   }
 }
 
-const isCLI = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)
+const scriptPath = fileURLToPath(import.meta.url)
+const invokedPath = process.argv[1]
+const isCLI = invokedPath && fs.realpathSync(invokedPath) === fs.realpathSync(scriptPath)
 if (isCLI) main()

package/tailwind/plugin.js

@@ -169,6 +169,14 @@ let globalStyles = (theme) => ({
     backgroundSize: '1.13em',
     backgroundPosition: 'right 0.44rem center',
   },
+  // A bare `<p>` reads as body copy, so it defaults to a relaxed line-height
+  // instead of the tight value baked into the `text-<size>` utilities. Kept at
+  // element specificity (0,0,1) with `:where()` (which adds none) so any explicit
+  // `text-*` / `text-p-*` line-height wins, and scoped out of rich text so the
+  // `prose` / editor line-heights are untouched.
+  'p:not(:where(.prose, .ProseMirror) *)': {
+    lineHeight: '1.5',
+  },
   // Global keyboard focus indicator (espresso v2 focus/default token).
   // Lives in the base layer so any utility on the element can override it:
   // suppress with `focus-visible:outline-none`, retheme with
@@ -216,12 +224,6 @@ export default plugin(
         xl: 'var(--elevation-xl)',
         '2xl': 'var(--elevation-2xl)',
         status: 'var(--elevation-status)',
-        'dark-sm': 'var(--dark-elevation-sm)',
-        'dark-base': 'var(--dark-elevation-base)',
-        'dark-md': 'var(--dark-elevation-md)',
-        'dark-lg': 'var(--dark-elevation-lg)',
-        'dark-xl': 'var(--dark-elevation-xl)',
-        'dark-2xl': 'var(--dark-elevation-2xl)',
       },
       container: {
         padding: {

package/tailwind/tokens.js

@@ -16,12 +16,6 @@ const boxShadow = {
   ...effectsData.elevation.light,
   DEFAULT: effectsData.elevation.light.base,
   ...effectsData.elevation.custom,
-  ...Object.fromEntries(
-    Object.entries(effectsData.elevation.dark).map(([key, value]) => [
-      `dark-${key}`,
-      value,
-    ]),
-  ),
 }
 
 // lineHeight, letterSpacing and fontWeight are baked into each size tuple by