@signal9/era-ui 30.5.0 → 30.5.1
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.
- package/CHANGELOG.md +6 -0
- package/dist/ui/card/card.svelte +36 -6
- package/dist/ui/card/card.svelte.d.ts +29 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [30.5.1](https://github.com/sig-nine/era-ui/compare/v30.5.0...v30.5.1) (2026-08-16)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
* **card:** a pressable card depresses, and the tones say what they paint ([7890b96](https://github.com/sig-nine/era-ui/commit/7890b969b5064df8a6716d530e21a82f23e68601))
|
|
6
|
+
|
|
1
7
|
## [30.5.0](https://github.com/sig-nine/era-ui/compare/v30.4.0...v30.5.0) (2026-08-16)
|
|
2
8
|
|
|
3
9
|
### Features
|
package/dist/ui/card/card.svelte
CHANGED
|
@@ -32,8 +32,17 @@
|
|
|
32
32
|
// was: the even-gap law, broken by default, in the component that
|
|
33
33
|
// bounds more consumer content than any other.
|
|
34
34
|
sectioned: { true: 'p-0', false: 'p-card' },
|
|
35
|
+
// A CARD YOU CAN PRESS DEPRESSES. `active:shadow-pressed` is on every
|
|
36
|
+
// other era control and was missing here, so a pressable card was the
|
|
37
|
+
// one thing in the library that lit up on hover and then did nothing
|
|
38
|
+
// under the finger — on bevel, where the pressed face is an inverted
|
|
39
|
+
// chisel, that is the difference between a control and a picture of
|
|
40
|
+
// one. Inert on flat (the token is `none`) and on glass (it resolves
|
|
41
|
+
// to the resting shadow), so only the surface that has a pressed face
|
|
42
|
+
// shows it. No content sink to go with it: the sink moves a control's
|
|
43
|
+
// single content wrapper, and a card's children are the consumer's.
|
|
35
44
|
interactive: {
|
|
36
|
-
true: 'cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
|
|
45
|
+
true: 'cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
|
|
37
46
|
}
|
|
38
47
|
},
|
|
39
48
|
defaultVariants: { tone: 'elevated', sectioned: false, interactive: false }
|
|
@@ -93,11 +102,32 @@
|
|
|
93
102
|
ref?: CardElement | null;
|
|
94
103
|
/**
|
|
95
104
|
* Surface tier the card paints on.
|
|
96
|
-
* - `elevated` (default): the lifted surface
|
|
97
|
-
*
|
|
98
|
-
* - `
|
|
99
|
-
*
|
|
100
|
-
* - `
|
|
105
|
+
* - `elevated` (default): the lifted surface, with a resting shadow. Use
|
|
106
|
+
* on the page background.
|
|
107
|
+
* - `surface`: the base surface tier, no shadow. Use when nesting cards
|
|
108
|
+
* inside another elevated container.
|
|
109
|
+
* - `well`: recessed. For content the surrounding UI puts INTO the card —
|
|
110
|
+
* a tool's output pane, a transcript body — the container twin of a
|
|
111
|
+
* text field's fill.
|
|
112
|
+
* - `flat`: no background; only the rounded/padded shell. For grouping
|
|
113
|
+
* content visually without adding contrast.
|
|
114
|
+
*
|
|
115
|
+
* READ THE CLASSES AND THEY LOOK SWAPPED. They are not, and this is
|
|
116
|
+
* worth a sentence because a consumer read them, believed it, and
|
|
117
|
+
* shipped flat cards for months. `surface` paints `bg-well` and `well`
|
|
118
|
+
* paints `bg-field`, because era's utility names describe FILLS rather
|
|
119
|
+
* than tiers: `bg-well` is the surface's own resting fill (it is what a
|
|
120
|
+
* panel is painted with, and it pairs with `shadow-well` when you want
|
|
121
|
+
* recessed chrome), and `bg-field` is the recessed fill a text input
|
|
122
|
+
* sits in. The tone names are the tiers; the class names are the paints.
|
|
123
|
+
*
|
|
124
|
+
* A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
|
|
125
|
+
* or `onclick` turns on the interactive face — hover, focus, press — but
|
|
126
|
+
* it deliberately does NOT override the tier you asked for, so a
|
|
127
|
+
* `surface` link card has no resting lift and reads flatter than the
|
|
128
|
+
* static cards around it. That combination was reported as a bug and it
|
|
129
|
+
* is a choice: a tone that silently changed under an event handler would
|
|
130
|
+
* be a worse one.
|
|
101
131
|
*/
|
|
102
132
|
tone?: 'elevated' | 'surface' | 'well' | 'flat';
|
|
103
133
|
/** Rendered above the body with a subtle divider. */
|
|
@@ -10,7 +10,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
false: "p-card";
|
|
11
11
|
};
|
|
12
12
|
interactive: {
|
|
13
|
-
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
13
|
+
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
14
14
|
};
|
|
15
15
|
}, undefined, "block w-full rounded-bar text-left text-fg", {
|
|
16
16
|
tone: {
|
|
@@ -24,7 +24,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
|
|
|
24
24
|
false: "p-card";
|
|
25
25
|
};
|
|
26
26
|
interactive: {
|
|
27
|
-
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
27
|
+
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
28
28
|
};
|
|
29
29
|
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
30
30
|
tone: {
|
|
@@ -38,7 +38,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
|
|
|
38
38
|
false: "p-card";
|
|
39
39
|
};
|
|
40
40
|
interactive: {
|
|
41
|
-
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
41
|
+
true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
|
|
42
42
|
};
|
|
43
43
|
}, undefined>>;
|
|
44
44
|
import type { Snippet } from 'svelte';
|
|
@@ -50,11 +50,32 @@ type $$ComponentProps = HTMLAttributes<HTMLElement> & AnchorBits & ButtonBits &
|
|
|
50
50
|
ref?: CardElement | null;
|
|
51
51
|
/**
|
|
52
52
|
* Surface tier the card paints on.
|
|
53
|
-
* - `elevated` (default): the lifted surface
|
|
54
|
-
*
|
|
55
|
-
* - `
|
|
56
|
-
*
|
|
57
|
-
* - `
|
|
53
|
+
* - `elevated` (default): the lifted surface, with a resting shadow. Use
|
|
54
|
+
* on the page background.
|
|
55
|
+
* - `surface`: the base surface tier, no shadow. Use when nesting cards
|
|
56
|
+
* inside another elevated container.
|
|
57
|
+
* - `well`: recessed. For content the surrounding UI puts INTO the card —
|
|
58
|
+
* a tool's output pane, a transcript body — the container twin of a
|
|
59
|
+
* text field's fill.
|
|
60
|
+
* - `flat`: no background; only the rounded/padded shell. For grouping
|
|
61
|
+
* content visually without adding contrast.
|
|
62
|
+
*
|
|
63
|
+
* READ THE CLASSES AND THEY LOOK SWAPPED. They are not, and this is
|
|
64
|
+
* worth a sentence because a consumer read them, believed it, and
|
|
65
|
+
* shipped flat cards for months. `surface` paints `bg-well` and `well`
|
|
66
|
+
* paints `bg-field`, because era's utility names describe FILLS rather
|
|
67
|
+
* than tiers: `bg-well` is the surface's own resting fill (it is what a
|
|
68
|
+
* panel is painted with, and it pairs with `shadow-well` when you want
|
|
69
|
+
* recessed chrome), and `bg-field` is the recessed fill a text input
|
|
70
|
+
* sits in. The tone names are the tiers; the class names are the paints.
|
|
71
|
+
*
|
|
72
|
+
* A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
|
|
73
|
+
* or `onclick` turns on the interactive face — hover, focus, press — but
|
|
74
|
+
* it deliberately does NOT override the tier you asked for, so a
|
|
75
|
+
* `surface` link card has no resting lift and reads flatter than the
|
|
76
|
+
* static cards around it. That combination was reported as a bug and it
|
|
77
|
+
* is a choice: a tone that silently changed under an event handler would
|
|
78
|
+
* be a worse one.
|
|
58
79
|
*/
|
|
59
80
|
tone?: 'elevated' | 'surface' | 'well' | 'flat';
|
|
60
81
|
/** Rendered above the body with a subtle divider. */
|