@wpic/ui 0.6.1 → 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 +5 -0
  2. package/dist/wpic-ui.cjs +1 -1
  3. package/dist/wpic-ui.css +15 -3
  4. package/dist/wpic-ui.js +1 -1
  5. package/package.json +1 -1
  6. package/src/style.css +15 -3
package/dist/wpic-ui.css CHANGED
@@ -404,9 +404,21 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
404
404
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
405
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); }
406
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); }
407
- .wpic-theme .wpic-modal-panel,
408
- .wpic-theme.wpic-tooltip-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
409
- .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
+ }
410
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); }
411
423
  .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
412
424
  .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
package/dist/wpic-ui.js CHANGED
@@ -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.1",
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
@@ -403,9 +403,21 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
403
403
  .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
404
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); }
405
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); }
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); }
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
+ }
409
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); }
410
422
  .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
411
423
  .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }