@wpic/ui 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/wpic-ui.cjs +2 -2
  3. package/dist/wpic-ui.css +17 -4
  4. package/dist/wpic-ui.js +3 -3
  5. package/package.json +1 -1
  6. package/src/style.css +17 -4
package/dist/wpic-ui.css CHANGED
@@ -397,15 +397,28 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
397
397
  .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; }
398
398
 
399
399
  /* UI5 segmented options and teleported surfaces. */
400
- .wpic-theme .wpic-segmented-control { background: var(--wpic-raised); border: 0; padding: 3px; border-radius: 9px; gap: 2px; }
400
+ /* Outrank the component's legacy dark/subtle rules, regardless of CSS order. */
401
+ .wpic-theme .wpic-segmented-control:is(.wpic-segmented-control--default, .wpic-segmented-control--subtle) { background: var(--wpic-raised); border: 0; padding: 3px; border-radius: 9px; gap: 2px; }
401
402
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button { border: 0; border-radius: 6px; color: var(--wpic-muted); background: transparent; }
402
403
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-border); }
403
404
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
404
405
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-segment-active); box-shadow: var(--wpic-segment-shadow); }
405
406
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:focus-visible { outline: 1px solid var(--wpic-accent); box-shadow: 0 0 0 3px var(--wpic-focus-ring); }
406
- .wpic-theme .wpic-modal-panel,
407
- .wpic-theme.wpic-tooltip-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
408
- .wpic-theme.wpic-tooltip-panel { box-shadow: inset 0 0 0 1px var(--wpic-border), 0 4px 12px rgb(0 0 0 / 0.15); }
407
+ .wpic-theme .wpic-modal-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
408
+ /* Tooltips keep an inverse surface, independent of popover customization. */
409
+ .wpic-tooltip-panel {
410
+ background: #242720;
411
+ color: #f7f8f5;
412
+ border: 1px solid rgb(255 255 255 / 0.12);
413
+ border-radius: 8px;
414
+ padding: 7px 11px;
415
+ box-shadow: 0 5px 16px rgb(0 0 0 / 0.2);
416
+ }
417
+ .dark .wpic-tooltip-panel:not([data-wpic-theme="light"]),
418
+ .wpic-tooltip-panel[data-wpic-theme="dark"] {
419
+ background: #090a05;
420
+ border: 0;
421
+ }
409
422
  .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
410
423
  .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
411
424
  .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
package/dist/wpic-ui.js CHANGED
@@ -61,8 +61,8 @@ const $3 = {
61
61
  n.loading ? (e(), l("span", $3, [
62
62
  w(f(i2), {
63
63
  size: (t.size ?? "md") === "xs" ? 10 : (t.size ?? "md") === "sm" ? 13 : (t.size ?? "md") === "lg" ? 17 : 15,
64
- class: p(["animate-spin", ["primary", "destructive"].includes(t.variant ?? "primary") ? "text-white" : ""])
65
- }, null, 8, ["size", "class"])
64
+ class: "animate-spin"
65
+ }, null, 8, ["size"])
66
66
  ])) : m("", !0)
67
67
  ]),
68
68
  _: 3
@@ -5425,7 +5425,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
5425
5425
  ref_key: "floating",
5426
5426
  ref: u,
5427
5427
  style: f1([f(t)?.variables, f(b)]),
5428
- class: p([{ "wpic-theme": f(t), dark: f(t)?.mode === "dark" }, "wpic-tooltip-panel pointer-events-none z-[9999] max-w-[200px] whitespace-pre-line break-words rounded-md bg-zinc-900 px-2 py-1 text-base font-medium text-zinc-100 shadow-md dark:bg-zinc-700"]),
5428
+ class: p([{ "wpic-theme": f(t), dark: f(t)?.mode === "dark" }, "wpic-tooltip-panel pointer-events-none z-[9999] max-w-[200px] whitespace-pre-line break-words text-base font-medium"]),
5429
5429
  "data-wpic-theme": f(t)?.mode,
5430
5430
  role: "tooltip"
5431
5431
  }, z(n.content), 15, P8)) : m("", !0)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wpic/ui",
3
- "version": "0.6.0",
3
+ "version": "0.6.2",
4
4
  "type": "module",
5
5
  "description": "WPIC shared Vue 3 component library",
6
6
  "publishConfig": {
package/src/style.css CHANGED
@@ -396,15 +396,28 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
396
396
  .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; }
397
397
 
398
398
  /* UI5 segmented options and teleported surfaces. */
399
- .wpic-theme .wpic-segmented-control { background: var(--wpic-raised); border: 0; padding: 3px; border-radius: 9px; gap: 2px; }
399
+ /* Outrank the component's legacy dark/subtle rules, regardless of CSS order. */
400
+ .wpic-theme .wpic-segmented-control:is(.wpic-segmented-control--default, .wpic-segmented-control--subtle) { background: var(--wpic-raised); border: 0; padding: 3px; border-radius: 9px; gap: 2px; }
400
401
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button { border: 0; border-radius: 6px; color: var(--wpic-muted); background: transparent; }
401
402
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-border); }
402
403
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
403
404
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-segment-active); box-shadow: var(--wpic-segment-shadow); }
404
405
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:focus-visible { outline: 1px solid var(--wpic-accent); box-shadow: 0 0 0 3px var(--wpic-focus-ring); }
405
- .wpic-theme .wpic-modal-panel,
406
- .wpic-theme.wpic-tooltip-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
407
- .wpic-theme.wpic-tooltip-panel { box-shadow: inset 0 0 0 1px var(--wpic-border), 0 4px 12px rgb(0 0 0 / 0.15); }
406
+ .wpic-theme .wpic-modal-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
407
+ /* Tooltips keep an inverse surface, independent of popover customization. */
408
+ .wpic-tooltip-panel {
409
+ background: #242720;
410
+ color: #f7f8f5;
411
+ border: 1px solid rgb(255 255 255 / 0.12);
412
+ border-radius: 8px;
413
+ padding: 7px 11px;
414
+ box-shadow: 0 5px 16px rgb(0 0 0 / 0.2);
415
+ }
416
+ .dark .wpic-tooltip-panel:not([data-wpic-theme="light"]),
417
+ .wpic-tooltip-panel[data-wpic-theme="dark"] {
418
+ background: #090a05;
419
+ border: 0;
420
+ }
408
421
  .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
409
422
  .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
410
423
  .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }