@rcarls/rc-card 0.0.0-next-20260921045401
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 +52 -0
- package/README.md +18 -0
- package/dist/custom-elements.json +596 -0
- package/dist/rc-card-GT572NkA.js +296 -0
- package/dist/rc-card-GT572NkA.js.map +1 -0
- package/dist/rc-card-define.js +6 -0
- package/dist/rc-card-define.js.map +1 -0
- package/dist/rc-card.js +5 -0
- package/dist/rc-card.js.map +1 -0
- package/dist/types/packages/rc-card/src/define.d.ts +1 -0
- package/dist/types/packages/rc-card/src/index.d.ts +1 -0
- package/dist/types/packages/rc-card/src/rc-card.d.ts +125 -0
- package/dist/types/packages/rc-card/src/rc-card.styles.d.ts +2 -0
- package/package.json +65 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# @rcarls/rc-card
|
|
2
|
+
|
|
3
|
+
## 0.0.0-next-20260921045401
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [50d5610]
|
|
8
|
+
- Updated dependencies [4341311]
|
|
9
|
+
- @rcarls/rc-common@0.0.0-next-20260921045401
|
|
10
|
+
|
|
11
|
+
## 0.6.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- f099b02: Add declarative horizontal cards with a two-fifths media column and symmetric
|
|
16
|
+
row and column grid coordination properties.
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- a108336: Warn in development when `rc-card`/`rc-list-item` has `interactive` set but
|
|
21
|
+
no way to resolve a click target: no `action-target`, and for
|
|
22
|
+
`rc-list-item`, no native child checkbox/radio either. Surface clicks
|
|
23
|
+
silently go nowhere in that state; the warning now says so at the point
|
|
24
|
+
the row or card is set up wrong, instead of leaving it to be discovered
|
|
25
|
+
by a user tapping a dead row or card.
|
|
26
|
+
- 6683eb9: Add shared, lifecycle-safe click delegation and let interactive list items
|
|
27
|
+
forward plain surface clicks to same-root native action targets while
|
|
28
|
+
preserving nested and modified clicks.
|
|
29
|
+
- Updated dependencies [6683eb9]
|
|
30
|
+
- Updated dependencies [ee7ba6c]
|
|
31
|
+
- Updated dependencies [30eb232]
|
|
32
|
+
- @rcarls/rc-common@0.6.0
|
|
33
|
+
|
|
34
|
+
## 0.5.0
|
|
35
|
+
|
|
36
|
+
## 0.4.2
|
|
37
|
+
|
|
38
|
+
## 0.4.1
|
|
39
|
+
|
|
40
|
+
## 0.4.0
|
|
41
|
+
|
|
42
|
+
### Minor Changes
|
|
43
|
+
|
|
44
|
+
- f36cd09: Add the rc-card package for neutral structural card surfaces.
|
|
45
|
+
|
|
46
|
+
### Patch Changes
|
|
47
|
+
|
|
48
|
+
- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
|
|
49
|
+
Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
|
|
50
|
+
- 000283d: Document the `selected`, `disabled`, `interactive`, and `has-*` slot-presence
|
|
51
|
+
attributes and all `rc-card` CSS custom properties in the generated API
|
|
52
|
+
reference.
|
package/README.md
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# @rcarls/rc-card
|
|
2
|
+
|
|
3
|
+
Design-system-neutral vertical and horizontal card shell with structural slots and parts.
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<rc-card interactive action-target="recipe-link">
|
|
7
|
+
<img slot="media" src="recipe.jpg" alt="" />
|
|
8
|
+
<a id="recipe-link" slot="title" href="/recipes/pie">Apple pie</a>
|
|
9
|
+
<p>Flaky crust, bright apples.</p>
|
|
10
|
+
</rc-card>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
The host owns structure and layout, including one `rem` of default body padding.
|
|
14
|
+
Authors provide native anchors or buttons for semantics and keyboard access.
|
|
15
|
+
|
|
16
|
+
Set `orientation="horizontal"` for a two-column card with a two-fifths media
|
|
17
|
+
column. Every structural row and column remains configurable through the
|
|
18
|
+
component's public grid custom properties.
|
|
@@ -0,0 +1,596 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/define.ts",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "custom-element-definition",
|
|
12
|
+
"name": "rc-card",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "RCCard",
|
|
15
|
+
"module": "/src/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "*",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "*",
|
|
23
|
+
"module": "src/index.js"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"kind": "javascript-module",
|
|
30
|
+
"path": "src/index.ts",
|
|
31
|
+
"declarations": [],
|
|
32
|
+
"exports": [
|
|
33
|
+
{
|
|
34
|
+
"kind": "js",
|
|
35
|
+
"name": "*",
|
|
36
|
+
"declaration": {
|
|
37
|
+
"name": "*",
|
|
38
|
+
"module": "src/rc-card.js"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "javascript-module",
|
|
45
|
+
"path": "src/rc-card.ts",
|
|
46
|
+
"declarations": [
|
|
47
|
+
{
|
|
48
|
+
"kind": "class",
|
|
49
|
+
"description": "Design-system-neutral card shell with first-class structural parts and\noptional pointer delegation to an author-provided anchor or button.",
|
|
50
|
+
"name": "RCCard",
|
|
51
|
+
"cssProperties": [
|
|
52
|
+
{
|
|
53
|
+
"description": "Grid template rows for the host's structural regions.",
|
|
54
|
+
"name": "--rc-card-grid-template-rows",
|
|
55
|
+
"default": "auto auto auto 1fr auto auto"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"description": "Grid template columns for the host's structural regions. Horizontal cards default to `minmax(0, 2fr) minmax(0, 3fr)`.",
|
|
59
|
+
"name": "--rc-card-grid-template-columns",
|
|
60
|
+
"default": "minmax(0, 1fr)"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"description": "Card border.",
|
|
64
|
+
"name": "--rc-card-border",
|
|
65
|
+
"default": "0"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"description": "Card border radius.",
|
|
69
|
+
"name": "--rc-card-radius",
|
|
70
|
+
"default": "0"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"description": "Card background.",
|
|
74
|
+
"name": "--rc-card-bg",
|
|
75
|
+
"default": "Canvas"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"description": "Card text color.",
|
|
79
|
+
"name": "--rc-card-color",
|
|
80
|
+
"default": "CanvasText"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"description": "Card box shadow.",
|
|
84
|
+
"name": "--rc-card-shadow",
|
|
85
|
+
"default": "none"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"description": "Background of the non-interactive container overlay.",
|
|
89
|
+
"name": "--rc-card-container-bg",
|
|
90
|
+
"default": "transparent"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "State-layer overlay color.",
|
|
94
|
+
"name": "--rc-card-state-layer-bg",
|
|
95
|
+
"default": "currentColor"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"description": "State-layer opacity transition duration.",
|
|
99
|
+
"name": "--rc-card-state-layer-duration",
|
|
100
|
+
"default": "150ms"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"description": "State-layer opacity transition easing.",
|
|
104
|
+
"name": "--rc-card-state-layer-easing",
|
|
105
|
+
"default": "ease"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"description": "State-layer opacity on hover (interactive cards only).",
|
|
109
|
+
"name": "--rc-card-hover-state-layer-opacity",
|
|
110
|
+
"default": "0"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"description": "State-layer opacity on active press (interactive cards only).",
|
|
114
|
+
"name": "--rc-card-pressed-state-layer-opacity",
|
|
115
|
+
"default": "0"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"description": "Shared block-axis padding fallback for regions that don't set their own `*-padding-block` property. Defers to each region's own default (0 for header/title/subtitle/actions/footer, 1rem for body) when unset.",
|
|
119
|
+
"name": "--rc-card-padding-block"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"description": "Shared inline-axis padding fallback for regions that don't set their own `*-padding-inline` property. Defers to each region's own default (0 for header/title/subtitle/actions/footer, 1rem for body) when unset.",
|
|
123
|
+
"name": "--rc-card-padding-inline"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"description": "Grid row for the media region.",
|
|
127
|
+
"name": "--rc-card-media-grid-row",
|
|
128
|
+
"default": "auto"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"description": "Grid column for the media region.",
|
|
132
|
+
"name": "--rc-card-media-grid-column",
|
|
133
|
+
"default": "auto"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"description": "Grid row for the header region.",
|
|
137
|
+
"name": "--rc-card-header-grid-row",
|
|
138
|
+
"default": "auto"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"description": "Grid column for the header region.",
|
|
142
|
+
"name": "--rc-card-header-grid-column",
|
|
143
|
+
"default": "auto"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"description": "Header block-axis padding.",
|
|
147
|
+
"name": "--rc-card-header-padding-block",
|
|
148
|
+
"default": "var(--rc-card-padding-block, 0) 0"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"description": "Header inline-axis padding.",
|
|
152
|
+
"name": "--rc-card-header-padding-inline",
|
|
153
|
+
"default": "var(--rc-card-padding-inline, 0)"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"description": "Grid row for the title region.",
|
|
157
|
+
"name": "--rc-card-title-grid-row",
|
|
158
|
+
"default": "auto"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"description": "Grid column for the title region.",
|
|
162
|
+
"name": "--rc-card-title-grid-column",
|
|
163
|
+
"default": "auto"
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"description": "Title block-axis padding.",
|
|
167
|
+
"name": "--rc-card-title-padding-block",
|
|
168
|
+
"default": "var(--rc-card-padding-block, 0) 0"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"description": "Title inline-axis padding.",
|
|
172
|
+
"name": "--rc-card-title-padding-inline",
|
|
173
|
+
"default": "var(--rc-card-padding-inline, 0)"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"description": "Title text color.",
|
|
177
|
+
"name": "--rc-card-title-color",
|
|
178
|
+
"default": "inherit"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"description": "Title font shorthand.",
|
|
182
|
+
"name": "--rc-card-title-font",
|
|
183
|
+
"default": "inherit"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"description": "Grid row for the subtitle region.",
|
|
187
|
+
"name": "--rc-card-subtitle-grid-row",
|
|
188
|
+
"default": "auto"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"description": "Grid column for the subtitle region.",
|
|
192
|
+
"name": "--rc-card-subtitle-grid-column",
|
|
193
|
+
"default": "auto"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"description": "Subtitle block-axis padding.",
|
|
197
|
+
"name": "--rc-card-subtitle-padding-block",
|
|
198
|
+
"default": "0"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"description": "Subtitle inline-axis padding.",
|
|
202
|
+
"name": "--rc-card-subtitle-padding-inline",
|
|
203
|
+
"default": "var(--rc-card-padding-inline, 0)"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"description": "Subtitle text color.",
|
|
207
|
+
"name": "--rc-card-subtitle-color",
|
|
208
|
+
"default": "inherit"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"description": "Subtitle font shorthand.",
|
|
212
|
+
"name": "--rc-card-subtitle-font",
|
|
213
|
+
"default": "inherit"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"description": "Grid row for the body region.",
|
|
217
|
+
"name": "--rc-card-body-grid-row",
|
|
218
|
+
"default": "auto"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"description": "Grid column for the body region.",
|
|
222
|
+
"name": "--rc-card-body-grid-column",
|
|
223
|
+
"default": "auto"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"description": "Body block-axis padding.",
|
|
227
|
+
"name": "--rc-card-body-padding-block",
|
|
228
|
+
"default": "var(--rc-card-padding-block, 1rem)"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"description": "Body inline-axis padding.",
|
|
232
|
+
"name": "--rc-card-body-padding-inline",
|
|
233
|
+
"default": "var(--rc-card-padding-inline, 1rem)"
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"description": "Grid row for the actions region.",
|
|
237
|
+
"name": "--rc-card-actions-grid-row",
|
|
238
|
+
"default": "auto"
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"description": "Grid column for the actions region.",
|
|
242
|
+
"name": "--rc-card-actions-grid-column",
|
|
243
|
+
"default": "auto"
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"description": "Justify-content for the actions row.",
|
|
247
|
+
"name": "--rc-card-actions-justify",
|
|
248
|
+
"default": "flex-end"
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"description": "Gap between action items.",
|
|
252
|
+
"name": "--rc-card-actions-gap",
|
|
253
|
+
"default": "0"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"description": "Actions block-axis padding.",
|
|
257
|
+
"name": "--rc-card-actions-padding-block",
|
|
258
|
+
"default": "0 var(--rc-card-padding-block, 0)"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"description": "Actions inline-axis padding.",
|
|
262
|
+
"name": "--rc-card-actions-padding-inline",
|
|
263
|
+
"default": "var(--rc-card-padding-inline, 0)"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"description": "Grid row for the footer region.",
|
|
267
|
+
"name": "--rc-card-footer-grid-row",
|
|
268
|
+
"default": "auto"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"description": "Grid column for the footer region.",
|
|
272
|
+
"name": "--rc-card-footer-grid-column",
|
|
273
|
+
"default": "auto"
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
"description": "Footer block-axis padding.",
|
|
277
|
+
"name": "--rc-card-footer-padding-block",
|
|
278
|
+
"default": "0 var(--rc-card-padding-block, 0)"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"description": "Footer inline-axis padding.",
|
|
282
|
+
"name": "--rc-card-footer-padding-inline",
|
|
283
|
+
"default": "var(--rc-card-padding-inline, 0)"
|
|
284
|
+
}
|
|
285
|
+
],
|
|
286
|
+
"cssParts": [
|
|
287
|
+
{
|
|
288
|
+
"description": "Non-interactive visual container overlay.",
|
|
289
|
+
"name": "container"
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"description": "Media region wrapper.",
|
|
293
|
+
"name": "media"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"description": "Header region wrapper.",
|
|
297
|
+
"name": "header"
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"description": "Title region wrapper.",
|
|
301
|
+
"name": "title"
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"description": "Subtitle region wrapper.",
|
|
305
|
+
"name": "subtitle"
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"description": "Body region wrapper.",
|
|
309
|
+
"name": "body"
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"description": "Actions region wrapper.",
|
|
313
|
+
"name": "actions"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"description": "Footer region wrapper.",
|
|
317
|
+
"name": "footer"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"description": "Non-interactive overlay for hover/pressed/ripple effects.",
|
|
321
|
+
"name": "state-layer"
|
|
322
|
+
}
|
|
323
|
+
],
|
|
324
|
+
"slots": [
|
|
325
|
+
{
|
|
326
|
+
"description": "Media region, typically an image or figure.",
|
|
327
|
+
"name": "media"
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"description": "Header content above title/body.",
|
|
331
|
+
"name": "header"
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"description": "Primary card title.",
|
|
335
|
+
"name": "title"
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"description": "Secondary title or metadata.",
|
|
339
|
+
"name": "subtitle"
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
"description": "Body content.",
|
|
343
|
+
"name": ""
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
"description": "Action row.",
|
|
347
|
+
"name": "actions"
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"description": "Footer content.",
|
|
351
|
+
"name": "footer"
|
|
352
|
+
}
|
|
353
|
+
],
|
|
354
|
+
"members": [
|
|
355
|
+
{
|
|
356
|
+
"kind": "field",
|
|
357
|
+
"name": "orientation",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "RCCardOrientation"
|
|
360
|
+
},
|
|
361
|
+
"default": "'vertical'",
|
|
362
|
+
"description": "Structural layout direction.",
|
|
363
|
+
"attribute": "orientation",
|
|
364
|
+
"reflects": true
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
"kind": "field",
|
|
368
|
+
"name": "selected",
|
|
369
|
+
"type": {
|
|
370
|
+
"text": "boolean"
|
|
371
|
+
},
|
|
372
|
+
"default": "false",
|
|
373
|
+
"description": "Declarative selected state for theme styling.",
|
|
374
|
+
"attribute": "selected",
|
|
375
|
+
"reflects": true
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"kind": "field",
|
|
379
|
+
"name": "disabled",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "boolean"
|
|
382
|
+
},
|
|
383
|
+
"default": "false",
|
|
384
|
+
"description": "Declarative disabled state. Disables action-target click forwarding.",
|
|
385
|
+
"attribute": "disabled",
|
|
386
|
+
"reflects": true
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"kind": "field",
|
|
390
|
+
"name": "interactive",
|
|
391
|
+
"type": {
|
|
392
|
+
"text": "boolean"
|
|
393
|
+
},
|
|
394
|
+
"default": "false",
|
|
395
|
+
"description": "Visual affordance for cards with an author-provided action target.",
|
|
396
|
+
"attribute": "interactive",
|
|
397
|
+
"reflects": true
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"kind": "field",
|
|
401
|
+
"name": "actionTarget",
|
|
402
|
+
"type": {
|
|
403
|
+
"text": "string"
|
|
404
|
+
},
|
|
405
|
+
"default": "''",
|
|
406
|
+
"description": "ID of a same-root anchor or button that receives forwarded surface clicks.",
|
|
407
|
+
"attribute": "action-target"
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"kind": "field",
|
|
411
|
+
"name": "_$media",
|
|
412
|
+
"type": {
|
|
413
|
+
"text": "Element[]"
|
|
414
|
+
},
|
|
415
|
+
"privacy": "private"
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"kind": "field",
|
|
419
|
+
"name": "_$header",
|
|
420
|
+
"type": {
|
|
421
|
+
"text": "Element[]"
|
|
422
|
+
},
|
|
423
|
+
"privacy": "private"
|
|
424
|
+
},
|
|
425
|
+
{
|
|
426
|
+
"kind": "field",
|
|
427
|
+
"name": "_$title",
|
|
428
|
+
"type": {
|
|
429
|
+
"text": "Element[]"
|
|
430
|
+
},
|
|
431
|
+
"privacy": "private"
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"kind": "field",
|
|
435
|
+
"name": "_$subtitle",
|
|
436
|
+
"type": {
|
|
437
|
+
"text": "Element[]"
|
|
438
|
+
},
|
|
439
|
+
"privacy": "private"
|
|
440
|
+
},
|
|
441
|
+
{
|
|
442
|
+
"kind": "field",
|
|
443
|
+
"name": "_$actions",
|
|
444
|
+
"type": {
|
|
445
|
+
"text": "Element[]"
|
|
446
|
+
},
|
|
447
|
+
"privacy": "private"
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"kind": "field",
|
|
451
|
+
"name": "_$footer",
|
|
452
|
+
"type": {
|
|
453
|
+
"text": "Element[]"
|
|
454
|
+
},
|
|
455
|
+
"privacy": "private"
|
|
456
|
+
},
|
|
457
|
+
{
|
|
458
|
+
"kind": "field",
|
|
459
|
+
"name": "_slotMicrotaskQueued",
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "boolean"
|
|
462
|
+
},
|
|
463
|
+
"privacy": "private",
|
|
464
|
+
"default": "false"
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"kind": "method",
|
|
468
|
+
"name": "_handleSlotChange",
|
|
469
|
+
"privacy": "private",
|
|
470
|
+
"return": {
|
|
471
|
+
"type": {
|
|
472
|
+
"text": "void"
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
"kind": "method",
|
|
478
|
+
"name": "_syncSlotPresence",
|
|
479
|
+
"privacy": "private",
|
|
480
|
+
"return": {
|
|
481
|
+
"type": {
|
|
482
|
+
"text": "void"
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
"kind": "method",
|
|
488
|
+
"name": "_resolveActionTarget",
|
|
489
|
+
"privacy": "private",
|
|
490
|
+
"return": {
|
|
491
|
+
"type": {
|
|
492
|
+
"text": "HTMLAnchorElement | HTMLButtonElement | null"
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
],
|
|
497
|
+
"attributes": [
|
|
498
|
+
{
|
|
499
|
+
"description": "Declarative selected state for theme styling.",
|
|
500
|
+
"name": "selected",
|
|
501
|
+
"type": {
|
|
502
|
+
"text": "boolean"
|
|
503
|
+
},
|
|
504
|
+
"default": "false",
|
|
505
|
+
"fieldName": "selected"
|
|
506
|
+
},
|
|
507
|
+
{
|
|
508
|
+
"description": "Declarative disabled state. Disables action-target click forwarding.",
|
|
509
|
+
"name": "disabled",
|
|
510
|
+
"type": {
|
|
511
|
+
"text": "boolean"
|
|
512
|
+
},
|
|
513
|
+
"default": "false",
|
|
514
|
+
"fieldName": "disabled"
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
"description": "Visual affordance for cards with an author-provided action target.",
|
|
518
|
+
"name": "interactive",
|
|
519
|
+
"type": {
|
|
520
|
+
"text": "boolean"
|
|
521
|
+
},
|
|
522
|
+
"default": "false",
|
|
523
|
+
"fieldName": "interactive"
|
|
524
|
+
},
|
|
525
|
+
{
|
|
526
|
+
"description": "ID of a same-root anchor or button that receives forwarded surface clicks.",
|
|
527
|
+
"name": "action-target",
|
|
528
|
+
"type": {
|
|
529
|
+
"text": "string"
|
|
530
|
+
},
|
|
531
|
+
"default": "''",
|
|
532
|
+
"fieldName": "actionTarget"
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"description": "Structural layout direction.",
|
|
536
|
+
"name": "orientation",
|
|
537
|
+
"type": {
|
|
538
|
+
"text": "RCCardOrientation"
|
|
539
|
+
},
|
|
540
|
+
"default": "'vertical'",
|
|
541
|
+
"fieldName": "orientation"
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"description": "Present when the `media` slot has assigned content.",
|
|
545
|
+
"name": "has-media"
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
"description": "Present when the `header` slot has assigned content.",
|
|
549
|
+
"name": "has-header"
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
"description": "Present when the `title` slot has assigned content.",
|
|
553
|
+
"name": "has-title"
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"description": "Present when the `subtitle` slot has assigned content.",
|
|
557
|
+
"name": "has-subtitle"
|
|
558
|
+
},
|
|
559
|
+
{
|
|
560
|
+
"description": "Present when the `actions` slot has assigned content.",
|
|
561
|
+
"name": "has-actions"
|
|
562
|
+
},
|
|
563
|
+
{
|
|
564
|
+
"description": "Present when the `footer` slot has assigned content.",
|
|
565
|
+
"name": "has-footer"
|
|
566
|
+
}
|
|
567
|
+
],
|
|
568
|
+
"superclass": {
|
|
569
|
+
"name": "LitElement",
|
|
570
|
+
"package": "lit"
|
|
571
|
+
},
|
|
572
|
+
"tagName": "rc-card",
|
|
573
|
+
"customElement": true
|
|
574
|
+
}
|
|
575
|
+
],
|
|
576
|
+
"exports": [
|
|
577
|
+
{
|
|
578
|
+
"kind": "js",
|
|
579
|
+
"name": "RCCard",
|
|
580
|
+
"declaration": {
|
|
581
|
+
"name": "RCCard",
|
|
582
|
+
"module": "src/rc-card.ts"
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"kind": "js",
|
|
587
|
+
"name": "default",
|
|
588
|
+
"declaration": {
|
|
589
|
+
"name": "RCCard",
|
|
590
|
+
"module": "src/rc-card.ts"
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
]
|
|
594
|
+
}
|
|
595
|
+
]
|
|
596
|
+
}
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
import { css as u, LitElement as p, html as h } from "lit";
|
|
2
|
+
import { property as d, queryAssignedElements as o } from "lit/decorators.js";
|
|
3
|
+
import { ClickDelegateController as v } from "@rcarls/rc-common";
|
|
4
|
+
const m = u`
|
|
5
|
+
:host {
|
|
6
|
+
--_rc-card-grid-template-rows: auto auto auto 1fr auto auto;
|
|
7
|
+
--_rc-card-grid-template-columns: minmax(0, 1fr);
|
|
8
|
+
--_rc-card-media-grid-row: auto;
|
|
9
|
+
--_rc-card-media-grid-column: auto;
|
|
10
|
+
--_rc-card-header-grid-row: auto;
|
|
11
|
+
--_rc-card-header-grid-column: auto;
|
|
12
|
+
--_rc-card-title-grid-row: auto;
|
|
13
|
+
--_rc-card-title-grid-column: auto;
|
|
14
|
+
--_rc-card-subtitle-grid-row: auto;
|
|
15
|
+
--_rc-card-subtitle-grid-column: auto;
|
|
16
|
+
--_rc-card-body-grid-row: auto;
|
|
17
|
+
--_rc-card-body-grid-column: auto;
|
|
18
|
+
--_rc-card-actions-grid-row: auto;
|
|
19
|
+
--_rc-card-actions-grid-column: auto;
|
|
20
|
+
--_rc-card-footer-grid-row: auto;
|
|
21
|
+
--_rc-card-footer-grid-column: auto;
|
|
22
|
+
|
|
23
|
+
position: relative;
|
|
24
|
+
display: grid;
|
|
25
|
+
grid-template-rows: var(--rc-card-grid-template-rows, var(--_rc-card-grid-template-rows));
|
|
26
|
+
grid-template-columns: var(
|
|
27
|
+
--rc-card-grid-template-columns,
|
|
28
|
+
var(--_rc-card-grid-template-columns)
|
|
29
|
+
);
|
|
30
|
+
min-inline-size: 0;
|
|
31
|
+
border: var(--rc-card-border, 0);
|
|
32
|
+
border-radius: var(--rc-card-radius, 0);
|
|
33
|
+
background: var(--rc-card-bg, Canvas);
|
|
34
|
+
color: var(--rc-card-color, CanvasText);
|
|
35
|
+
box-shadow: var(--rc-card-shadow, none);
|
|
36
|
+
overflow: clip;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([orientation='horizontal']) {
|
|
41
|
+
--_rc-card-grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
|
42
|
+
--_rc-card-media-grid-row: 1 / -1;
|
|
43
|
+
--_rc-card-media-grid-column: 1;
|
|
44
|
+
--_rc-card-header-grid-row: 1;
|
|
45
|
+
--_rc-card-header-grid-column: 2;
|
|
46
|
+
--_rc-card-title-grid-row: 2;
|
|
47
|
+
--_rc-card-title-grid-column: 2;
|
|
48
|
+
--_rc-card-subtitle-grid-row: 3;
|
|
49
|
+
--_rc-card-subtitle-grid-column: 2;
|
|
50
|
+
--_rc-card-body-grid-row: 4;
|
|
51
|
+
--_rc-card-body-grid-column: 2;
|
|
52
|
+
--_rc-card-actions-grid-row: 5;
|
|
53
|
+
--_rc-card-actions-grid-column: 2;
|
|
54
|
+
--_rc-card-footer-grid-row: 6;
|
|
55
|
+
--_rc-card-footer-grid-column: 2;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([orientation='horizontal']:not([has-media])) {
|
|
59
|
+
--_rc-card-grid-template-columns: minmax(0, 1fr);
|
|
60
|
+
--_rc-card-header-grid-column: 1;
|
|
61
|
+
--_rc-card-title-grid-column: 1;
|
|
62
|
+
--_rc-card-subtitle-grid-column: 1;
|
|
63
|
+
--_rc-card-body-grid-column: 1;
|
|
64
|
+
--_rc-card-actions-grid-column: 1;
|
|
65
|
+
--_rc-card-footer-grid-column: 1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:host([hidden]) {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:host([interactive]:not([disabled])) {
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[part='container'],
|
|
77
|
+
[part='state-layer'] {
|
|
78
|
+
position: absolute;
|
|
79
|
+
inset: 0;
|
|
80
|
+
border-radius: inherit;
|
|
81
|
+
pointer-events: none;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[part='container'] {
|
|
85
|
+
background: var(--rc-card-container-bg, transparent);
|
|
86
|
+
z-index: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[part='state-layer'] {
|
|
90
|
+
background: var(--rc-card-state-layer-bg, currentColor);
|
|
91
|
+
opacity: 0;
|
|
92
|
+
transition: opacity var(--rc-card-state-layer-duration, 150ms)
|
|
93
|
+
var(--rc-card-state-layer-easing, ease);
|
|
94
|
+
z-index: 1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([interactive]:not([disabled]):hover) [part='state-layer'] {
|
|
98
|
+
opacity: var(--rc-card-hover-state-layer-opacity, 0);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([interactive]:not([disabled]):active) [part='state-layer'] {
|
|
102
|
+
opacity: var(--rc-card-pressed-state-layer-opacity, 0);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[part='media'],
|
|
106
|
+
[part='header'],
|
|
107
|
+
[part='title'],
|
|
108
|
+
[part='subtitle'],
|
|
109
|
+
[part='body'],
|
|
110
|
+
[part='actions'],
|
|
111
|
+
[part='footer'] {
|
|
112
|
+
position: relative;
|
|
113
|
+
z-index: 2;
|
|
114
|
+
min-inline-size: 0;
|
|
115
|
+
box-sizing: border-box;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[part='media'] {
|
|
119
|
+
grid-row: var(--rc-card-media-grid-row, var(--_rc-card-media-grid-row));
|
|
120
|
+
grid-column: var(--rc-card-media-grid-column, var(--_rc-card-media-grid-column));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
[part='header'] {
|
|
124
|
+
grid-row: var(--rc-card-header-grid-row, var(--_rc-card-header-grid-row));
|
|
125
|
+
grid-column: var(--rc-card-header-grid-column, var(--_rc-card-header-grid-column));
|
|
126
|
+
padding-block: var(--rc-card-header-padding-block, var(--rc-card-padding-block, 0) 0);
|
|
127
|
+
padding-inline: var(--rc-card-header-padding-inline, var(--rc-card-padding-inline, 0));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[part='title'] {
|
|
131
|
+
grid-row: var(--rc-card-title-grid-row, var(--_rc-card-title-grid-row));
|
|
132
|
+
grid-column: var(--rc-card-title-grid-column, var(--_rc-card-title-grid-column));
|
|
133
|
+
padding-block: var(--rc-card-title-padding-block, var(--rc-card-padding-block, 0) 0);
|
|
134
|
+
padding-inline: var(--rc-card-title-padding-inline, var(--rc-card-padding-inline, 0));
|
|
135
|
+
color: var(--rc-card-title-color, inherit);
|
|
136
|
+
font: var(--rc-card-title-font, inherit);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
[part='subtitle'] {
|
|
140
|
+
grid-row: var(--rc-card-subtitle-grid-row, var(--_rc-card-subtitle-grid-row));
|
|
141
|
+
grid-column: var(--rc-card-subtitle-grid-column, var(--_rc-card-subtitle-grid-column));
|
|
142
|
+
padding-block: var(--rc-card-subtitle-padding-block, 0);
|
|
143
|
+
padding-inline: var(--rc-card-subtitle-padding-inline, var(--rc-card-padding-inline, 0));
|
|
144
|
+
color: var(--rc-card-subtitle-color, inherit);
|
|
145
|
+
font: var(--rc-card-subtitle-font, inherit);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
[part='body'] {
|
|
149
|
+
grid-row: var(--rc-card-body-grid-row, var(--_rc-card-body-grid-row));
|
|
150
|
+
grid-column: var(--rc-card-body-grid-column, var(--_rc-card-body-grid-column));
|
|
151
|
+
min-block-size: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
[part='actions'] {
|
|
155
|
+
grid-row: var(--rc-card-actions-grid-row, var(--_rc-card-actions-grid-row));
|
|
156
|
+
grid-column: var(--rc-card-actions-grid-column, var(--_rc-card-actions-grid-column));
|
|
157
|
+
display: flex;
|
|
158
|
+
align-items: center;
|
|
159
|
+
justify-content: var(--rc-card-actions-justify, flex-end);
|
|
160
|
+
gap: var(--rc-card-actions-gap, 0);
|
|
161
|
+
padding-block: var(--rc-card-actions-padding-block, 0 var(--rc-card-padding-block, 0));
|
|
162
|
+
padding-inline: var(--rc-card-actions-padding-inline, var(--rc-card-padding-inline, 0));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
[part='footer'] {
|
|
166
|
+
grid-row: var(--rc-card-footer-grid-row, var(--_rc-card-footer-grid-row));
|
|
167
|
+
grid-column: var(--rc-card-footer-grid-column, var(--_rc-card-footer-grid-column));
|
|
168
|
+
padding-block: var(--rc-card-footer-padding-block, 0 var(--rc-card-padding-block, 0));
|
|
169
|
+
padding-inline: var(--rc-card-footer-padding-inline, var(--rc-card-padding-inline, 0));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host(:not([has-media])) [part='media'],
|
|
173
|
+
:host(:not([has-header])) [part='header'],
|
|
174
|
+
:host(:not([has-title])) [part='title'],
|
|
175
|
+
:host(:not([has-subtitle])) [part='subtitle'],
|
|
176
|
+
:host(:not([has-actions])) [part='actions'],
|
|
177
|
+
:host(:not([has-footer])) [part='footer'] {
|
|
178
|
+
display: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
::slotted([slot='media']) {
|
|
182
|
+
display: block;
|
|
183
|
+
inline-size: 100%;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
::slotted(:not([slot])) {
|
|
187
|
+
padding-block: var(--rc-card-body-padding-block, var(--rc-card-padding-block, 1rem));
|
|
188
|
+
padding-inline: var(--rc-card-body-padding-inline, var(--rc-card-padding-inline, 1rem));
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
@media (forced-colors: active) {
|
|
192
|
+
:host {
|
|
193
|
+
border-color: CanvasText;
|
|
194
|
+
background: Canvas;
|
|
195
|
+
color: CanvasText;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
[part='state-layer'] {
|
|
199
|
+
background: Highlight;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
`;
|
|
203
|
+
var b = Object.defineProperty, t = (s, e, a, c) => {
|
|
204
|
+
for (var i = void 0, n = s.length - 1, g; n >= 0; n--)
|
|
205
|
+
(g = s[n]) && (i = g(e, a, i) || i);
|
|
206
|
+
return i && b(e, a, i), i;
|
|
207
|
+
};
|
|
208
|
+
const _ = ["media", "header", "title", "subtitle", "actions", "footer"], l = class l extends p {
|
|
209
|
+
constructor() {
|
|
210
|
+
super(), this.orientation = "vertical", this.selected = !1, this.disabled = !1, this.interactive = !1, this.actionTarget = "", this._slotMicrotaskQueued = !1, new v(this, {
|
|
211
|
+
target: () => this._resolveActionTarget(),
|
|
212
|
+
disabled: () => this.disabled
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
firstUpdated() {
|
|
216
|
+
this._syncSlotPresence();
|
|
217
|
+
}
|
|
218
|
+
render() {
|
|
219
|
+
return h`
|
|
220
|
+
<div part="container" aria-hidden="true"></div>
|
|
221
|
+
<div part="media"><slot name="media" @slotchange=${this._handleSlotChange}></slot></div>
|
|
222
|
+
<div part="header"><slot name="header" @slotchange=${this._handleSlotChange}></slot></div>
|
|
223
|
+
<div part="title"><slot name="title" @slotchange=${this._handleSlotChange}></slot></div>
|
|
224
|
+
<div part="subtitle"><slot name="subtitle" @slotchange=${this._handleSlotChange}></slot></div>
|
|
225
|
+
<div part="body"><slot @slotchange=${this._handleSlotChange}></slot></div>
|
|
226
|
+
<div part="actions"><slot name="actions" @slotchange=${this._handleSlotChange}></slot></div>
|
|
227
|
+
<div part="footer"><slot name="footer" @slotchange=${this._handleSlotChange}></slot></div>
|
|
228
|
+
<div part="state-layer" aria-hidden="true"></div>
|
|
229
|
+
`;
|
|
230
|
+
}
|
|
231
|
+
_handleSlotChange() {
|
|
232
|
+
this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
|
|
233
|
+
this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlotPresence();
|
|
234
|
+
}));
|
|
235
|
+
}
|
|
236
|
+
_syncSlotPresence() {
|
|
237
|
+
const e = {
|
|
238
|
+
media: this._$media ?? [],
|
|
239
|
+
header: this._$header ?? [],
|
|
240
|
+
title: this._$title ?? [],
|
|
241
|
+
subtitle: this._$subtitle ?? [],
|
|
242
|
+
actions: this._$actions ?? [],
|
|
243
|
+
footer: this._$footer ?? []
|
|
244
|
+
};
|
|
245
|
+
for (const a of _)
|
|
246
|
+
this.toggleAttribute(`has-${a}`, e[a].length > 0);
|
|
247
|
+
}
|
|
248
|
+
_resolveActionTarget() {
|
|
249
|
+
const e = this.actionTarget.trim();
|
|
250
|
+
if (!e)
|
|
251
|
+
return null;
|
|
252
|
+
const a = this.getRootNode(), c = a instanceof Document || a instanceof ShadowRoot ? a.getElementById(e) : null;
|
|
253
|
+
return c instanceof HTMLAnchorElement || c instanceof HTMLButtonElement ? c : null;
|
|
254
|
+
}
|
|
255
|
+
updated(e) {
|
|
256
|
+
}
|
|
257
|
+
};
|
|
258
|
+
l.styles = m;
|
|
259
|
+
let r = l;
|
|
260
|
+
t([
|
|
261
|
+
d({ reflect: !0 })
|
|
262
|
+
], r.prototype, "orientation");
|
|
263
|
+
t([
|
|
264
|
+
d({ type: Boolean, reflect: !0 })
|
|
265
|
+
], r.prototype, "selected");
|
|
266
|
+
t([
|
|
267
|
+
d({ type: Boolean, reflect: !0 })
|
|
268
|
+
], r.prototype, "disabled");
|
|
269
|
+
t([
|
|
270
|
+
d({ type: Boolean, reflect: !0 })
|
|
271
|
+
], r.prototype, "interactive");
|
|
272
|
+
t([
|
|
273
|
+
d({ type: String, attribute: "action-target" })
|
|
274
|
+
], r.prototype, "actionTarget");
|
|
275
|
+
t([
|
|
276
|
+
o({ slot: "media", flatten: !0 })
|
|
277
|
+
], r.prototype, "_$media");
|
|
278
|
+
t([
|
|
279
|
+
o({ slot: "header", flatten: !0 })
|
|
280
|
+
], r.prototype, "_$header");
|
|
281
|
+
t([
|
|
282
|
+
o({ slot: "title", flatten: !0 })
|
|
283
|
+
], r.prototype, "_$title");
|
|
284
|
+
t([
|
|
285
|
+
o({ slot: "subtitle", flatten: !0 })
|
|
286
|
+
], r.prototype, "_$subtitle");
|
|
287
|
+
t([
|
|
288
|
+
o({ slot: "actions", flatten: !0 })
|
|
289
|
+
], r.prototype, "_$actions");
|
|
290
|
+
t([
|
|
291
|
+
o({ slot: "footer", flatten: !0 })
|
|
292
|
+
], r.prototype, "_$footer");
|
|
293
|
+
export {
|
|
294
|
+
r as R
|
|
295
|
+
};
|
|
296
|
+
//# sourceMappingURL=rc-card-GT572NkA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-card-GT572NkA.js","sources":["../src/rc-card.styles.ts","../src/rc-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n :host {\n --_rc-card-grid-template-rows: auto auto auto 1fr auto auto;\n --_rc-card-grid-template-columns: minmax(0, 1fr);\n --_rc-card-media-grid-row: auto;\n --_rc-card-media-grid-column: auto;\n --_rc-card-header-grid-row: auto;\n --_rc-card-header-grid-column: auto;\n --_rc-card-title-grid-row: auto;\n --_rc-card-title-grid-column: auto;\n --_rc-card-subtitle-grid-row: auto;\n --_rc-card-subtitle-grid-column: auto;\n --_rc-card-body-grid-row: auto;\n --_rc-card-body-grid-column: auto;\n --_rc-card-actions-grid-row: auto;\n --_rc-card-actions-grid-column: auto;\n --_rc-card-footer-grid-row: auto;\n --_rc-card-footer-grid-column: auto;\n\n position: relative;\n display: grid;\n grid-template-rows: var(--rc-card-grid-template-rows, var(--_rc-card-grid-template-rows));\n grid-template-columns: var(\n --rc-card-grid-template-columns,\n var(--_rc-card-grid-template-columns)\n );\n min-inline-size: 0;\n border: var(--rc-card-border, 0);\n border-radius: var(--rc-card-radius, 0);\n background: var(--rc-card-bg, Canvas);\n color: var(--rc-card-color, CanvasText);\n box-shadow: var(--rc-card-shadow, none);\n overflow: clip;\n box-sizing: border-box;\n }\n\n :host([orientation='horizontal']) {\n --_rc-card-grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n --_rc-card-media-grid-row: 1 / -1;\n --_rc-card-media-grid-column: 1;\n --_rc-card-header-grid-row: 1;\n --_rc-card-header-grid-column: 2;\n --_rc-card-title-grid-row: 2;\n --_rc-card-title-grid-column: 2;\n --_rc-card-subtitle-grid-row: 3;\n --_rc-card-subtitle-grid-column: 2;\n --_rc-card-body-grid-row: 4;\n --_rc-card-body-grid-column: 2;\n --_rc-card-actions-grid-row: 5;\n --_rc-card-actions-grid-column: 2;\n --_rc-card-footer-grid-row: 6;\n --_rc-card-footer-grid-column: 2;\n }\n\n :host([orientation='horizontal']:not([has-media])) {\n --_rc-card-grid-template-columns: minmax(0, 1fr);\n --_rc-card-header-grid-column: 1;\n --_rc-card-title-grid-column: 1;\n --_rc-card-subtitle-grid-column: 1;\n --_rc-card-body-grid-column: 1;\n --_rc-card-actions-grid-column: 1;\n --_rc-card-footer-grid-column: 1;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([interactive]:not([disabled])) {\n cursor: pointer;\n }\n\n [part='container'],\n [part='state-layer'] {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n }\n\n [part='container'] {\n background: var(--rc-card-container-bg, transparent);\n z-index: 0;\n }\n\n [part='state-layer'] {\n background: var(--rc-card-state-layer-bg, currentColor);\n opacity: 0;\n transition: opacity var(--rc-card-state-layer-duration, 150ms)\n var(--rc-card-state-layer-easing, ease);\n z-index: 1;\n }\n\n :host([interactive]:not([disabled]):hover) [part='state-layer'] {\n opacity: var(--rc-card-hover-state-layer-opacity, 0);\n }\n\n :host([interactive]:not([disabled]):active) [part='state-layer'] {\n opacity: var(--rc-card-pressed-state-layer-opacity, 0);\n }\n\n [part='media'],\n [part='header'],\n [part='title'],\n [part='subtitle'],\n [part='body'],\n [part='actions'],\n [part='footer'] {\n position: relative;\n z-index: 2;\n min-inline-size: 0;\n box-sizing: border-box;\n }\n\n [part='media'] {\n grid-row: var(--rc-card-media-grid-row, var(--_rc-card-media-grid-row));\n grid-column: var(--rc-card-media-grid-column, var(--_rc-card-media-grid-column));\n }\n\n [part='header'] {\n grid-row: var(--rc-card-header-grid-row, var(--_rc-card-header-grid-row));\n grid-column: var(--rc-card-header-grid-column, var(--_rc-card-header-grid-column));\n padding-block: var(--rc-card-header-padding-block, var(--rc-card-padding-block, 0) 0);\n padding-inline: var(--rc-card-header-padding-inline, var(--rc-card-padding-inline, 0));\n }\n\n [part='title'] {\n grid-row: var(--rc-card-title-grid-row, var(--_rc-card-title-grid-row));\n grid-column: var(--rc-card-title-grid-column, var(--_rc-card-title-grid-column));\n padding-block: var(--rc-card-title-padding-block, var(--rc-card-padding-block, 0) 0);\n padding-inline: var(--rc-card-title-padding-inline, var(--rc-card-padding-inline, 0));\n color: var(--rc-card-title-color, inherit);\n font: var(--rc-card-title-font, inherit);\n }\n\n [part='subtitle'] {\n grid-row: var(--rc-card-subtitle-grid-row, var(--_rc-card-subtitle-grid-row));\n grid-column: var(--rc-card-subtitle-grid-column, var(--_rc-card-subtitle-grid-column));\n padding-block: var(--rc-card-subtitle-padding-block, 0);\n padding-inline: var(--rc-card-subtitle-padding-inline, var(--rc-card-padding-inline, 0));\n color: var(--rc-card-subtitle-color, inherit);\n font: var(--rc-card-subtitle-font, inherit);\n }\n\n [part='body'] {\n grid-row: var(--rc-card-body-grid-row, var(--_rc-card-body-grid-row));\n grid-column: var(--rc-card-body-grid-column, var(--_rc-card-body-grid-column));\n min-block-size: 0;\n }\n\n [part='actions'] {\n grid-row: var(--rc-card-actions-grid-row, var(--_rc-card-actions-grid-row));\n grid-column: var(--rc-card-actions-grid-column, var(--_rc-card-actions-grid-column));\n display: flex;\n align-items: center;\n justify-content: var(--rc-card-actions-justify, flex-end);\n gap: var(--rc-card-actions-gap, 0);\n padding-block: var(--rc-card-actions-padding-block, 0 var(--rc-card-padding-block, 0));\n padding-inline: var(--rc-card-actions-padding-inline, var(--rc-card-padding-inline, 0));\n }\n\n [part='footer'] {\n grid-row: var(--rc-card-footer-grid-row, var(--_rc-card-footer-grid-row));\n grid-column: var(--rc-card-footer-grid-column, var(--_rc-card-footer-grid-column));\n padding-block: var(--rc-card-footer-padding-block, 0 var(--rc-card-padding-block, 0));\n padding-inline: var(--rc-card-footer-padding-inline, var(--rc-card-padding-inline, 0));\n }\n\n :host(:not([has-media])) [part='media'],\n :host(:not([has-header])) [part='header'],\n :host(:not([has-title])) [part='title'],\n :host(:not([has-subtitle])) [part='subtitle'],\n :host(:not([has-actions])) [part='actions'],\n :host(:not([has-footer])) [part='footer'] {\n display: none;\n }\n\n ::slotted([slot='media']) {\n display: block;\n inline-size: 100%;\n }\n\n ::slotted(:not([slot])) {\n padding-block: var(--rc-card-body-padding-block, var(--rc-card-padding-block, 1rem));\n padding-inline: var(--rc-card-body-padding-inline, var(--rc-card-padding-inline, 1rem));\n }\n\n @media (forced-colors: active) {\n :host {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n\n [part='state-layer'] {\n background: Highlight;\n }\n }\n`;\n\nexport default cardStyles;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { ClickDelegateController } from '@rcarls/rc-common';\n\nimport cardStyles from './rc-card.styles.js';\n\nexport type RCCardOrientation = 'vertical' | 'horizontal';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-card': RCCard;\n }\n}\n\nconst SLOT_NAMES = ['media', 'header', 'title', 'subtitle', 'actions', 'footer'] as const;\n\ntype SlotName = (typeof SLOT_NAMES)[number];\n\n/**\n * Design-system-neutral card shell with first-class structural parts and\n * optional pointer delegation to an author-provided anchor or button.\n *\n * @slot media - Media region, typically an image or figure.\n * @slot header - Header content above title/body.\n * @slot title - Primary card title.\n * @slot subtitle - Secondary title or metadata.\n * @slot - Body content.\n * @slot actions - Action row.\n * @slot footer - Footer content.\n *\n * @csspart container - Non-interactive visual container overlay.\n * @csspart media - Media region wrapper.\n * @csspart header - Header region wrapper.\n * @csspart title - Title region wrapper.\n * @csspart subtitle - Subtitle region wrapper.\n * @csspart body - Body region wrapper.\n * @csspart actions - Actions region wrapper.\n * @csspart footer - Footer region wrapper.\n * @csspart state-layer - Non-interactive overlay for hover/pressed/ripple effects.\n *\n * @attr selected - Declarative selected state for theme styling.\n * @attr disabled - Declarative disabled state. Disables action-target click forwarding.\n * @attr interactive - Visual affordance for cards with an author-provided action target.\n * @attr action-target - ID of a same-root anchor or button that receives forwarded surface clicks.\n * @attr orientation - Structural layout direction: `vertical` or `horizontal`.\n * @attr [has-media] - Present when the `media` slot has assigned content.\n * @attr [has-header] - Present when the `header` slot has assigned content.\n * @attr [has-title] - Present when the `title` slot has assigned content.\n * @attr [has-subtitle] - Present when the `subtitle` slot has assigned content.\n * @attr [has-actions] - Present when the `actions` slot has assigned content.\n * @attr [has-footer] - Present when the `footer` slot has assigned content.\n *\n * @cssprop [--rc-card-grid-template-rows=auto auto auto 1fr auto auto] - Grid template rows for\n * the host's structural regions.\n * @cssprop [--rc-card-grid-template-columns=minmax(0, 1fr)] - Grid template columns for the\n * host's structural regions. Horizontal cards default to `minmax(0, 2fr) minmax(0, 3fr)`.\n * @cssprop [--rc-card-border=0] - Card border.\n * @cssprop [--rc-card-radius=0] - Card border radius.\n * @cssprop [--rc-card-bg=Canvas] - Card background.\n * @cssprop [--rc-card-color=CanvasText] - Card text color.\n * @cssprop [--rc-card-shadow=none] - Card box shadow.\n * @cssprop [--rc-card-container-bg=transparent] - Background of the non-interactive container overlay.\n * @cssprop [--rc-card-state-layer-bg=currentColor] - State-layer overlay color.\n * @cssprop [--rc-card-state-layer-duration=150ms] - State-layer opacity transition duration.\n * @cssprop [--rc-card-state-layer-easing=ease] - State-layer opacity transition easing.\n * @cssprop [--rc-card-hover-state-layer-opacity=0] - State-layer opacity on hover (interactive\n * cards only).\n * @cssprop [--rc-card-pressed-state-layer-opacity=0] - State-layer opacity on active press\n * (interactive cards only).\n * @cssprop [--rc-card-padding-block] - Shared block-axis padding fallback for regions that don't\n * set their own `*-padding-block` property. Defers to each region's own default (0 for\n * header/title/subtitle/actions/footer, 1rem for body) when unset.\n * @cssprop [--rc-card-padding-inline] - Shared inline-axis padding fallback for regions that\n * don't set their own `*-padding-inline` property. Defers to each region's own default (0 for\n * header/title/subtitle/actions/footer, 1rem for body) when unset.\n * @cssprop [--rc-card-media-grid-row=auto] - Grid row for the media region.\n * @cssprop [--rc-card-media-grid-column=auto] - Grid column for the media region.\n * @cssprop [--rc-card-header-grid-row=auto] - Grid row for the header region.\n * @cssprop [--rc-card-header-grid-column=auto] - Grid column for the header region.\n * @cssprop [--rc-card-header-padding-block=var(--rc-card-padding-block, 0) 0] - Header block-axis padding.\n * @cssprop [--rc-card-header-padding-inline=var(--rc-card-padding-inline, 0)] - Header inline-axis padding.\n * @cssprop [--rc-card-title-grid-row=auto] - Grid row for the title region.\n * @cssprop [--rc-card-title-grid-column=auto] - Grid column for the title region.\n * @cssprop [--rc-card-title-padding-block=var(--rc-card-padding-block, 0) 0] - Title block-axis padding.\n * @cssprop [--rc-card-title-padding-inline=var(--rc-card-padding-inline, 0)] - Title inline-axis padding.\n * @cssprop [--rc-card-title-color=inherit] - Title text color.\n * @cssprop [--rc-card-title-font=inherit] - Title font shorthand.\n * @cssprop [--rc-card-subtitle-grid-row=auto] - Grid row for the subtitle region.\n * @cssprop [--rc-card-subtitle-grid-column=auto] - Grid column for the subtitle region.\n * @cssprop [--rc-card-subtitle-padding-block=0] - Subtitle block-axis padding.\n * @cssprop [--rc-card-subtitle-padding-inline=var(--rc-card-padding-inline, 0)] - Subtitle inline-axis padding.\n * @cssprop [--rc-card-subtitle-color=inherit] - Subtitle text color.\n * @cssprop [--rc-card-subtitle-font=inherit] - Subtitle font shorthand.\n * @cssprop [--rc-card-body-grid-row=auto] - Grid row for the body region.\n * @cssprop [--rc-card-body-grid-column=auto] - Grid column for the body region.\n * @cssprop [--rc-card-body-padding-block=var(--rc-card-padding-block, 1rem)] - Body block-axis padding.\n * @cssprop [--rc-card-body-padding-inline=var(--rc-card-padding-inline, 1rem)] - Body inline-axis padding.\n * @cssprop [--rc-card-actions-grid-row=auto] - Grid row for the actions region.\n * @cssprop [--rc-card-actions-grid-column=auto] - Grid column for the actions region.\n * @cssprop [--rc-card-actions-justify=flex-end] - Justify-content for the actions row.\n * @cssprop [--rc-card-actions-gap=0] - Gap between action items.\n * @cssprop [--rc-card-actions-padding-block=0 var(--rc-card-padding-block, 0)] - Actions block-axis padding.\n * @cssprop [--rc-card-actions-padding-inline=var(--rc-card-padding-inline, 0)] - Actions inline-axis padding.\n * @cssprop [--rc-card-footer-grid-row=auto] - Grid row for the footer region.\n * @cssprop [--rc-card-footer-grid-column=auto] - Grid column for the footer region.\n * @cssprop [--rc-card-footer-padding-block=0 var(--rc-card-padding-block, 0)] - Footer block-axis padding.\n * @cssprop [--rc-card-footer-padding-inline=var(--rc-card-padding-inline, 0)] - Footer inline-axis padding.\n */\nexport class RCCard extends LitElement {\n static override styles = cardStyles;\n\n /** Structural layout direction. */\n @property({ reflect: true })\n orientation: RCCardOrientation = 'vertical';\n\n /** Declarative selected state for theme styling. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Declarative disabled state. Disables action-target click forwarding. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Visual affordance for cards with an author-provided action target. */\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /** ID of a same-root anchor or button that receives forwarded surface clicks. */\n @property({ type: String, attribute: 'action-target' })\n actionTarget = '';\n\n @queryAssignedElements({ slot: 'media', flatten: true }) private _$media!: Element[];\n @queryAssignedElements({ slot: 'header', flatten: true }) private _$header!: Element[];\n @queryAssignedElements({ slot: 'title', flatten: true }) private _$title!: Element[];\n @queryAssignedElements({ slot: 'subtitle', flatten: true }) private _$subtitle!: Element[];\n @queryAssignedElements({ slot: 'actions', flatten: true }) private _$actions!: Element[];\n @queryAssignedElements({ slot: 'footer', flatten: true }) private _$footer!: Element[];\n\n private _slotMicrotaskQueued = false;\n\n protected override firstUpdated(): void {\n this._syncSlotPresence();\n }\n\n protected override render() {\n return html`\n <div part=\"container\" aria-hidden=\"true\"></div>\n <div part=\"media\"><slot name=\"media\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"header\"><slot name=\"header\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"title\"><slot name=\"title\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"subtitle\"><slot name=\"subtitle\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"body\"><slot @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"actions\"><slot name=\"actions\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"footer\"><slot name=\"footer\" @slotchange=${this._handleSlotChange}></slot></div>\n <div part=\"state-layer\" aria-hidden=\"true\"></div>\n `;\n }\n\n private _handleSlotChange(): void {\n if (this._slotMicrotaskQueued) {\n return;\n }\n\n this._slotMicrotaskQueued = true;\n\n queueMicrotask(() => {\n this._slotMicrotaskQueued = false;\n\n if (!this.isConnected) {\n return;\n }\n\n this._syncSlotPresence();\n });\n }\n\n private _syncSlotPresence(): void {\n const bySlot: Record<SlotName, Element[]> = {\n media: this._$media ?? [],\n header: this._$header ?? [],\n title: this._$title ?? [],\n subtitle: this._$subtitle ?? [],\n actions: this._$actions ?? [],\n footer: this._$footer ?? [],\n };\n\n for (const slotName of SLOT_NAMES) {\n this.toggleAttribute(`has-${slotName}`, bySlot[slotName].length > 0);\n }\n }\n\n private _resolveActionTarget(): HTMLAnchorElement | HTMLButtonElement | null {\n const id = this.actionTarget.trim();\n\n if (!id) {\n return null;\n }\n\n const root = this.getRootNode();\n const $target =\n root instanceof Document || root instanceof ShadowRoot ? root.getElementById(id) : null;\n\n if ($target instanceof HTMLAnchorElement || $target instanceof HTMLButtonElement) {\n return $target;\n }\n\n if (import.meta.env.DEV) {\n console.warn(`[rc-card] action-target=\"${id}\" must reference a same-root <a> or <button>.`);\n }\n\n return null;\n }\n\n constructor() {\n super();\n\n new ClickDelegateController(this, {\n target: () => this._resolveActionTarget(),\n disabled: () => this.disabled,\n });\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (!import.meta.env.DEV) {\n return;\n }\n\n if (!changed.has('interactive') && !changed.has('actionTarget')) {\n return;\n }\n\n if (this.interactive && !this.actionTarget.trim()) {\n console.warn(\n `[rc-card] interactive is set with no action-target, so surface clicks have ` +\n `nothing to forward to. Set action-target to a same-root <a> or <button>.`,\n this,\n );\n }\n }\n}\n\nexport default RCCard;\n"],"names":["cardStyles","css","SLOT_NAMES","_RCCard","LitElement","ClickDelegateController","html","bySlot","slotName","id","root","$target","changed","RCCard","__decorateClass","property","queryAssignedElements"],"mappings":";;;AAEO,MAAMA,IAAaC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACa1B,MAAMC,IAAa,CAAC,SAAS,UAAU,SAAS,YAAY,WAAW,QAAQ,GA8FlEC,IAAN,MAAMA,UAAeC,EAAW;AAAA,EAyGrC,cAAc;AACZ,UAAA,GArGF,KAAA,cAAiC,YAIjC,KAAA,WAAW,IAIX,KAAA,WAAW,IAIX,KAAA,cAAc,IAId,KAAA,eAAe,IASf,KAAQ,uBAAuB,IA8E7B,IAAIC,EAAwB,MAAM;AAAA,MAChC,QAAQ,MAAM,KAAK,qBAAA;AAAA,MACnB,UAAU,MAAM,KAAK;AAAA,IAAA,CACtB;AAAA,EACH;AAAA,EAhFmB,eAAqB;AACtC,SAAK,kBAAA;AAAA,EACP;AAAA,EAEmB,SAAS;AAC1B,WAAOC;AAAA;AAAA,yDAE8C,KAAK,iBAAiB;AAAA,2DACpB,KAAK,iBAAiB;AAAA,yDACxB,KAAK,iBAAiB;AAAA,+DAChB,KAAK,iBAAiB;AAAA,2CAC1C,KAAK,iBAAiB;AAAA,6DACJ,KAAK,iBAAiB;AAAA,2DACxB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAG/E;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,yBAIT,KAAK,uBAAuB,IAE5B,eAAe,MAAM;AAGnB,MAFA,KAAK,uBAAuB,IAEvB,KAAK,eAIV,KAAK,kBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEQ,oBAA0B;AAChC,UAAMC,IAAsC;AAAA,MAC1C,OAAO,KAAK,WAAW,CAAA;AAAA,MACvB,QAAQ,KAAK,YAAY,CAAA;AAAA,MACzB,OAAO,KAAK,WAAW,CAAA;AAAA,MACvB,UAAU,KAAK,cAAc,CAAA;AAAA,MAC7B,SAAS,KAAK,aAAa,CAAA;AAAA,MAC3B,QAAQ,KAAK,YAAY,CAAA;AAAA,IAAC;AAG5B,eAAWC,KAAYN;AACrB,WAAK,gBAAgB,OAAOM,CAAQ,IAAID,EAAOC,CAAQ,EAAE,SAAS,CAAC;AAAA,EAEvE;AAAA,EAEQ,uBAAqE;AAC3E,UAAMC,IAAK,KAAK,aAAa,KAAA;AAE7B,QAAI,CAACA;AACH,aAAO;AAGT,UAAMC,IAAO,KAAK,YAAA,GACZC,IACJD,aAAgB,YAAYA,aAAgB,aAAaA,EAAK,eAAeD,CAAE,IAAI;AAErF,WAAIE,aAAmB,qBAAqBA,aAAmB,oBACtDA,IAOF;AAAA,EACT;AAAA,EAWmB,QAAQC,GAAqC;AAAA,EAgBhE;AACF;AAlIET,EAAgB,SAASH;AADpB,IAAMa,IAANV;AAKLW,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAJhBF,EAKX,WAAA,aAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BF,EASX,WAAA,UAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BF,EAaX,WAAA,UAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BF,EAiBX,WAAA,aAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GApB3CF,EAqBX,WAAA,cAAA;AAEiEC,EAAA;AAAA,EAAhEE,EAAsB,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB5CH,EAuBsD,WAAA,SAAA;AACCC,EAAA;AAAA,EAAjEE,EAAsB,EAAE,MAAM,UAAU,SAAS,IAAM;AAAA,GAxB7CH,EAwBuD,WAAA,UAAA;AACDC,EAAA;AAAA,EAAhEE,EAAsB,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB5CH,EAyBsD,WAAA,SAAA;AACGC,EAAA;AAAA,EAAnEE,EAAsB,EAAE,MAAM,YAAY,SAAS,IAAM;AAAA,GA1B/CH,EA0ByD,WAAA,YAAA;AACDC,EAAA;AAAA,EAAlEE,EAAsB,EAAE,MAAM,WAAW,SAAS,IAAM;AAAA,GA3B9CH,EA2BwD,WAAA,WAAA;AACDC,EAAA;AAAA,EAAjEE,EAAsB,EAAE,MAAM,UAAU,SAAS,IAAM;AAAA,GA5B7CH,EA4BuD,WAAA,UAAA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-card-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCCard } from './index.js';\n\ncustomElements.get('rc-card') || customElements.define('rc-card', RCCard);\n\nexport * from './index.js';\n"],"names":["RCCard"],"mappings":";AAEA,eAAe,IAAI,SAAS,KAAK,eAAe,OAAO,WAAWA,CAAM;"}
|
package/dist/rc-card.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './rc-card.js';
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
export type RCCardOrientation = 'vertical' | 'horizontal';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'rc-card': RCCard;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Design-system-neutral card shell with first-class structural parts and
|
|
10
|
+
* optional pointer delegation to an author-provided anchor or button.
|
|
11
|
+
*
|
|
12
|
+
* @slot media - Media region, typically an image or figure.
|
|
13
|
+
* @slot header - Header content above title/body.
|
|
14
|
+
* @slot title - Primary card title.
|
|
15
|
+
* @slot subtitle - Secondary title or metadata.
|
|
16
|
+
* @slot - Body content.
|
|
17
|
+
* @slot actions - Action row.
|
|
18
|
+
* @slot footer - Footer content.
|
|
19
|
+
*
|
|
20
|
+
* @csspart container - Non-interactive visual container overlay.
|
|
21
|
+
* @csspart media - Media region wrapper.
|
|
22
|
+
* @csspart header - Header region wrapper.
|
|
23
|
+
* @csspart title - Title region wrapper.
|
|
24
|
+
* @csspart subtitle - Subtitle region wrapper.
|
|
25
|
+
* @csspart body - Body region wrapper.
|
|
26
|
+
* @csspart actions - Actions region wrapper.
|
|
27
|
+
* @csspart footer - Footer region wrapper.
|
|
28
|
+
* @csspart state-layer - Non-interactive overlay for hover/pressed/ripple effects.
|
|
29
|
+
*
|
|
30
|
+
* @attr selected - Declarative selected state for theme styling.
|
|
31
|
+
* @attr disabled - Declarative disabled state. Disables action-target click forwarding.
|
|
32
|
+
* @attr interactive - Visual affordance for cards with an author-provided action target.
|
|
33
|
+
* @attr action-target - ID of a same-root anchor or button that receives forwarded surface clicks.
|
|
34
|
+
* @attr orientation - Structural layout direction: `vertical` or `horizontal`.
|
|
35
|
+
* @attr [has-media] - Present when the `media` slot has assigned content.
|
|
36
|
+
* @attr [has-header] - Present when the `header` slot has assigned content.
|
|
37
|
+
* @attr [has-title] - Present when the `title` slot has assigned content.
|
|
38
|
+
* @attr [has-subtitle] - Present when the `subtitle` slot has assigned content.
|
|
39
|
+
* @attr [has-actions] - Present when the `actions` slot has assigned content.
|
|
40
|
+
* @attr [has-footer] - Present when the `footer` slot has assigned content.
|
|
41
|
+
*
|
|
42
|
+
* @cssprop [--rc-card-grid-template-rows=auto auto auto 1fr auto auto] - Grid template rows for
|
|
43
|
+
* the host's structural regions.
|
|
44
|
+
* @cssprop [--rc-card-grid-template-columns=minmax(0, 1fr)] - Grid template columns for the
|
|
45
|
+
* host's structural regions. Horizontal cards default to `minmax(0, 2fr) minmax(0, 3fr)`.
|
|
46
|
+
* @cssprop [--rc-card-border=0] - Card border.
|
|
47
|
+
* @cssprop [--rc-card-radius=0] - Card border radius.
|
|
48
|
+
* @cssprop [--rc-card-bg=Canvas] - Card background.
|
|
49
|
+
* @cssprop [--rc-card-color=CanvasText] - Card text color.
|
|
50
|
+
* @cssprop [--rc-card-shadow=none] - Card box shadow.
|
|
51
|
+
* @cssprop [--rc-card-container-bg=transparent] - Background of the non-interactive container overlay.
|
|
52
|
+
* @cssprop [--rc-card-state-layer-bg=currentColor] - State-layer overlay color.
|
|
53
|
+
* @cssprop [--rc-card-state-layer-duration=150ms] - State-layer opacity transition duration.
|
|
54
|
+
* @cssprop [--rc-card-state-layer-easing=ease] - State-layer opacity transition easing.
|
|
55
|
+
* @cssprop [--rc-card-hover-state-layer-opacity=0] - State-layer opacity on hover (interactive
|
|
56
|
+
* cards only).
|
|
57
|
+
* @cssprop [--rc-card-pressed-state-layer-opacity=0] - State-layer opacity on active press
|
|
58
|
+
* (interactive cards only).
|
|
59
|
+
* @cssprop [--rc-card-padding-block] - Shared block-axis padding fallback for regions that don't
|
|
60
|
+
* set their own `*-padding-block` property. Defers to each region's own default (0 for
|
|
61
|
+
* header/title/subtitle/actions/footer, 1rem for body) when unset.
|
|
62
|
+
* @cssprop [--rc-card-padding-inline] - Shared inline-axis padding fallback for regions that
|
|
63
|
+
* don't set their own `*-padding-inline` property. Defers to each region's own default (0 for
|
|
64
|
+
* header/title/subtitle/actions/footer, 1rem for body) when unset.
|
|
65
|
+
* @cssprop [--rc-card-media-grid-row=auto] - Grid row for the media region.
|
|
66
|
+
* @cssprop [--rc-card-media-grid-column=auto] - Grid column for the media region.
|
|
67
|
+
* @cssprop [--rc-card-header-grid-row=auto] - Grid row for the header region.
|
|
68
|
+
* @cssprop [--rc-card-header-grid-column=auto] - Grid column for the header region.
|
|
69
|
+
* @cssprop [--rc-card-header-padding-block=var(--rc-card-padding-block, 0) 0] - Header block-axis padding.
|
|
70
|
+
* @cssprop [--rc-card-header-padding-inline=var(--rc-card-padding-inline, 0)] - Header inline-axis padding.
|
|
71
|
+
* @cssprop [--rc-card-title-grid-row=auto] - Grid row for the title region.
|
|
72
|
+
* @cssprop [--rc-card-title-grid-column=auto] - Grid column for the title region.
|
|
73
|
+
* @cssprop [--rc-card-title-padding-block=var(--rc-card-padding-block, 0) 0] - Title block-axis padding.
|
|
74
|
+
* @cssprop [--rc-card-title-padding-inline=var(--rc-card-padding-inline, 0)] - Title inline-axis padding.
|
|
75
|
+
* @cssprop [--rc-card-title-color=inherit] - Title text color.
|
|
76
|
+
* @cssprop [--rc-card-title-font=inherit] - Title font shorthand.
|
|
77
|
+
* @cssprop [--rc-card-subtitle-grid-row=auto] - Grid row for the subtitle region.
|
|
78
|
+
* @cssprop [--rc-card-subtitle-grid-column=auto] - Grid column for the subtitle region.
|
|
79
|
+
* @cssprop [--rc-card-subtitle-padding-block=0] - Subtitle block-axis padding.
|
|
80
|
+
* @cssprop [--rc-card-subtitle-padding-inline=var(--rc-card-padding-inline, 0)] - Subtitle inline-axis padding.
|
|
81
|
+
* @cssprop [--rc-card-subtitle-color=inherit] - Subtitle text color.
|
|
82
|
+
* @cssprop [--rc-card-subtitle-font=inherit] - Subtitle font shorthand.
|
|
83
|
+
* @cssprop [--rc-card-body-grid-row=auto] - Grid row for the body region.
|
|
84
|
+
* @cssprop [--rc-card-body-grid-column=auto] - Grid column for the body region.
|
|
85
|
+
* @cssprop [--rc-card-body-padding-block=var(--rc-card-padding-block, 1rem)] - Body block-axis padding.
|
|
86
|
+
* @cssprop [--rc-card-body-padding-inline=var(--rc-card-padding-inline, 1rem)] - Body inline-axis padding.
|
|
87
|
+
* @cssprop [--rc-card-actions-grid-row=auto] - Grid row for the actions region.
|
|
88
|
+
* @cssprop [--rc-card-actions-grid-column=auto] - Grid column for the actions region.
|
|
89
|
+
* @cssprop [--rc-card-actions-justify=flex-end] - Justify-content for the actions row.
|
|
90
|
+
* @cssprop [--rc-card-actions-gap=0] - Gap between action items.
|
|
91
|
+
* @cssprop [--rc-card-actions-padding-block=0 var(--rc-card-padding-block, 0)] - Actions block-axis padding.
|
|
92
|
+
* @cssprop [--rc-card-actions-padding-inline=var(--rc-card-padding-inline, 0)] - Actions inline-axis padding.
|
|
93
|
+
* @cssprop [--rc-card-footer-grid-row=auto] - Grid row for the footer region.
|
|
94
|
+
* @cssprop [--rc-card-footer-grid-column=auto] - Grid column for the footer region.
|
|
95
|
+
* @cssprop [--rc-card-footer-padding-block=0 var(--rc-card-padding-block, 0)] - Footer block-axis padding.
|
|
96
|
+
* @cssprop [--rc-card-footer-padding-inline=var(--rc-card-padding-inline, 0)] - Footer inline-axis padding.
|
|
97
|
+
*/
|
|
98
|
+
export declare class RCCard extends LitElement {
|
|
99
|
+
static styles: import('lit').CSSResult;
|
|
100
|
+
/** Structural layout direction. */
|
|
101
|
+
orientation: RCCardOrientation;
|
|
102
|
+
/** Declarative selected state for theme styling. */
|
|
103
|
+
selected: boolean;
|
|
104
|
+
/** Declarative disabled state. Disables action-target click forwarding. */
|
|
105
|
+
disabled: boolean;
|
|
106
|
+
/** Visual affordance for cards with an author-provided action target. */
|
|
107
|
+
interactive: boolean;
|
|
108
|
+
/** ID of a same-root anchor or button that receives forwarded surface clicks. */
|
|
109
|
+
actionTarget: string;
|
|
110
|
+
private _$media;
|
|
111
|
+
private _$header;
|
|
112
|
+
private _$title;
|
|
113
|
+
private _$subtitle;
|
|
114
|
+
private _$actions;
|
|
115
|
+
private _$footer;
|
|
116
|
+
private _slotMicrotaskQueued;
|
|
117
|
+
protected firstUpdated(): void;
|
|
118
|
+
protected render(): import('lit').TemplateResult<1>;
|
|
119
|
+
private _handleSlotChange;
|
|
120
|
+
private _syncSlotPresence;
|
|
121
|
+
private _resolveActionTarget;
|
|
122
|
+
constructor();
|
|
123
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
124
|
+
}
|
|
125
|
+
export default RCCard;
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcarls/rc-card",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"version": "0.0.0-next-20260921045401",
|
|
7
|
+
"description": "Design-system-neutral vertical and horizontal card shell with structural slots and parts.",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/richardcarls/rc-webcomponents.git",
|
|
11
|
+
"directory": "packages/rc-card"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-card",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"module": "./dist/rc-card.js",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist/types/packages/rc-card/src/index.d.ts",
|
|
24
|
+
"default": "./dist/rc-card.js"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"./define": {
|
|
28
|
+
"import": {
|
|
29
|
+
"types": "./dist/types/packages/rc-card/src/define.d.ts",
|
|
30
|
+
"default": "./dist/rc-card-define.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"types": "./dist/types/packages/rc-card/src/index.d.ts",
|
|
35
|
+
"sideEffects": [
|
|
36
|
+
"./dist/rc-card-define.js"
|
|
37
|
+
],
|
|
38
|
+
"customElements": "dist/custom-elements.json",
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc && vite build && cem analyze",
|
|
41
|
+
"cem:analyze": "cem analyze",
|
|
42
|
+
"preview": "vite preview",
|
|
43
|
+
"test:browser": "vitest --run",
|
|
44
|
+
"test:browser:chrome": "vitest --run --project=chromium",
|
|
45
|
+
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@rcarls/rc-common": "0.0.0-next-20260921045401"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
52
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
53
|
+
"lit": "^3.0.0",
|
|
54
|
+
"playwright": "^1.56.0",
|
|
55
|
+
"rollup": "^4.60.2",
|
|
56
|
+
"typescript": "~5.9.3",
|
|
57
|
+
"vite": "^7.1.7",
|
|
58
|
+
"vite-plugin-dts": "^4.5.4",
|
|
59
|
+
"vitest": "^4.0.6",
|
|
60
|
+
"vitest-browser-lit": "^1.0.1"
|
|
61
|
+
},
|
|
62
|
+
"peerDependencies": {
|
|
63
|
+
"lit": "^3.0.0"
|
|
64
|
+
}
|
|
65
|
+
}
|