@rcarls/rc-card 0.5.0 → 0.7.0

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 (12) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/README.md +5 -1
  3. package/dist/custom-elements.json +60 -36
  4. package/dist/rc-card-BZ7eu3B9.js +98 -0
  5. package/dist/rc-card-BZ7eu3B9.js.map +1 -0
  6. package/dist/rc-card-define.js +1 -1
  7. package/dist/rc-card.js +1 -1
  8. package/dist/types/packages/rc-card/src/rc-card.d.ts +16 -4
  9. package/package.json +5 -2
  10. package/dist/rc-card-DeNYLO0D.js +0 -256
  11. package/dist/rc-card-DeNYLO0D.js.map +0 -1
  12. package/dist/types/packages/rc-card/src/rc-card.test.d.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,74 @@
1
1
  # @rcarls/rc-card
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
8
+ and light-DOM structural styles through Lightning CSS, removing comments and
9
+ whitespace while keeping source maps that resolve to each template. Rendered
10
+ styles are unchanged.
11
+
12
+ `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
13
+ string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
14
+ depend on `@rcarls/rc-common` for it.
15
+
16
+ - Updated dependencies [e3dfa59]
17
+ - Updated dependencies [50d5610]
18
+ - Updated dependencies [9ee769c]
19
+ - Updated dependencies [1179f24]
20
+ - Updated dependencies [595fe37]
21
+ - Updated dependencies [38cd00c]
22
+ - Updated dependencies [5c006de]
23
+ - Updated dependencies [a6553ff]
24
+ - Updated dependencies [2205478]
25
+ - Updated dependencies [4341311]
26
+ - Updated dependencies [899bb5e]
27
+ - Updated dependencies [25fcfe0]
28
+ - Updated dependencies [51f6403]
29
+ - Updated dependencies [9caca6b]
30
+ - Updated dependencies [b764a3c]
31
+ - Updated dependencies [54d9ead]
32
+ - Updated dependencies [b9175e9]
33
+ - Updated dependencies [c8b762b]
34
+ - Updated dependencies [55e1e7f]
35
+ - Updated dependencies [f1ca82d]
36
+ - Updated dependencies [b87f27b]
37
+ - Updated dependencies [32ebead]
38
+ - Updated dependencies [bfefedd]
39
+ - Updated dependencies [c130173]
40
+ - Updated dependencies [11680b6]
41
+ - Updated dependencies [223d36c]
42
+ - Updated dependencies [7b91a44]
43
+ - Updated dependencies [aa04ead]
44
+ - Updated dependencies [ac65b5b]
45
+ - Updated dependencies [afcfef8]
46
+ - Updated dependencies [11ef1ad]
47
+ - @rcarls/rc-common@0.7.0
48
+
49
+ ## 0.6.0
50
+
51
+ ### Minor Changes
52
+
53
+ - f099b02: Add declarative horizontal cards with a two-fifths media column and symmetric
54
+ row and column grid coordination properties.
55
+
56
+ ### Patch Changes
57
+
58
+ - a108336: Warn in development when `rc-card`/`rc-list-item` has `interactive` set but
59
+ no way to resolve a click target: no `action-target`, and for
60
+ `rc-list-item`, no native child checkbox/radio either. Surface clicks
61
+ silently go nowhere in that state; the warning now says so at the point
62
+ the row or card is set up wrong, instead of leaving it to be discovered
63
+ by a user tapping a dead row or card.
64
+ - 6683eb9: Add shared, lifecycle-safe click delegation and let interactive list items
65
+ forward plain surface clicks to same-root native action targets while
66
+ preserving nested and modified clicks.
67
+ - Updated dependencies [6683eb9]
68
+ - Updated dependencies [ee7ba6c]
69
+ - Updated dependencies [30eb232]
70
+ - @rcarls/rc-common@0.6.0
71
+
3
72
  ## 0.5.0
4
73
 
5
74
  ## 0.4.2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @rcarls/rc-card
2
2
 
3
- Design-system-neutral card shell with structural slots and parts.
3
+ Design-system-neutral vertical and horizontal card shell with structural slots and parts.
4
4
 
5
5
  ```html
6
6
  <rc-card interactive action-target="recipe-link">
@@ -12,3 +12,7 @@ Design-system-neutral card shell with structural slots and parts.
12
12
 
13
13
  The host owns structure and layout, including one `rem` of default body padding.
14
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.
package/dist/custom-elements.json CHANGED
@@ -54,6 +54,11 @@
54
54
  "name": "--rc-card-grid-template-rows",
55
55
  "default": "auto auto auto 1fr auto auto"
56
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
+ },
57
62
  {
58
63
  "description": "Card border.",
59
64
  "name": "--rc-card-border",
@@ -122,11 +127,21 @@
122
127
  "name": "--rc-card-media-grid-row",
123
128
  "default": "auto"
124
129
  },
130
+ {
131
+ "description": "Grid column for the media region.",
132
+ "name": "--rc-card-media-grid-column",
133
+ "default": "auto"
134
+ },
125
135
  {
126
136
  "description": "Grid row for the header region.",
127
137
  "name": "--rc-card-header-grid-row",
128
138
  "default": "auto"
129
139
  },
140
+ {
141
+ "description": "Grid column for the header region.",
142
+ "name": "--rc-card-header-grid-column",
143
+ "default": "auto"
144
+ },
130
145
  {
131
146
  "description": "Header block-axis padding.",
132
147
  "name": "--rc-card-header-padding-block",
@@ -142,6 +157,11 @@
142
157
  "name": "--rc-card-title-grid-row",
143
158
  "default": "auto"
144
159
  },
160
+ {
161
+ "description": "Grid column for the title region.",
162
+ "name": "--rc-card-title-grid-column",
163
+ "default": "auto"
164
+ },
145
165
  {
146
166
  "description": "Title block-axis padding.",
147
167
  "name": "--rc-card-title-padding-block",
@@ -167,6 +187,11 @@
167
187
  "name": "--rc-card-subtitle-grid-row",
168
188
  "default": "auto"
169
189
  },
190
+ {
191
+ "description": "Grid column for the subtitle region.",
192
+ "name": "--rc-card-subtitle-grid-column",
193
+ "default": "auto"
194
+ },
170
195
  {
171
196
  "description": "Subtitle block-axis padding.",
172
197
  "name": "--rc-card-subtitle-padding-block",
@@ -192,6 +217,11 @@
192
217
  "name": "--rc-card-body-grid-row",
193
218
  "default": "auto"
194
219
  },
220
+ {
221
+ "description": "Grid column for the body region.",
222
+ "name": "--rc-card-body-grid-column",
223
+ "default": "auto"
224
+ },
195
225
  {
196
226
  "description": "Body block-axis padding.",
197
227
  "name": "--rc-card-body-padding-block",
@@ -207,6 +237,11 @@
207
237
  "name": "--rc-card-actions-grid-row",
208
238
  "default": "auto"
209
239
  },
240
+ {
241
+ "description": "Grid column for the actions region.",
242
+ "name": "--rc-card-actions-grid-column",
243
+ "default": "auto"
244
+ },
210
245
  {
211
246
  "description": "Justify-content for the actions row.",
212
247
  "name": "--rc-card-actions-justify",
@@ -232,6 +267,11 @@
232
267
  "name": "--rc-card-footer-grid-row",
233
268
  "default": "auto"
234
269
  },
270
+ {
271
+ "description": "Grid column for the footer region.",
272
+ "name": "--rc-card-footer-grid-column",
273
+ "default": "auto"
274
+ },
235
275
  {
236
276
  "description": "Footer block-axis padding.",
237
277
  "name": "--rc-card-footer-padding-block",
@@ -312,6 +352,17 @@
312
352
  }
313
353
  ],
314
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
+ },
315
366
  {
316
367
  "kind": "field",
317
368
  "name": "selected",
@@ -441,42 +492,6 @@
441
492
  "text": "HTMLAnchorElement | HTMLButtonElement | null"
442
493
  }
443
494
  }
444
- },
445
- {
446
- "kind": "method",
447
- "name": "_eventStartedInInteractiveDescendant",
448
- "privacy": "private",
449
- "return": {
450
- "type": {
451
- "text": "boolean"
452
- }
453
- },
454
- "parameters": [
455
- {
456
- "name": "event",
457
- "type": {
458
- "text": "Event"
459
- }
460
- }
461
- ]
462
- },
463
- {
464
- "kind": "method",
465
- "name": "_handleClick",
466
- "privacy": "private",
467
- "return": {
468
- "type": {
469
- "text": "void"
470
- }
471
- },
472
- "parameters": [
473
- {
474
- "name": "event",
475
- "type": {
476
- "text": "MouseEvent"
477
- }
478
- }
479
- ]
480
495
  }
481
496
  ],
482
497
  "attributes": [
@@ -516,6 +531,15 @@
516
531
  "default": "''",
517
532
  "fieldName": "actionTarget"
518
533
  },
534
+ {
535
+ "description": "Structural layout direction.",
536
+ "name": "orientation",
537
+ "type": {
538
+ "text": "RCCardOrientation"
539
+ },
540
+ "default": "'vertical'",
541
+ "fieldName": "orientation"
542
+ },
519
543
  {
520
544
  "description": "Present when the `media` slot has assigned content.",
521
545
  "name": "has-media"
package/dist/rc-card-BZ7eu3B9.js ADDED
@@ -0,0 +1,98 @@
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`:host{--_rc-card-grid-template-rows:auto auto auto 1fr auto auto;--_rc-card-grid-template-columns:minmax(0, 1fr);--_rc-card-media-grid-row:auto;--_rc-card-media-grid-column:auto;--_rc-card-header-grid-row:auto;--_rc-card-header-grid-column:auto;--_rc-card-title-grid-row:auto;--_rc-card-title-grid-column:auto;--_rc-card-subtitle-grid-row:auto;--_rc-card-subtitle-grid-column:auto;--_rc-card-body-grid-row:auto;--_rc-card-body-grid-column:auto;--_rc-card-actions-grid-row:auto;--_rc-card-actions-grid-column:auto;--_rc-card-footer-grid-row:auto;--_rc-card-footer-grid-column:auto;grid-template-rows:var(--rc-card-grid-template-rows,var(--_rc-card-grid-template-rows));grid-template-columns:var(--rc-card-grid-template-columns,var(--_rc-card-grid-template-columns));border:var(--rc-card-border,0);border-radius:var(--rc-card-radius,0);background:var(--rc-card-bg,Canvas);min-inline-size:0;color:var(--rc-card-color,CanvasText);box-shadow:var(--rc-card-shadow,none);box-sizing:border-box;display:grid;position:relative;overflow:clip}:host([orientation=horizontal]){--_rc-card-grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);--_rc-card-media-grid-row:1 / -1;--_rc-card-media-grid-column:1;--_rc-card-header-grid-row:1;--_rc-card-header-grid-column:2;--_rc-card-title-grid-row:2;--_rc-card-title-grid-column:2;--_rc-card-subtitle-grid-row:3;--_rc-card-subtitle-grid-column:2;--_rc-card-body-grid-row:4;--_rc-card-body-grid-column:2;--_rc-card-actions-grid-row:5;--_rc-card-actions-grid-column:2;--_rc-card-footer-grid-row:6;--_rc-card-footer-grid-column:2}:host([orientation=horizontal]:not([has-media])){--_rc-card-grid-template-columns:minmax(0, 1fr);--_rc-card-header-grid-column:1;--_rc-card-title-grid-column:1;--_rc-card-subtitle-grid-column:1;--_rc-card-body-grid-column:1;--_rc-card-actions-grid-column:1;--_rc-card-footer-grid-column:1}:host([hidden]){display:none}:host([interactive]:not([disabled])){cursor:pointer}[part=container],[part=state-layer]{border-radius:inherit;pointer-events:none;position:absolute;inset:0}[part=container]{background:var(--rc-card-container-bg,transparent);z-index:0}[part=state-layer]{background:var(--rc-card-state-layer-bg,currentColor);opacity:0;transition:opacity var(--rc-card-state-layer-duration,.15s) var(--rc-card-state-layer-easing,ease);z-index:1}:host([interactive]:not([disabled]):hover) [part=state-layer]{opacity:var(--rc-card-hover-state-layer-opacity,0)}:host([interactive]:not([disabled]):active) [part=state-layer]{opacity:var(--rc-card-pressed-state-layer-opacity,0)}[part=media],[part=header],[part=title],[part=subtitle],[part=body],[part=actions],[part=footer]{z-index:2;box-sizing:border-box;min-inline-size:0;position:relative}[part=media]{grid-row:var(--rc-card-media-grid-row,var(--_rc-card-media-grid-row));grid-column:var(--rc-card-media-grid-column,var(--_rc-card-media-grid-column))}[part=header]{grid-row:var(--rc-card-header-grid-row,var(--_rc-card-header-grid-row));grid-column:var(--rc-card-header-grid-column,var(--_rc-card-header-grid-column));padding-block:var(--rc-card-header-padding-block,var(--rc-card-padding-block,0) 0);padding-inline:var(--rc-card-header-padding-inline,var(--rc-card-padding-inline,0))}[part=title]{grid-row:var(--rc-card-title-grid-row,var(--_rc-card-title-grid-row));grid-column:var(--rc-card-title-grid-column,var(--_rc-card-title-grid-column));padding-block:var(--rc-card-title-padding-block,var(--rc-card-padding-block,0) 0);padding-inline:var(--rc-card-title-padding-inline,var(--rc-card-padding-inline,0));color:var(--rc-card-title-color,inherit);font:var(--rc-card-title-font,inherit)}[part=subtitle]{grid-row:var(--rc-card-subtitle-grid-row,var(--_rc-card-subtitle-grid-row));grid-column:var(--rc-card-subtitle-grid-column,var(--_rc-card-subtitle-grid-column));padding-block:var(--rc-card-subtitle-padding-block,0);padding-inline:var(--rc-card-subtitle-padding-inline,var(--rc-card-padding-inline,0));color:var(--rc-card-subtitle-color,inherit);font:var(--rc-card-subtitle-font,inherit)}[part=body]{grid-row:var(--rc-card-body-grid-row,var(--_rc-card-body-grid-row));grid-column:var(--rc-card-body-grid-column,var(--_rc-card-body-grid-column));min-block-size:0}[part=actions]{grid-row:var(--rc-card-actions-grid-row,var(--_rc-card-actions-grid-row));grid-column:var(--rc-card-actions-grid-column,var(--_rc-card-actions-grid-column));align-items:center;justify-content:var(--rc-card-actions-justify,flex-end);gap:var(--rc-card-actions-gap,0);padding-block:var(--rc-card-actions-padding-block,0 var(--rc-card-padding-block,0));padding-inline:var(--rc-card-actions-padding-inline,var(--rc-card-padding-inline,0));display:flex}[part=footer]{grid-row:var(--rc-card-footer-grid-row,var(--_rc-card-footer-grid-row));grid-column:var(--rc-card-footer-grid-column,var(--_rc-card-footer-grid-column));padding-block:var(--rc-card-footer-padding-block,0 var(--rc-card-padding-block,0));padding-inline:var(--rc-card-footer-padding-inline,var(--rc-card-padding-inline,0))}:host(:not([has-media])) [part=media],:host(:not([has-header])) [part=header],:host(:not([has-title])) [part=title],:host(:not([has-subtitle])) [part=subtitle],:host(:not([has-actions])) [part=actions],:host(:not([has-footer])) [part=footer]{display:none}::slotted([slot=media]){inline-size:100%;display:block}::slotted(:not([slot])){padding-block:var(--rc-card-body-padding-block,var(--rc-card-padding-block,1rem));padding-inline:var(--rc-card-body-padding-inline,var(--rc-card-padding-inline,1rem))}@media (forced-colors:active){:host{color:canvastext;background:canvas;border-color:canvastext}[part=state-layer]{background:highlight}}`;
5
+ var b = Object.defineProperty, t = (s, e, a, c) => {
6
+ for (var i = void 0, n = s.length - 1, g; n >= 0; n--)
7
+ (g = s[n]) && (i = g(e, a, i) || i);
8
+ return i && b(e, a, i), i;
9
+ };
10
+ const _ = ["media", "header", "title", "subtitle", "actions", "footer"], l = class l extends p {
11
+ constructor() {
12
+ super(), this.orientation = "vertical", this.selected = !1, this.disabled = !1, this.interactive = !1, this.actionTarget = "", this._slotMicrotaskQueued = !1, new v(this, {
13
+ target: () => this._resolveActionTarget(),
14
+ disabled: () => this.disabled
15
+ });
16
+ }
17
+ firstUpdated() {
18
+ this._syncSlotPresence();
19
+ }
20
+ render() {
21
+ return h`
22
+ <div part="container" aria-hidden="true"></div>
23
+ <div part="media"><slot name="media" @slotchange=${this._handleSlotChange}></slot></div>
24
+ <div part="header"><slot name="header" @slotchange=${this._handleSlotChange}></slot></div>
25
+ <div part="title"><slot name="title" @slotchange=${this._handleSlotChange}></slot></div>
26
+ <div part="subtitle"><slot name="subtitle" @slotchange=${this._handleSlotChange}></slot></div>
27
+ <div part="body"><slot @slotchange=${this._handleSlotChange}></slot></div>
28
+ <div part="actions"><slot name="actions" @slotchange=${this._handleSlotChange}></slot></div>
29
+ <div part="footer"><slot name="footer" @slotchange=${this._handleSlotChange}></slot></div>
30
+ <div part="state-layer" aria-hidden="true"></div>
31
+ `;
32
+ }
33
+ _handleSlotChange() {
34
+ this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
35
+ this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlotPresence();
36
+ }));
37
+ }
38
+ _syncSlotPresence() {
39
+ const e = {
40
+ media: this._$media ?? [],
41
+ header: this._$header ?? [],
42
+ title: this._$title ?? [],
43
+ subtitle: this._$subtitle ?? [],
44
+ actions: this._$actions ?? [],
45
+ footer: this._$footer ?? []
46
+ };
47
+ for (const a of _)
48
+ this.toggleAttribute(`has-${a}`, e[a].length > 0);
49
+ }
50
+ _resolveActionTarget() {
51
+ const e = this.actionTarget.trim();
52
+ if (!e)
53
+ return null;
54
+ const a = this.getRootNode(), c = a instanceof Document || a instanceof ShadowRoot ? a.getElementById(e) : null;
55
+ return c instanceof HTMLAnchorElement || c instanceof HTMLButtonElement ? c : null;
56
+ }
57
+ updated(e) {
58
+ }
59
+ };
60
+ l.styles = m;
61
+ let r = l;
62
+ t([
63
+ d({ reflect: !0 })
64
+ ], r.prototype, "orientation");
65
+ t([
66
+ d({ type: Boolean, reflect: !0 })
67
+ ], r.prototype, "selected");
68
+ t([
69
+ d({ type: Boolean, reflect: !0 })
70
+ ], r.prototype, "disabled");
71
+ t([
72
+ d({ type: Boolean, reflect: !0 })
73
+ ], r.prototype, "interactive");
74
+ t([
75
+ d({ type: String, attribute: "action-target" })
76
+ ], r.prototype, "actionTarget");
77
+ t([
78
+ o({ slot: "media", flatten: !0 })
79
+ ], r.prototype, "_$media");
80
+ t([
81
+ o({ slot: "header", flatten: !0 })
82
+ ], r.prototype, "_$header");
83
+ t([
84
+ o({ slot: "title", flatten: !0 })
85
+ ], r.prototype, "_$title");
86
+ t([
87
+ o({ slot: "subtitle", flatten: !0 })
88
+ ], r.prototype, "_$subtitle");
89
+ t([
90
+ o({ slot: "actions", flatten: !0 })
91
+ ], r.prototype, "_$actions");
92
+ t([
93
+ o({ slot: "footer", flatten: !0 })
94
+ ], r.prototype, "_$footer");
95
+ export {
96
+ r as R
97
+ };
98
+ //# sourceMappingURL=rc-card-BZ7eu3B9.js.map
package/dist/rc-card-BZ7eu3B9.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rc-card-BZ7eu3B9.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":"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"}
package/dist/rc-card-define.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as e } from "./rc-card-DeNYLO0D.js";
1
+ import { R as e } from "./rc-card-BZ7eu3B9.js";
2
2
  customElements.get("rc-card") || customElements.define("rc-card", e);
