@wpic/ui 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpic/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "WPIC shared Vue 3 component library",
   "publishConfig": {

package/src/style.css

@@ -308,3 +308,89 @@ 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); }
+
+.wpic-theme .wpic-stat-card--featured { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wpic-accent) 25%, transparent); }
+.wpic-theme .wpic-stat-card--featured > .wpic-card__body { padding-top: 0; }
+.wpic-theme .wpic-stat-card--featured .wpic-stat-card__label { margin-inline: calc(-1 * var(--wpic-card-padding-x)); padding: 0.75rem var(--wpic-card-padding-x); background: var(--wpic-accent); color: var(--wpic-on-accent); font-weight: 600; }