@rcarls/rc-card 0.6.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 (8) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/rc-card-BZ7eu3B9.js +98 -0
  3. package/dist/{rc-card-GT572NkA.js.map → rc-card-BZ7eu3B9.js.map} +1 -1
  4. package/dist/rc-card-define.js +1 -1
  5. package/dist/rc-card.js +1 -1
  6. package/dist/types/packages/rc-card/src/rc-card.d.ts +1 -1
  7. package/package.json +2 -2
  8. package/dist/rc-card-GT572NkA.js +0 -296
package/CHANGELOG.md CHANGED
@@ -1,5 +1,51 @@
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
+
3
49
  ## 0.6.0
4
50
 
5
51
  ### Minor Changes
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-GT572NkA.js.map → rc-card-BZ7eu3B9.js.map} RENAMED
@@ -1 +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;"}
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-GT572NkA.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-GT572NkA.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
@@ -115,7 +115,7 @@ export declare class RCCard extends LitElement {
115
115
  private _$footer;
116
116
  private _slotMicrotaskQueued;
117
117
  protected firstUpdated(): void;
118
- protected render(): import('lit').TemplateResult<1>;
118
+ protected render(): import('lit-html').TemplateResult<1>;
119
119
  private _handleSlotChange;
120
120
  private _syncSlotPresence;
121
121
  private _resolveActionTarget;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.6.0",
6
+ "version": "0.7.0",
7
7
  "description": "Design-system-neutral vertical and horizontal card shell with structural slots and parts.",
8
8
  "repository": {
9
9
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  "test:browser:firefox": "vitest --run --project=firefox"
46
46
  },
47
47
  "dependencies": {
48
- "@rcarls/rc-common": "0.6.0"
48
+ "@rcarls/rc-common": "0.7.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@custom-elements-manifest/analyzer": "0.11.0",
package/dist/rc-card-GT572NkA.js DELETED
@@ -1,296 +0,0 @@
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