3
3
  export {
4
4
  e as RCCard
package/dist/rc-card.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as o } from "./rc-card-DeNYLO0D.js";
1
+ import { R as o } from "./rc-card-BZ7eu3B9.js";
2
2
  export {
3
3
  o as RCCard
4
4
  };
package/dist/types/packages/rc-card/src/rc-card.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from 'lit';
2
+ export type RCCardOrientation = 'vertical' | 'horizontal';
2
3
  declare global {
3
4
  interface HTMLElementTagNameMap {
4
5
  'rc-card': RCCard;
@@ -30,6 +31,7 @@ declare global {
30
31
  * @attr disabled - Declarative disabled state. Disables action-target click forwarding.
31
32
  * @attr interactive - Visual affordance for cards with an author-provided action target.
32
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`.
33
35
  * @attr [has-media] - Present when the `media` slot has assigned content.
34
36
  * @attr [has-header] - Present when the `header` slot has assigned content.
35
37
  * @attr [has-title] - Present when the `title` slot has assigned content.
@@ -39,6 +41,8 @@ declare global {
39
41
  *
40
42
  * @cssprop [--rc-card-grid-template-rows=auto auto auto 1fr auto auto] - Grid template rows for
41
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)`.
42
46
  * @cssprop [--rc-card-border=0] - Card border.
43
47
  * @cssprop [--rc-card-radius=0] - Card border radius.
44
48
  * @cssprop [--rc-card-bg=Canvas] - Card background.
@@ -59,33 +63,42 @@ declare global {
59
63
  * don't set their own `*-padding-inline` property. Defers to each region's own default (0 for
60
64
  * header/title/subtitle/actions/footer, 1rem for body) when unset.
61
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.
62
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.
63
69
  * @cssprop [--rc-card-header-padding-block=var(--rc-card-padding-block, 0) 0] - Header block-axis padding.
64
70
  * @cssprop [--rc-card-header-padding-inline=var(--rc-card-padding-inline, 0)] - Header inline-axis padding.
65
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.
66
73
  * @cssprop [--rc-card-title-padding-block=var(--rc-card-padding-block, 0) 0] - Title block-axis padding.
67
74
  * @cssprop [--rc-card-title-padding-inline=var(--rc-card-padding-inline, 0)] - Title inline-axis padding.
68
75
  * @cssprop [--rc-card-title-color=inherit] - Title text color.
69
76
  * @cssprop [--rc-card-title-font=inherit] - Title font shorthand.
70
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.
71
79
  * @cssprop [--rc-card-subtitle-padding-block=0] - Subtitle block-axis padding.
72
80
  * @cssprop [--rc-card-subtitle-padding-inline=var(--rc-card-padding-inline, 0)] - Subtitle inline-axis padding.
73
81
  * @cssprop [--rc-card-subtitle-color=inherit] - Subtitle text color.
74
82
  * @cssprop [--rc-card-subtitle-font=inherit] - Subtitle font shorthand.
75
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.
76
85
  * @cssprop [--rc-card-body-padding-block=var(--rc-card-padding-block, 1rem)] - Body block-axis padding.
77
86
  * @cssprop [--rc-card-body-padding-inline=var(--rc-card-padding-inline, 1rem)] - Body inline-axis padding.
78
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.
79
89
  * @cssprop [--rc-card-actions-justify=flex-end] - Justify-content for the actions row.
80
90
  * @cssprop [--rc-card-actions-gap=0] - Gap between action items.
81
91
  * @cssprop [--rc-card-actions-padding-block=0 var(--rc-card-padding-block, 0)] - Actions block-axis padding.
82
92
  * @cssprop [--rc-card-actions-padding-inline=var(--rc-card-padding-inline, 0)] - Actions inline-axis padding.
83
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.
84
95
  * @cssprop [--rc-card-footer-padding-block=0 var(--rc-card-padding-block, 0)] - Footer block-axis padding.
85
96
  * @cssprop [--rc-card-footer-padding-inline=var(--rc-card-padding-inline, 0)] - Footer inline-axis padding.
86
97
  */
87
98
  export declare class RCCard extends LitElement {
88
99
  static styles: import('lit').CSSResult;
100
+ /** Structural layout direction. */
101
+ orientation: RCCardOrientation;
89
102
  /** Declarative selected state for theme styling. */
90
103
  selected: boolean;
91
104
  /** Declarative disabled state. Disables action-target click forwarding. */
@@ -102,12 +115,11 @@ export declare class RCCard extends LitElement {
102
115
  private _$footer;
103
116
  private _slotMicrotaskQueued;
104
117
  protected firstUpdated(): void;
105
- protected render(): import('lit').TemplateResult<1>;
118
+ protected render(): import('lit-html').TemplateResult<1>;
106
119
  private _handleSlotChange;
107
120
  private _syncSlotPresence;
108
121
  private _resolveActionTarget;
109
- private _eventStartedInInteractiveDescendant;
110
- private _handleClick;
111
122
  constructor();
123
+ protected updated(changed: PropertyValues<this>): void;
112
124
  }
113
125
  export default RCCard;
package/package.json CHANGED
@@ -3,8 +3,8 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.5.0",
7
- "description": "Design-system-neutral card shell with structural slots and parts.",
6
+ "version": "0.7.0",
7
+ "description": "Design-system-neutral vertical and horizontal card shell with structural slots and parts.",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
@@ -44,6 +44,9 @@
44
44
  "test:browser:chrome": "vitest --run --project=chromium",
45
45
  "test:browser:firefox": "vitest --run --project=firefox"
46
46
  },
47
+ "dependencies": {
48
+ "@rcarls/rc-common": "0.7.0"
49
+ },
47
50
  "devDependencies": {
48
51
  "@custom-elements-manifest/analyzer": "0.11.0",
49
52
  "@vitest/browser-playwright": "4.1.5",
package/dist/rc-card-DeNYLO0D.js DELETED
@@ -1,256 +0,0 @@
1
- import { css as h, LitElement as g, html as u } from "lit";
2
- import { property as d, queryAssignedElements as o } from "lit/decorators.js";
3
- const v = h`
4
- :host {
5
- position: relative;
6
- display: grid;
7
- grid-template-rows: var(--rc-card-grid-template-rows, auto auto auto 1fr auto auto);
8
- min-inline-size: 0;
9
- border: var(--rc-card-border, 0);
10
- border-radius: var(--rc-card-radius, 0);
11
- background: var(--rc-card-bg, Canvas);
12
- color: var(--rc-card-color, CanvasText);
13
- box-shadow: var(--rc-card-shadow, none);
14
- overflow: clip;
15
- box-sizing: border-box;
16
- }
17
-
18
- :host([hidden]) {
19
- display: none;
20
- }
21
-
22
- :host([interactive]:not([disabled])) {
23
- cursor: pointer;
24
- }
25
-
26
- [part='container'],
27
- [part='state-layer'] {
28
- position: absolute;
29
- inset: 0;
30
- border-radius: inherit;
31
- pointer-events: none;
32
- }
33
-
34
- [part='container'] {
35
- background: var(--rc-card-container-bg, transparent);
36
- z-index: 0;
37
- }
38
-
39
- [part='state-layer'] {
40
- background: var(--rc-card-state-layer-bg, currentColor);
41
- opacity: 0;
42
- transition: opacity var(--rc-card-state-layer-duration, 150ms)
43
- var(--rc-card-state-layer-easing, ease);
44
- z-index: 1;
45
- }
46
-
47
- :host([interactive]:not([disabled]):hover) [part='state-layer'] {
48
- opacity: var(--rc-card-hover-state-layer-opacity, 0);
49
- }
50
-
51
- :host([interactive]:not([disabled]):active) [part='state-layer'] {
52
- opacity: var(--rc-card-pressed-state-layer-opacity, 0);
53
- }
54
-
55
- [part='media'],
56
- [part='header'],
57
- [part='title'],
58
- [part='subtitle'],
59
- [part='body'],
60
- [part='actions'],
61
- [part='footer'] {
62
- position: relative;
63
- z-index: 2;
64
- min-inline-size: 0;
65
- box-sizing: border-box;
66
- }
67
-
68
- [part='media'] {
69
- grid-row: var(--rc-card-media-grid-row, auto);
70
- }
71
-
72
- [part='header'] {
73
- grid-row: var(--rc-card-header-grid-row, auto);
74
- padding-block: var(--rc-card-header-padding-block, var(--rc-card-padding-block, 0) 0);
75
- padding-inline: var(--rc-card-header-padding-inline, var(--rc-card-padding-inline, 0));
76
- }
77
-
78
- [part='title'] {
79
- grid-row: var(--rc-card-title-grid-row, auto);
80
- padding-block: var(--rc-card-title-padding-block, var(--rc-card-padding-block, 0) 0);
81
- padding-inline: var(--rc-card-title-padding-inline, var(--rc-card-padding-inline, 0));
82
- color: var(--rc-card-title-color, inherit);
83
- font: var(--rc-card-title-font, inherit);
84
- }
85
-
86
- [part='subtitle'] {
87
- grid-row: var(--rc-card-subtitle-grid-row, auto);
88
- padding-block: var(--rc-card-subtitle-padding-block, 0);
89
- padding-inline: var(--rc-card-subtitle-padding-inline, var(--rc-card-padding-inline, 0));
90
- color: var(--rc-card-subtitle-color, inherit);
91
- font: var(--rc-card-subtitle-font, inherit);
92
- }
93
-
94
- [part='body'] {
95
- grid-row: var(--rc-card-body-grid-row, auto);
96
- min-block-size: 0;
97
- }
98
-
99
- [part='actions'] {
100
- grid-row: var(--rc-card-actions-grid-row, auto);
101
- display: flex;
102
- align-items: center;
103
- justify-content: var(--rc-card-actions-justify, flex-end);
104
- gap: var(--rc-card-actions-gap, 0);
105
- padding-block: var(--rc-card-actions-padding-block, 0 var(--rc-card-padding-block, 0));
106
- padding-inline: var(--rc-card-actions-padding-inline, var(--rc-card-padding-inline, 0));
107
- }
108
-
109
- [part='footer'] {
110
- grid-row: var(--rc-card-footer-grid-row, auto);
111
- padding-block: var(--rc-card-footer-padding-block, 0 var(--rc-card-padding-block, 0));
112
- padding-inline: var(--rc-card-footer-padding-inline, var(--rc-card-padding-inline, 0));
113
- }
114
-
115
- :host(:not([has-media])) [part='media'],
116
- :host(:not([has-header])) [part='header'],
117
- :host(:not([has-title])) [part='title'],
118
- :host(:not([has-subtitle])) [part='subtitle'],
119
- :host(:not([has-actions])) [part='actions'],
120
- :host(:not([has-footer])) [part='footer'] {
121
- display: none;
122
- }
123
-
124
- ::slotted([slot='media']) {
125
- display: block;
126
- inline-size: 100%;
127
- }
128
-
129
- ::slotted(:not([slot])) {
130
- padding-block: var(--rc-card-body-padding-block, var(--rc-card-padding-block, 1rem));
131
- padding-inline: var(--rc-card-body-padding-inline, var(--rc-card-padding-inline, 1rem));
132
- }
133
-
134
- @media (forced-colors: active) {
135
- :host {
136
- border-color: CanvasText;
137
- background: Canvas;
138
- color: CanvasText;
139
- }
140
-
141
- [part='state-layer'] {
142
- background: Highlight;
143
- }
144
- }
145
- `;
146
- var b = Object.defineProperty, a = (l, t, r, n) => {
147
- for (var i = void 0, s = l.length - 1, p; s >= 0; s--)
148
- (p = l[s]) && (i = p(t, r, i) || i);
149
- return i && b(t, r, i), i;
150
- };
151
- const f = [
152
- "a[href]",
153
- "button",
154
- "input",
155
- "select",
156
- "textarea",
157
- "summary",
158
- '[role="button"]',
159
- '[role="link"]',
160
- '[tabindex]:not([tabindex="-1"])'
161
- ].join(","), y = ["media", "header", "title", "subtitle", "actions", "footer"], c = class c extends g {
162
- constructor() {
163
- super(), this.selected = !1, this.disabled = !1, this.interactive = !1, this.actionTarget = "", this._slotMicrotaskQueued = !1, this.addEventListener("click", (t) => this._handleClick(t));
164
- }
165
- firstUpdated() {
166
- this._syncSlotPresence();
167
- }
168
- render() {
169
- return u`
170
- <div part="container" aria-hidden="true"></div>
171
- <div part="media"><slot name="media" @slotchange=${this._handleSlotChange}></slot></div>
172
- <div part="header"><slot name="header" @slotchange=${this._handleSlotChange}></slot></div>
173
- <div part="title"><slot name="title" @slotchange=${this._handleSlotChange}></slot></div>
174
- <div part="subtitle"><slot name="subtitle" @slotchange=${this._handleSlotChange}></slot></div>
175
- <div part="body"><slot @slotchange=${this._handleSlotChange}></slot></div>
176
- <div part="actions"><slot name="actions" @slotchange=${this._handleSlotChange}></slot></div>
177
- <div part="footer"><slot name="footer" @slotchange=${this._handleSlotChange}></slot></div>
178
- <div part="state-layer" aria-hidden="true"></div>
179
- `;
180
- }
181
- _handleSlotChange() {
182
- this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
183
- this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlotPresence();
184
- }));
185
- }
186
- _syncSlotPresence() {
187
- const t = {
188
- media: this._$media ?? [],
189
- header: this._$header ?? [],
190
- title: this._$title ?? [],
191
- subtitle: this._$subtitle ?? [],
192
- actions: this._$actions ?? [],
193
- footer: this._$footer ?? []
194
- };
195
- for (const r of y)
196
- this.toggleAttribute(`has-${r}`, t[r].length > 0);
197
- }
198
- _resolveActionTarget() {
199
- const t = this.actionTarget.trim();
200
- if (!t)
201
- return null;
202
- const r = this.getRootNode(), n = r instanceof Document || r instanceof ShadowRoot ? r.getElementById(t) : null;
203
- return n instanceof HTMLAnchorElement || n instanceof HTMLButtonElement ? n : null;
204
- }
205
- _eventStartedInInteractiveDescendant(t) {
206
- for (const r of t.composedPath()) {
207
- if (r === this)
208
- return !1;
209
- if (r instanceof Element && r.matches(f))
210
- return !0;
211
- }
212
- return !1;
213
- }
214
- _handleClick(t) {
215
- if (this.disabled || t.defaultPrevented || t.button !== 0 || this._eventStartedInInteractiveDescendant(t))
216
- return;
217
- const r = this._resolveActionTarget();
218
- r && (t.preventDefault(), r.click());
219
- }
220
- };
221
- c.styles = v;
222
- let e = c;
223
- a([
224
- d({ type: Boolean, reflect: !0 })
225
- ], e.prototype, "selected");
226
- a([
227
- d({ type: Boolean, reflect: !0 })
228
- ], e.prototype, "disabled");
229
- a([
230
- d({ type: Boolean, reflect: !0 })
231
- ], e.prototype, "interactive");
232
- a([
233
- d({ type: String, attribute: "action-target" })
234
- ], e.prototype, "actionTarget");
235
- a([
236
- o({ slot: "media", flatten: !0 })
237
- ], e.prototype, "_$media");
238
- a([
239
- o({ slot: "header", flatten: !0 })
240
- ], e.prototype, "_$header");
241
- a([
242
- o({ slot: "title", flatten: !0 })
243
- ], e.prototype, "_$title");
244
- a([
245
- o({ slot: "subtitle", flatten: !0 })
246
- ], e.prototype, "_$subtitle");
247
- a([
248
- o({ slot: "actions", flatten: !0 })
249
- ], e.prototype, "_$actions");
250
- a([
251
- o({ slot: "footer", flatten: !0 })
252
- ], e.prototype, "_$footer");
253
- export {
254
- e as R
255
- };
256
- //# sourceMappingURL=rc-card-DeNYLO0D.js.map
package/dist/rc-card-DeNYLO0D.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"rc-card-DeNYLO0D.js","sources":["../src/rc-card.styles.ts","../src/rc-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n :host {\n position: relative;\n display: grid;\n grid-template-rows: var(--rc-card-grid-template-rows, auto auto auto 1fr auto auto);\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([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, auto);\n }\n\n [part='header'] {\n grid-row: var(--rc-card-header-grid-row, auto);\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, auto);\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, auto);\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, auto);\n min-block-size: 0;\n }\n\n [part='actions'] {\n grid-row: var(--rc-card-actions-grid-row, auto);\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, auto);\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 } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport cardStyles from './rc-card.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-card': RCCard;\n }\n}\n\nconst INTERACTIVE_SELECTOR = [\n 'a[href]',\n 'button',\n 'input',\n 'select',\n 'textarea',\n 'summary',\n '[role=\"button\"]',\n '[role=\"link\"]',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\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 [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-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-header-grid-row=auto] - Grid row 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-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-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-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-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-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 /** 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 private _eventStartedInInteractiveDescendant(event: Event): boolean {\n for (const entry of event.composedPath()) {\n if (entry === this) {\n return false;\n }\n\n if (entry instanceof Element && entry.matches(INTERACTIVE_SELECTOR)) {\n return true;\n }\n }\n\n return false;\n }\n\n private _handleClick(event: MouseEvent): void {\n if (this.disabled || event.defaultPrevented || event.button !== 0) {\n return;\n }\n\n if (this._eventStartedInInteractiveDescendant(event)) {\n return;\n }\n\n const $target = this._resolveActionTarget();\n\n if (!$target) {\n return;\n }\n\n event.preventDefault();\n $target.click();\n }\n\n constructor() {\n super();\n this.addEventListener('click', (event) => this._handleClick(event as MouseEvent));\n }\n}\n\nexport default RCCard;\n"],"names":["cardStyles","css","INTERACTIVE_SELECTOR","SLOT_NAMES","_RCCard","LitElement","event","html","bySlot","slotName","id","root","$target","entry","RCCard","__decorateClass","property","queryAssignedElements"],"mappings":"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"}
package/dist/types/packages/rc-card/src/rc-card.test.d.ts DELETED
File without changes