ranui/dist/section-CssakXIf.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 s, i, p as d } from "./factory-WDxu11V0.js";
import { t as l } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as o, i as n, n as r, o as h, t as c } from "./utils-U-9uH7EX.js";
import { a as g, n as b } from "./ssr-BzykYefm.js";
var p = ":host{display:block;scroll-margin-top:var(--ran-section-scroll-margin-top, var(--ran-space-24, 96px));border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-section-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-section-radius, var(--ran-radius-md, 8px));background:var(--ran-section-background, var(--ran-color-bg-elevated, #ffffff));box-shadow:var(--ran-section-shadow, var(--ran-shadow-elevated, none));padding:var(--ran-section-padding, var(--ran-space-8, 32px));box-sizing:border-box}:host([hidden]){display:none}.ran-section-header{display:grid;gap:var(--ran-section-header-gap, var(--ran-space-2, 8px));max-width:760px;margin-bottom:var(--ran-section-header-margin-bottom, var(--ran-space-6, 24px))}.ran-section-heading{margin:0;color:var(--ran-section-heading-color, var(--ran-color-text, #0f172a));font-size:var(--ran-section-heading-font-size, var(--ran-text-heading-2, 24px));font-weight:var(--ran-section-heading-font-weight, var(--ran-text-heading-weight, 600));line-height:1.25;letter-spacing:var(--ran-section-heading-letter-spacing, var(--ran-text-heading-tracking, -.03em))}.ran-section-heading:empty{display:none}.ran-section-subtitle{max-width:620px;margin:0;color:var(--ran-section-subtitle-color, var(--ran-color-text-secondary, #607086))}.ran-section-subtitle:empty{display:none}.ran-section-body{min-width:0}", u = class extends b {
  _shadowDom;
  _headerEl;
  _headingEl;
  _subtitleEl;
  _events = new l();
  static get observedAttributes() {
    return [
      "heading",
      "subtitle",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = c(this, p);
    const t = s(), e = s(), a = i().class("ran-section-header").attr("part", "header").children(i().class("ran-section-heading").ref(t).attr("part", "heading").attr("role", "heading").attr("aria-level", "2"), i().class("ran-section-subtitle").ref(e).attr("part", "subtitle")).build();
    this._shadowDom.appendChild(a), this._shadowDom.appendChild(i().class("ran-section-body").attr("part", "body").children(d()).build()), this._headerEl = a, this._headingEl = o(t, "heading"), this._subtitleEl = o(e, "subtitle");
  }
  get heading() {
    return r(this, "heading");
  }
  set heading(t) {
    n(this, "heading", t);
  }
  get subtitle() {
    return r(this, "subtitle");
  }
  set subtitle(t) {
    n(this, "subtitle", t);
  }
  get sheet() {
    return r(this, "sheet");
  }
  set sheet(t) {
    n(this, "sheet", t);
  }
  _syncHeading() {
    this._headingEl.textContent = this.getAttribute("heading") ?? "", this._headerEl.style.display = this._headingEl.textContent || this._subtitleEl.textContent ? "" : "none";
  }
  _syncSubtitle() {
    this._subtitleEl.textContent = this.getAttribute("subtitle") ?? "", this._headerEl.style.display = this._headingEl.textContent || this._subtitleEl.textContent ? "" : "none";
  }
  connectedCallback() {
    this._syncHeading(), this._syncSubtitle(), h(this, this._shadowDom, "sheet", null, this.sheet);
  }
  disconnectedCallback() {
    this._events.abort();
  }
  attributeChangedCallback(t, e, a) {
    e !== a && (t === "heading" && this._syncHeading(), t === "subtitle" && this._syncSubtitle(), t === "sheet" && h(this, this._shadowDom, t, e, a));
  }
};
g("r-section", u);
export {
  u as t
};