@rcarls/rc-card 0.4.0

package/README.md

@@ -0,0 +1,14 @@
+# @rcarls/rc-card
+
+Design-system-neutral card shell with structural slots and parts.
+
+```html
+<rc-card interactive action-target="recipe-link">
+  <img slot="media" src="recipe.jpg" alt="" />
+  <a id="recipe-link" slot="title" href="/recipes/pie">Apple pie</a>
+  <p>Flaky crust, bright apples.</p>
+</rc-card>
+```
+
+The host owns structure and layout, including one `rem` of default body padding.
+Authors provide native anchors or buttons for semantics and keyboard access.

package/dist/custom-elements.json

@@ -0,0 +1,572 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-card",
+          "declaration": {
+            "name": "RCCard",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-card.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Design-system-neutral card shell with first-class structural parts and\noptional pointer delegation to an author-provided anchor or button.",
+          "name": "RCCard",
+          "cssProperties": [
+            {
+              "description": "Grid template rows for the host's structural regions.",
+              "name": "--rc-card-grid-template-rows",
+              "default": "auto auto auto 1fr auto auto"
+            },
+            {
+              "description": "Card border.",
+              "name": "--rc-card-border",
+              "default": "0"
+            },
+            {
+              "description": "Card border radius.",
+              "name": "--rc-card-radius",
+              "default": "0"
+            },
+            {
+              "description": "Card background.",
+              "name": "--rc-card-bg",
+              "default": "Canvas"
+            },
+            {
+              "description": "Card text color.",
+              "name": "--rc-card-color",
+              "default": "CanvasText"
+            },
+            {
+              "description": "Card box shadow.",
+              "name": "--rc-card-shadow",
+              "default": "none"
+            },
+            {
+              "description": "Background of the non-interactive container overlay.",
+              "name": "--rc-card-container-bg",
+              "default": "transparent"
+            },
+            {
+              "description": "State-layer overlay color.",
+              "name": "--rc-card-state-layer-bg",
+              "default": "currentColor"
+            },
+            {
+              "description": "State-layer opacity transition duration.",
+              "name": "--rc-card-state-layer-duration",
+              "default": "150ms"
+            },
+            {
+              "description": "State-layer opacity transition easing.",
+              "name": "--rc-card-state-layer-easing",
+              "default": "ease"
+            },
+            {
+              "description": "State-layer opacity on hover (interactive cards only).",
+              "name": "--rc-card-hover-state-layer-opacity",
+              "default": "0"
+            },
+            {
+              "description": "State-layer opacity on active press (interactive cards only).",
+              "name": "--rc-card-pressed-state-layer-opacity",
+              "default": "0"
+            },
+            {
+              "description": "Shared block-axis padding fallback for regions that don't set their own `*-padding-block` property. Defers to each region's own default (0 for header/title/subtitle/actions/footer, 1rem for body) when unset.",
+              "name": "--rc-card-padding-block"
+            },
+            {
+              "description": "Shared inline-axis padding fallback for regions that don't set their own `*-padding-inline` property. Defers to each region's own default (0 for header/title/subtitle/actions/footer, 1rem for body) when unset.",
+              "name": "--rc-card-padding-inline"
+            },
+            {
+              "description": "Grid row for the media region.",
+              "name": "--rc-card-media-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Grid row for the header region.",
+              "name": "--rc-card-header-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Header block-axis padding.",
+              "name": "--rc-card-header-padding-block",
+              "default": "var(--rc-card-padding-block, 0) 0"
+            },
+            {
+              "description": "Header inline-axis padding.",
+              "name": "--rc-card-header-padding-inline",
+              "default": "var(--rc-card-padding-inline, 0)"
+            },
+            {
+              "description": "Grid row for the title region.",
+              "name": "--rc-card-title-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Title block-axis padding.",
+              "name": "--rc-card-title-padding-block",
+              "default": "var(--rc-card-padding-block, 0) 0"
+            },
+            {
+              "description": "Title inline-axis padding.",
+              "name": "--rc-card-title-padding-inline",
+              "default": "var(--rc-card-padding-inline, 0)"
+            },
+            {
+              "description": "Title text color.",
+              "name": "--rc-card-title-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Title font shorthand.",
+              "name": "--rc-card-title-font",
+              "default": "inherit"
+            },
+            {
+              "description": "Grid row for the subtitle region.",
+              "name": "--rc-card-subtitle-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Subtitle block-axis padding.",
+              "name": "--rc-card-subtitle-padding-block",
+              "default": "0"
+            },
+            {
+              "description": "Subtitle inline-axis padding.",
+              "name": "--rc-card-subtitle-padding-inline",
+              "default": "var(--rc-card-padding-inline, 0)"
+            },
+            {
+              "description": "Subtitle text color.",
+              "name": "--rc-card-subtitle-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Subtitle font shorthand.",
+              "name": "--rc-card-subtitle-font",
+              "default": "inherit"
+            },
+            {
+              "description": "Grid row for the body region.",
+              "name": "--rc-card-body-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Body block-axis padding.",
+              "name": "--rc-card-body-padding-block",
+              "default": "var(--rc-card-padding-block, 1rem)"
+            },
+            {
+              "description": "Body inline-axis padding.",
+              "name": "--rc-card-body-padding-inline",
+              "default": "var(--rc-card-padding-inline, 1rem)"
+            },
+            {
+              "description": "Grid row for the actions region.",
+              "name": "--rc-card-actions-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Justify-content for the actions row.",
+              "name": "--rc-card-actions-justify",
+              "default": "flex-end"
+            },
+            {
+              "description": "Gap between action items.",
+              "name": "--rc-card-actions-gap",
+              "default": "0"
+            },
+            {
+              "description": "Actions block-axis padding.",
+              "name": "--rc-card-actions-padding-block",
+              "default": "0 var(--rc-card-padding-block, 0)"
+            },
+            {
+              "description": "Actions inline-axis padding.",
+              "name": "--rc-card-actions-padding-inline",
+              "default": "var(--rc-card-padding-inline, 0)"
+            },
+            {
+              "description": "Grid row for the footer region.",
+              "name": "--rc-card-footer-grid-row",
+              "default": "auto"
+            },
+            {
+              "description": "Footer block-axis padding.",
+              "name": "--rc-card-footer-padding-block",
+              "default": "0 var(--rc-card-padding-block, 0)"
+            },
+            {
+              "description": "Footer inline-axis padding.",
+              "name": "--rc-card-footer-padding-inline",
+              "default": "var(--rc-card-padding-inline, 0)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Non-interactive visual container overlay.",
+              "name": "container"
+            },
+            {
+              "description": "Media region wrapper.",
+              "name": "media"
+            },
+            {
+              "description": "Header region wrapper.",
+              "name": "header"
+            },
+            {
+              "description": "Title region wrapper.",
+              "name": "title"
+            },
+            {
+              "description": "Subtitle region wrapper.",
+              "name": "subtitle"
+            },
+            {
+              "description": "Body region wrapper.",
+              "name": "body"
+            },
+            {
+              "description": "Actions region wrapper.",
+              "name": "actions"
+            },
+            {
+              "description": "Footer region wrapper.",
+              "name": "footer"
+            },
+            {
+              "description": "Non-interactive overlay for hover/pressed/ripple effects.",
+              "name": "state-layer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Media region, typically an image or figure.",
+              "name": "media"
+            },
+            {
+              "description": "Header content above title/body.",
+              "name": "header"
+            },
+            {
+              "description": "Primary card title.",
+              "name": "title"
+            },
+            {
+              "description": "Secondary title or metadata.",
+              "name": "subtitle"
+            },
+            {
+              "description": "Body content.",
+              "name": ""
+            },
+            {
+              "description": "Action row.",
+              "name": "actions"
+            },
+            {
+              "description": "Footer content.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Declarative selected state for theme styling.",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Declarative disabled state. Disables action-target click forwarding.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visual affordance for cards with an author-provided action target.",
+              "attribute": "interactive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "actionTarget",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "ID of a same-root anchor or button that receives forwarded surface clicks.",
+              "attribute": "action-target"
+            },
+            {
+              "kind": "field",
+              "name": "_$media",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$header",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$title",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$subtitle",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$actions",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_$footer",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_slotMicrotaskQueued",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncSlotPresence",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_resolveActionTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLAnchorElement | HTMLButtonElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_eventStartedInInteractiveDescendant",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Declarative selected state for theme styling.",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "description": "Declarative disabled state. Disables action-target click forwarding.",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "description": "Visual affordance for cards with an author-provided action target.",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "interactive"
+            },
+            {
+              "description": "ID of a same-root anchor or button that receives forwarded surface clicks.",
+              "name": "action-target",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "actionTarget"
+            },
+            {
+              "description": "Present when the `media` slot has assigned content.",
+              "name": "has-media"
+            },
+            {
+              "description": "Present when the `header` slot has assigned content.",
+              "name": "has-header"
+            },
+            {
+              "description": "Present when the `title` slot has assigned content.",
+              "name": "has-title"
+            },
+            {
+              "description": "Present when the `subtitle` slot has assigned content.",
+              "name": "has-subtitle"
+            },
+            {
+              "description": "Present when the `actions` slot has assigned content.",
+              "name": "has-actions"
+            },
+            {
+              "description": "Present when the `footer` slot has assigned content.",
+              "name": "has-footer"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCCard",
+          "declaration": {
+            "name": "RCCard",
+            "module": "src/rc-card.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCCard",
+            "module": "src/rc-card.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-card-DeNYLO0D.js

@@ -0,0 +1,256 @@
+import { css as h, LitElement as g, html as u } from "lit";
+import { property as d, queryAssignedElements as o } from "lit/decorators.js";
+const v = h`
+  :host {
+    position: relative;
+    display: grid;
+    grid-template-rows: var(--rc-card-grid-template-rows, auto auto auto 1fr auto auto);
+    min-inline-size: 0;
+    border: var(--rc-card-border, 0);
+    border-radius: var(--rc-card-radius, 0);
+    background: var(--rc-card-bg, Canvas);
+    color: var(--rc-card-color, CanvasText);
+    box-shadow: var(--rc-card-shadow, none);
+    overflow: clip;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([interactive]:not([disabled])) {
+    cursor: pointer;
+  }
+
+  [part='container'],
+  [part='state-layer'] {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  [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, 150ms)
+      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'] {
+    position: relative;
+    z-index: 2;
+    min-inline-size: 0;
+    box-sizing: border-box;
+  }
+
+  [part='media'] {
+    grid-row: var(--rc-card-media-grid-row, auto);
+  }
+
+  [part='header'] {
+    grid-row: var(--rc-card-header-grid-row, auto);
+    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, auto);
+    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, auto);
+    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, auto);
+    min-block-size: 0;
+  }
+
+  [part='actions'] {
+    grid-row: var(--rc-card-actions-grid-row, auto);
+    display: flex;
+    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));
+  }
+
+  [part='footer'] {
+    grid-row: var(--rc-card-footer-grid-row, auto);
+    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']) {
+    display: block;
+    inline-size: 100%;
+  }
+
+  ::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 {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    [part='state-layer'] {
+      background: Highlight;
+    }
+  }
+`;
+var b = Object.defineProperty, a = (l, t, r, n) => {
+  for (var i = void 0, s = l.length - 1, p; s >= 0; s--)
+    (p = l[s]) && (i = p(t, r, i) || i);
+  return i && b(t, r, i), i;
+};
+const f = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  '[role="button"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(","), y = ["media", "header", "title", "subtitle", "actions", "footer"], c = class c extends g {
+  constructor() {
+    super(), this.selected = !1, this.disabled = !1, this.interactive = !1, this.actionTarget = "", this._slotMicrotaskQueued = !1, this.addEventListener("click", (t) => this._handleClick(t));
+  }
+  firstUpdated() {
+    this._syncSlotPresence();
+  }
+  render() {
+    return u`
+      <div part="container" aria-hidden="true"></div>
+      <div part="media"><slot name="media" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="header"><slot name="header" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="title"><slot name="title" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="subtitle"><slot name="subtitle" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="body"><slot @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="actions"><slot name="actions" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="footer"><slot name="footer" @slotchange=${this._handleSlotChange}></slot></div>
+      <div part="state-layer" aria-hidden="true"></div>
+    `;
+  }
+  _handleSlotChange() {
+    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
+      this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlotPresence();
+    }));
+  }
+  _syncSlotPresence() {
+    const t = {
+      media: this._$media ?? [],
+      header: this._$header ?? [],
+      title: this._$title ?? [],
+      subtitle: this._$subtitle ?? [],
+      actions: this._$actions ?? [],
+      footer: this._$footer ?? []
+    };
+    for (const r of y)
+      this.toggleAttribute(`has-${r}`, t[r].length > 0);
+  }
+  _resolveActionTarget() {
+    const t = this.actionTarget.trim();
+    if (!t)
+      return null;
+    const r = this.getRootNode(), n = r instanceof Document || r instanceof ShadowRoot ? r.getElementById(t) : null;
+    return n instanceof HTMLAnchorElement || n instanceof HTMLButtonElement ? n : null;
+  }
+  _eventStartedInInteractiveDescendant(t) {
+    for (const r of t.composedPath()) {
+      if (r === this)
+        return !1;
+      if (r instanceof Element && r.matches(f))
+        return !0;
+    }
+    return !1;
+  }
+  _handleClick(t) {
+    if (this.disabled || t.defaultPrevented || t.button !== 0 || this._eventStartedInInteractiveDescendant(t))
+      return;
+    const r = this._resolveActionTarget();
+    r && (t.preventDefault(), r.click());
+  }
+};
+c.styles = v;
+let e = c;
+a([
+  d({ type: Boolean, reflect: !0 })
+], e.prototype, "selected");
+a([
+  d({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+a([
+  d({ type: Boolean, reflect: !0 })
+], e.prototype, "interactive");
+a([
+  d({ type: String, attribute: "action-target" })
+], e.prototype, "actionTarget");
+a([
+  o({ slot: "media", flatten: !0 })
+], e.prototype, "_$media");
+a([
+  o({ slot: "header", flatten: !0 })
+], e.prototype, "_$header");
+a([
+  o({ slot: "title", flatten: !0 })
+], e.prototype, "_$title");
+a([
+  o({ slot: "subtitle", flatten: !0 })
+], e.prototype, "_$subtitle");
+a([
+  o({ slot: "actions", flatten: !0 })
+], e.prototype, "_$actions");
+a([
+  o({ slot: "footer", flatten: !0 })
+], e.prototype, "_$footer");
+export {
+  e as R
+};
+//# sourceMappingURL=rc-card-DeNYLO0D.js.map

package/dist/rc-card-DeNYLO0D.js.map

@@ -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/rc-card-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-card-DeNYLO0D.js";
+customElements.get("rc-card") || customElements.define("rc-card", e);
+export {
+  e as RCCard
+};
+//# sourceMappingURL=rc-card-define.js.map

package/dist/rc-card-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-card-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCCard } from './index.js';\n\ncustomElements.get('rc-card') || customElements.define('rc-card', RCCard);\n\nexport * from './index.js';\n"],"names":["RCCard"],"mappings":";AAEA,eAAe,IAAI,SAAS,KAAK,eAAe,OAAO,WAAWA,CAAM;"}

package/dist/rc-card.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-card-DeNYLO0D.js";
+export {
+  o as RCCard
+};
+//# sourceMappingURL=rc-card.js.map

package/dist/rc-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-card/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-card/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-card.js';

package/dist/types/packages/rc-card/src/rc-card.d.ts

@@ -0,0 +1,113 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-card': RCCard;
+    }
+}
+/**
+ * Design-system-neutral card shell with first-class structural parts and
+ * optional pointer delegation to an author-provided anchor or button.
+ *
+ * @slot media - Media region, typically an image or figure.
+ * @slot header - Header content above title/body.
+ * @slot title - Primary card title.
+ * @slot subtitle - Secondary title or metadata.
+ * @slot - Body content.
+ * @slot actions - Action row.
+ * @slot footer - Footer content.
+ *
+ * @csspart container - Non-interactive visual container overlay.
+ * @csspart media - Media region wrapper.
+ * @csspart header - Header region wrapper.
+ * @csspart title - Title region wrapper.
+ * @csspart subtitle - Subtitle region wrapper.
+ * @csspart body - Body region wrapper.
+ * @csspart actions - Actions region wrapper.
+ * @csspart footer - Footer region wrapper.
+ * @csspart state-layer - Non-interactive overlay for hover/pressed/ripple effects.
+ *
+ * @attr selected - Declarative selected state for theme styling.
+ * @attr disabled - Declarative disabled state. Disables action-target click forwarding.
+ * @attr interactive - Visual affordance for cards with an author-provided action target.
+ * @attr action-target - ID of a same-root anchor or button that receives forwarded surface clicks.
+ * @attr [has-media] - Present when the `media` slot has assigned content.
+ * @attr [has-header] - Present when the `header` slot has assigned content.
+ * @attr [has-title] - Present when the `title` slot has assigned content.
+ * @attr [has-subtitle] - Present when the `subtitle` slot has assigned content.
+ * @attr [has-actions] - Present when the `actions` slot has assigned content.
+ * @attr [has-footer] - Present when the `footer` slot has assigned content.
+ *
+ * @cssprop [--rc-card-grid-template-rows=auto auto auto 1fr auto auto] - Grid template rows for
+ *   the host's structural regions.
+ * @cssprop [--rc-card-border=0] - Card border.
+ * @cssprop [--rc-card-radius=0] - Card border radius.
+ * @cssprop [--rc-card-bg=Canvas] - Card background.
+ * @cssprop [--rc-card-color=CanvasText] - Card text color.
+ * @cssprop [--rc-card-shadow=none] - Card box shadow.
+ * @cssprop [--rc-card-container-bg=transparent] - Background of the non-interactive container overlay.
+ * @cssprop [--rc-card-state-layer-bg=currentColor] - State-layer overlay color.
+ * @cssprop [--rc-card-state-layer-duration=150ms] - State-layer opacity transition duration.
+ * @cssprop [--rc-card-state-layer-easing=ease] - State-layer opacity transition easing.
+ * @cssprop [--rc-card-hover-state-layer-opacity=0] - State-layer opacity on hover (interactive
+ *   cards only).
+ * @cssprop [--rc-card-pressed-state-layer-opacity=0] - State-layer opacity on active press
+ *   (interactive cards only).
+ * @cssprop [--rc-card-padding-block] - Shared block-axis padding fallback for regions that don't
+ *   set their own `*-padding-block` property. Defers to each region's own default (0 for
+ *   header/title/subtitle/actions/footer, 1rem for body) when unset.
+ * @cssprop [--rc-card-padding-inline] - Shared inline-axis padding fallback for regions that
+ *   don't set their own `*-padding-inline` property. Defers to each region's own default (0 for
+ *   header/title/subtitle/actions/footer, 1rem for body) when unset.
+ * @cssprop [--rc-card-media-grid-row=auto] - Grid row for the media region.
+ * @cssprop [--rc-card-header-grid-row=auto] - Grid row for the header region.
+ * @cssprop [--rc-card-header-padding-block=var(--rc-card-padding-block, 0) 0] - Header block-axis padding.
+ * @cssprop [--rc-card-header-padding-inline=var(--rc-card-padding-inline, 0)] - Header inline-axis padding.
+ * @cssprop [--rc-card-title-grid-row=auto] - Grid row for the title region.
+ * @cssprop [--rc-card-title-padding-block=var(--rc-card-padding-block, 0) 0] - Title block-axis padding.
+ * @cssprop [--rc-card-title-padding-inline=var(--rc-card-padding-inline, 0)] - Title inline-axis padding.
+ * @cssprop [--rc-card-title-color=inherit] - Title text color.
+ * @cssprop [--rc-card-title-font=inherit] - Title font shorthand.
+ * @cssprop [--rc-card-subtitle-grid-row=auto] - Grid row for the subtitle region.
+ * @cssprop [--rc-card-subtitle-padding-block=0] - Subtitle block-axis padding.
+ * @cssprop [--rc-card-subtitle-padding-inline=var(--rc-card-padding-inline, 0)] - Subtitle inline-axis padding.
+ * @cssprop [--rc-card-subtitle-color=inherit] - Subtitle text color.
+ * @cssprop [--rc-card-subtitle-font=inherit] - Subtitle font shorthand.
+ * @cssprop [--rc-card-body-grid-row=auto] - Grid row for the body region.
+ * @cssprop [--rc-card-body-padding-block=var(--rc-card-padding-block, 1rem)] - Body block-axis padding.
+ * @cssprop [--rc-card-body-padding-inline=var(--rc-card-padding-inline, 1rem)] - Body inline-axis padding.
+ * @cssprop [--rc-card-actions-grid-row=auto] - Grid row for the actions region.
+ * @cssprop [--rc-card-actions-justify=flex-end] - Justify-content for the actions row.
+ * @cssprop [--rc-card-actions-gap=0] - Gap between action items.
+ * @cssprop [--rc-card-actions-padding-block=0 var(--rc-card-padding-block, 0)] - Actions block-axis padding.
+ * @cssprop [--rc-card-actions-padding-inline=var(--rc-card-padding-inline, 0)] - Actions inline-axis padding.
+ * @cssprop [--rc-card-footer-grid-row=auto] - Grid row for the footer region.
+ * @cssprop [--rc-card-footer-padding-block=0 var(--rc-card-padding-block, 0)] - Footer block-axis padding.
+ * @cssprop [--rc-card-footer-padding-inline=var(--rc-card-padding-inline, 0)] - Footer inline-axis padding.
+ */
+export declare class RCCard extends LitElement {
+    static styles: import('lit').CSSResult;
+    /** Declarative selected state for theme styling. */
+    selected: boolean;
+    /** Declarative disabled state. Disables action-target click forwarding. */
+    disabled: boolean;
+    /** Visual affordance for cards with an author-provided action target. */
+    interactive: boolean;
+    /** ID of a same-root anchor or button that receives forwarded surface clicks. */
+    actionTarget: string;
+    private _$media;
+    private _$header;
+    private _$title;
+    private _$subtitle;
+    private _$actions;
+    private _$footer;
+    private _slotMicrotaskQueued;
+    protected firstUpdated(): void;
+    protected render(): import('lit').TemplateResult<1>;
+    private _handleSlotChange;
+    private _syncSlotPresence;
+    private _resolveActionTarget;
+    private _eventStartedInInteractiveDescendant;
+    private _handleClick;
+    constructor();
+}
+export default RCCard;

package/dist/types/packages/rc-card/src/rc-card.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const cardStyles: import('lit').CSSResult;
+export default cardStyles;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@rcarls/rc-card",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "description": "Design-system-neutral card shell with structural slots and parts.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-card"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-card",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-card.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-card/src/index.d.ts",
+        "default": "./dist/rc-card.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-card/src/define.d.ts",
+        "default": "./dist/rc-card-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-card/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-card-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}