ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
64 lines (63 loc) • 3.52 kB
JavaScript
import { a as s, n as o, o as r, r as n, t as h } from "./utils-D1iZnChu.js";
import { t as d } from "./events-C59wGdni.js";
import { i as a, p as l } from "./factory-ZNhcQ4tf.js";
import { a as c, n as b } from "./ssr-DSGwPtEd.js";
var g = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:block;scroll-margin-top: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, 28px);box-sizing:border-box}.ran-section-header{display:grid;gap:8px;max-width:760px;margin-bottom:22px}.ran-section-heading{margin:0;color:var(--ran-section-heading-color, var(--ran-color-text, #0f172a));font-size:var(--ran-section-heading-font-size, 24px);font-weight:var(--ran-section-heading-font-weight, 700);line-height:1.25;letter-spacing:0}.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 d();
static get observedAttributes() {
return [
"heading",
"subtitle",
"sheet"
];
}
constructor() {
super(), this._shadowDom = o(this, g);
const t = h(this._shadowDom, ".ran-section-header", () => {
const e = a().class("ran-section-header").attr("part", "header").children(a().class("ran-section-heading").attr("part", "heading").attr("role", "heading").attr("aria-level", "2"), a().class("ran-section-subtitle").attr("part", "subtitle")).build(), i = a().class("ran-section-body").attr("part", "body").children(l()).build();
return this._shadowDom.appendChild(e), this._shadowDom.appendChild(i), e;
});
this._headerEl = t, this._headingEl = t.querySelector(".ran-section-heading"), this._subtitleEl = t.querySelector(".ran-section-subtitle");
}
get heading() {
return n(this, "heading");
}
set heading(t) {
s(this, "heading", t);
}
get subtitle() {
return n(this, "subtitle");
}
set subtitle(t) {
s(this, "subtitle", t);
}
get sheet() {
return n(this, "sheet");
}
set sheet(t) {
s(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(), r(this, this._shadowDom, "sheet", null, this.sheet);
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(t, e, i) {
e !== i && (t === "heading" && this._syncHeading(), t === "subtitle" && this._syncSubtitle(), t === "sheet" && r(this, this._shadowDom, t, e, i));
}
};
c("r-section", u);
export {
u as t
};