@wpic/ui 0.9.2 → 0.9.4

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/COMPONENTS.md +2 -0
  3. package/dist/wpic-ui.css +10 -4
  4. package/package.json +1 -1
  5. package/src/style.css +10 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 0.9.4
2
+
3
+ - WCard: reduce body vertical padding independently of horizontal spacing (sm: 8/12px, md: 12/16px, lg: 16/24px).
4
+
5
+ ## 0.9.3
6
+
7
+ - WButton: restore a transparent surface and visible theme border for the outline variant; secondary buttons retain their filled surface.
8
+
1
9
  ## 0.9.2
2
10
 
3
11
  - WCard: add `titleSize="base"` for smaller card titles; default remains `lg`. Action button typography is unchanged.
package/COMPONENTS.md CHANGED
@@ -212,6 +212,8 @@ click: [e: MouseEvent]
212
212
 
213
213
  Header titles default to `titleSize="lg"` (`text-lg`, 18px) and semibold weight. Use `titleSize="base"` for `text-base` (16px). This styling applies only to the title wrapper (including a heading in the title slot), not action buttons.
214
214
 
215
+ Body padding uses smaller vertical spacing than horizontal spacing: sm 0.5/0.75rem, md 0.75/1rem, lg 1/1.5rem (vertical/horizontal).
216
+
215
217
  **Import:** `import { WCard } from '@wpic/ui'`
216
218
 
217
219
  **Props:**
package/dist/wpic-ui.css CHANGED
@@ -65,9 +65,9 @@
65
65
  .wpic-card--borderless {
66
66
  border: 0;
67
67
  }
68
- .wpic-card--padding-sm { --wpic-card-padding-x: 0.75rem; --wpic-card-padding-y: 0.75rem; --wpic-card-empty-padding-y: 0.75rem; }
69
- .wpic-card--padding-md { --wpic-card-padding-x: 1rem; --wpic-card-padding-y: 1rem; --wpic-card-empty-padding-y: 1rem; }
70
- .wpic-card--padding-lg { --wpic-card-padding-x: 1.5rem; --wpic-card-padding-y: 1.5rem; --wpic-card-empty-padding-y: 1.5rem; }
68
+ .wpic-card--padding-sm { --wpic-card-padding-x: 0.75rem; --wpic-card-padding-y: 0.5rem; --wpic-card-empty-padding-y: 0.75rem; }
69
+ .wpic-card--padding-md { --wpic-card-padding-x: 1rem; --wpic-card-padding-y: 0.75rem; --wpic-card-empty-padding-y: 1rem; }
70
+ .wpic-card--padding-lg { --wpic-card-padding-x: 1.5rem; --wpic-card-padding-y: 1rem; --wpic-card-empty-padding-y: 1.5rem; }
71
71
  .wpic-card__title > :where(h1, h2, h3, h4, h5, h6) {
72
72
  font: inherit;
73
73
  margin: 0;
@@ -373,12 +373,18 @@ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
373
373
  }
374
374
  .wpic-theme .wpic-button[data-variant="primary"]:hover:not(:disabled),
375
375
  .wpic-theme .wpic-range-apply:hover:not(:disabled) { background: var(--wpic-button-primary-hover); }
376
- .wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]) {
376
+ .wpic-theme .wpic-button[data-variant="secondary"] {
377
377
  background: var(--wpic-secondary);
378
378
  color: var(--wpic-on-secondary);
379
379
  border-color: transparent;
380
380
  box-shadow: var(--wpic-secondary-shadow);
381
381
  }
382
+ .wpic-theme .wpic-button[data-variant="outline"] {
383
+ background: transparent;
384
+ color: var(--wpic-text);
385
+ border: 1px solid var(--wpic-border);
386
+ box-shadow: none;
387
+ }
382
388
  .wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]):hover:not(:disabled) { background: var(--wpic-secondary-hover); }
383
389
  .wpic-theme .wpic-button:focus-visible {
384
390
  outline: 1px solid var(--wpic-accent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wpic/ui",
3
- "version": "0.9.2",
3
+ "version": "0.9.4",
4
4
  "type": "module",
5
5
  "description": "WPIC shared Vue 3 component library",
6
6
  "publishConfig": {
package/src/style.css CHANGED
@@ -64,9 +64,9 @@
64
64
  .wpic-card--borderless {
65
65
  border: 0;
66
66
  }
67
- .wpic-card--padding-sm { --wpic-card-padding-x: 0.75rem; --wpic-card-padding-y: 0.75rem; --wpic-card-empty-padding-y: 0.75rem; }
68
- .wpic-card--padding-md { --wpic-card-padding-x: 1rem; --wpic-card-padding-y: 1rem; --wpic-card-empty-padding-y: 1rem; }
69
- .wpic-card--padding-lg { --wpic-card-padding-x: 1.5rem; --wpic-card-padding-y: 1.5rem; --wpic-card-empty-padding-y: 1.5rem; }
67
+ .wpic-card--padding-sm { --wpic-card-padding-x: 0.75rem; --wpic-card-padding-y: 0.5rem; --wpic-card-empty-padding-y: 0.75rem; }
68
+ .wpic-card--padding-md { --wpic-card-padding-x: 1rem; --wpic-card-padding-y: 0.75rem; --wpic-card-empty-padding-y: 1rem; }
69
+ .wpic-card--padding-lg { --wpic-card-padding-x: 1.5rem; --wpic-card-padding-y: 1rem; --wpic-card-empty-padding-y: 1.5rem; }
70
70
  .wpic-card__title > :where(h1, h2, h3, h4, h5, h6) {
71
71
  font: inherit;
72
72
  margin: 0;
@@ -372,12 +372,18 @@ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
372
372
  }
373
373
  .wpic-theme .wpic-button[data-variant="primary"]:hover:not(:disabled),
374
374
  .wpic-theme .wpic-range-apply:hover:not(:disabled) { background: var(--wpic-button-primary-hover); }
375
- .wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]) {
375
+ .wpic-theme .wpic-button[data-variant="secondary"] {
376
376
  background: var(--wpic-secondary);
377
377
  color: var(--wpic-on-secondary);
378
378
  border-color: transparent;
379
379
  box-shadow: var(--wpic-secondary-shadow);
380
380
  }
381
+ .wpic-theme .wpic-button[data-variant="outline"] {
382
+ background: transparent;
383
+ color: var(--wpic-text);
384
+ border: 1px solid var(--wpic-border);
385
+ box-shadow: none;
386
+ }
381
387
  .wpic-theme .wpic-button:is([data-variant="secondary"], [data-variant="outline"]):hover:not(:disabled) { background: var(--wpic-secondary-hover); }
382
388
  .wpic-theme .wpic-button:focus-visible {
383
389
  outline: 1px solid var(--wpic-accent);