ranui/dist/card-DPbj90Nr.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as i, i as t, p as o } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
import { a as n, i as s, n as d, o as p, t as v } from "./utils-U-9uH7EX.js";
import { a as b, n as f } from "./ssr-BzykYefm.js";
var x = ":host{display:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}:host([hidden]){display:none}:host([hoverable]:hover) .ran-card{border-color:var(--ran-card-hover-border-color, var(--ran-color-border-hover, #c9c9c9));box-shadow:var(--ran-card-hover-shadow, var(--ran-shadow-elevated, 0 1px 2px rgba(0, 0, 0, .04)))}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, var(--ran-space-4, 16px));height:100%;min-width:0;padding:var(--ran-card-padding, var(--ran-space-4, 16px));border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-card-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ran-card-header-gap, var(--ran-space-4, 16px))}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, var(--ran-text-heading-4, 16px));font-weight:var(--ran-card-title-font-weight, var(--ran-text-heading-weight, 600));letter-spacing:var(--ran-card-title-letter-spacing, var(--ran-text-heading-tracking, -.03em));line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:var(--ran-card-description-margin-top, var(--ran-space-1, 4px)) 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, var(--ran-text-copy-2, 14px));font-weight:var(--ran-card-description-font-weight, var(--ran-text-copy-weight, 400));line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", y = class extends f {
  _shadowDom;
  _titleEl;
  _descriptionEl;
  _headerEl;
  _footerEl;
  static get observedAttributes() {
    return [
      "heading",
      "description",
      "sheet",
      "hoverable"
    ];
  }
  constructor() {
    super(), this._shadowDom = v(this, x);
    const r = i(), e = i(), a = i(), c = i(), h = i(), g = t().class("ran-card").attr("part", "card").children(t().class("ran-card-header").ref(r).attr("part", "header").children(t().class("ran-card-title-area").children(t().class("ran-card-title").ref(e).attr("part", "title"), t().class("ran-card-description").ref(a).attr("part", "description")), o().attr("name", "extra").attr("part", "extra")), t().class("ran-card-body").attr("part", "body").children(o()), t().class("ran-card-footer").ref(c).attr("part", "footer").children(o().attr("name", "footer").ref(h))).build();
    this._shadowDom.appendChild(g), this._headerEl = n(r, "header"), this._titleEl = n(e, "title"), this._descriptionEl = n(a, "description"), this._footerEl = n(c, "footer"), this._footerEl.style.display = "none";
    const l = n(h, 'slot[name="footer"]');
    l.addEventListener("slotchange", () => {
      this._footerEl.style.display = l.assignedElements().length > 0 ? "" : "none";
    });
  }
  get heading() {
    return d(this, "heading");
  }
  set heading(r) {
    s(this, "heading", r);
  }
  get description() {
    return d(this, "description");
  }
  set description(r) {
    s(this, "description", r);
  }
  get sheet() {
    return d(this, "sheet");
  }
  set sheet(r) {
    s(this, "sheet", r);
  }
  get hoverable() {
    return this.hasAttribute("hoverable");
  }
  set hoverable(r) {
    r ? this.setAttribute("hoverable", "") : this.removeAttribute("hoverable");
  }
  _syncTitle() {
    this._titleEl.textContent = this.getAttribute("heading") ?? "";
  }
  _syncDescription() {
    this._descriptionEl.textContent = this.getAttribute("description") ?? "";
  }
  connectedCallback() {
    this._syncTitle(), this._syncDescription(), p(this, this._shadowDom, "sheet", null, this.sheet);
  }
  attributeChangedCallback(r, e, a) {
    e !== a && (r === "heading" && this._syncTitle(), r === "description" && this._syncDescription(), r === "sheet" && p(this, this._shadowDom, r, e, a));
  }
};
b("r-card", y);
export {
  y as t
};