@wpic/ui 0.3.16 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpic/ui",
-  "version": "0.3.16",
+  "version": "0.5.0",
   "type": "module",
   "description": "WPIC shared Vue 3 component library",
   "publishConfig": {
@@ -9,7 +9,9 @@
   "files": [
     "dist",
     "src/style.css",
-    "src/components/chat/*.md"
+    "src/components/chat/*.md",
+    "COMPONENTS.md",
+    "CHANGELOG.md"
   ],
   "main": "./dist/wpic-ui.cjs",
   "module": "./dist/wpic-ui.js",
@@ -27,7 +29,8 @@
     "build": "vue-tsc --noEmit && vite build",
     "dev": "vite build --watch",
     "test:ui": "vite --config test-ui/vite.config.ts",
-    "postbuild": "node scripts/postbuild.js && node scripts/verify-package.js"
+    "postbuild": "node scripts/postbuild.js && node scripts/verify-package.js",
+    "test:semantic": "playwright test"
   },
   "peerDependencies": {
     "@floating-ui/vue": ">=1",
@@ -37,6 +40,7 @@
   },
   "devDependencies": {
     "@floating-ui/vue": "^1.1.11",
+    "@playwright/test": "^1.63.0",
     "@tailwindcss/vite": "^4.2.1",
     "@vitejs/plugin-vue": "^6.0.0",
     "lucide-vue-next": "^0.577.0",

package/src/style.css

@@ -308,3 +308,85 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpic-primary, #6366f1) 25%, transparent);
   outline: none;
 }
+
+/* UI5 is opt-in through WThemeProvider. Legacy consumers retain their defaults. */
+.wpic-theme { color: var(--wpic-text); color-scheme: light; }
+.wpic-theme[data-wpic-theme="dark"] { color-scheme: dark; }
+.wpic-theme .wpic-card {
+  background: var(--wpic-surface);
+  color: var(--wpic-text);
+}
+.wpic-theme .wpic-card--bordered {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--wpic-border);
+}
+.wpic-theme .wpic-control:not([data-variant="plain"]):not([data-variant="subtle"]) {
+  background: var(--wpic-input);
+  color: var(--wpic-text);
+  border-color: var(--wpic-border);
+}
+.wpic-theme .wpic-control[data-variant="subtle"] { background: var(--wpic-raised); color: var(--wpic-text); }
+.wpic-theme .wpic-control[data-size="md"]:not([data-variant="plain"]),
+.wpic-theme .wpic-button[data-size="md"] { height: var(--wpic-control-height, 36px); }
+.wpic-theme .wpic-control:disabled { background: var(--wpic-raised); cursor: not-allowed; }
+.wpic-theme .wpic-control::placeholder { color: var(--wpic-dim); }
+.wpic-theme .wpic-control:hover:not(:disabled):not([data-variant="plain"]) { border-color: var(--wpic-border-hover); }
+.wpic-theme .wpic-control:focus:not([data-variant="plain"]),
+.wpic-theme .wpic-control[aria-expanded="true"],
+.wpic-theme .wpic-select-open {
+  border-color: var(--wpic-accent) !important;
+  outline: none;
+  box-shadow: 0 0 0 3px var(--wpic-focus-ring);
+}
+.wpic-theme .wpic-control[data-invalid="true"] { border-color: var(--wpic-negative) !important; }
+.wpic-theme .wpic-control[data-invalid="true"]:focus {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpic-negative) 18%, transparent);
+}
+.wpic-theme .wpic-button[data-variant="primary"],
+.wpic-theme .wpic-range-apply {
+  background: var(--wpic-button-primary);
+  color: var(--wpic-on-primary);
+}
+.wpic-theme .wpic-button[data-variant="primary"]:hover:not(:disabled),
+.wpic-theme .wpic-range-apply:hover:not(:disabled) { background: var(--wpic-button-primary-hover); }
+.wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]) {
+  background: var(--wpic-secondary);
+  color: var(--wpic-on-secondary);
+  border-color: transparent;
+  box-shadow: var(--wpic-secondary-shadow);
+}
+.wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]):hover:not(:disabled) { background: var(--wpic-secondary-hover); }
+.wpic-theme .wpic-button:focus-visible {
+  outline: 1px solid var(--wpic-accent);
+  outline-offset: 0;
+  box-shadow: 0 0 0 3px var(--wpic-focus-ring);
+}
+.wpic-theme.wpic-popover-panel {
+  background: var(--wpic-popover);
+  border-color: var(--wpic-border);
+  color: var(--wpic-text);
+}
+.wpic-theme.wpic-popover-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
+.wpic-theme.wpic-popover-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
+.wpic-theme.wpic-popover-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
+.wpic-theme.wpic-popover-panel :is(.border-zinc-100, .border-zinc-200) { border-color: var(--wpic-border); }
+.wpic-theme .wpic-select-option:hover:not(:disabled) { background: var(--wpic-raised); }
+.wpic-theme .wpic-calendar-day[aria-pressed="true"] { background: var(--wpic-accent); color: var(--wpic-on-accent); }
+.wpic-theme .wpic-calendar-day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--wpic-raised); }
+.wpic-theme .wpic-calendar-day:disabled { opacity: 0.4; }
+.wpic-theme .wpic-checkbox-box { background: var(--wpic-input); border-color: var(--wpic-border-hover); }
+.wpic-theme .wpic-checkbox input:checked + .wpic-checkbox-box { background: var(--wpic-button-primary); border-color: var(--wpic-button-primary); color: var(--wpic-on-primary); }
+.wpic-theme .wpic-checkbox input:focus-visible + .wpic-checkbox-box { box-shadow: 0 0 0 3px var(--wpic-focus-ring); }
+.wpic-toggle-track:disabled { opacity: 0.5; }
+.wpic-theme .wpic-toggle-track { width: 40px; height: 24px; cursor: pointer; background: var(--wpic-switch-off); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.08); }
+.wpic-theme .wpic-toggle-track[aria-checked="true"] { background: var(--wpic-switch-on); }
+.wpic-theme .wpic-toggle-track:disabled { background: var(--wpic-switch-disabled); opacity: 1; cursor: not-allowed; }
+.wpic-theme .wpic-toggle-thumb { width: 20px; height: 20px; top: 2px; left: 2px; background: var(--wpic-switch-thumb); box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transform: translateX(0); translate: none; }
+.wpic-theme .wpic-toggle-track[aria-checked="true"] .wpic-toggle-thumb { transform: translateX(16px); }
+.wpic-theme .wpic-page-header { color: var(--wpic-text); }
+
+.wpic-theme .wpic-range-preset[aria-pressed="true"] { background: color-mix(in srgb, var(--wpic-accent) 10%, transparent); color: var(--wpic-accent); }
+.wpic-theme .wpic-calendar-day[data-in-range="true"] { background: color-mix(in srgb, var(--wpic-accent) 15%, transparent); }
+.wpic-theme .wpic-calendar-day[data-today="true"]:not([aria-pressed="true"]) { box-shadow: 0 0 0 1px var(--wpic-accent); }
+
+.wpic-theme .wpic-stat-card { background: var(--wpic-surface); border-radius: var(--radius-xl, 12px); box-shadow: inset 0 0 0 1px var(--wpic-border); }