ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
100 lines (99 loc) • 6.53 kB
JavaScript
import { T as i, i as d, m as t, n as h, p as c } from "./factory-WDxu11V0.js";
import { t as p } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as o, i as n, n as l, o as b, t as m } from "./utils-U-9uH7EX.js";
import { a as v, n as g } from "./ssr-BzykYefm.js";
var w = ':host{display:block;min-width:0;color:var(--ran-disclosure-color, var(--ran-color-text));font-size:var(--ran-disclosure-font-size, var(--ran-text-copy-2))}:host([hidden]){display:none}.ran-disclosure{display:flex;flex-direction:column;min-width:0}.ran-disclosure-row{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--ran-disclosure-gap, var(--ran-space-2));border:none;border-radius:var(--ran-disclosure-radius, var(--ran-radius-sm));background:none;padding:0;width:100%;min-width:0;height:var(--ran-disclosure-row-height, 24px);color:inherit;font:inherit;text-align:left}:host([expandable]) .ran-disclosure-row{cursor:pointer}:host([expandable]) .ran-disclosure-row:hover{background:var(--ran-disclosure-hover-background, var(--ran-color-bg-hover))}.ran-disclosure-row:focus-visible{outline:2px solid var(--ran-disclosure-focus-color, var(--ran-color-primary));outline-offset:2px}.ran-disclosure-leading{display:inline-grid;flex:none;place-items:center;width:var(--ran-disclosure-leading-size, 16px);height:var(--ran-disclosure-leading-size, 16px);color:var(--ran-disclosure-leading-color, var(--ran-color-text-secondary))}.ran-disclosure-icon,.ran-disclosure-chevron{display:inline-flex;grid-area:1 / 1;align-items:center;justify-content:center;transition:opacity var(--ran-disclosure-transition, .1s) ease}.ran-disclosure-chevron{opacity:0}:host([expandable]) .ran-disclosure-row:hover .ran-disclosure-icon,:host([expandable][open]) .ran-disclosure-icon{opacity:0}:host([expandable]) .ran-disclosure-row:hover .ran-disclosure-chevron,:host([expandable]) .ran-disclosure-row:focus-visible .ran-disclosure-chevron,:host([expandable][open]) .ran-disclosure-chevron{opacity:1}.ran-disclosure-title{flex:none;font-weight:var(--ran-disclosure-title-weight, 400)}.ran-disclosure-sep{flex:none;border-radius:50%;background:var(--ran-disclosure-sep-color, var(--ran-color-text-disabled));width:2px;height:2px}.ran-disclosure-summary{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--ran-disclosure-summary-color, var(--ran-color-text-secondary));text-overflow:ellipsis;white-space:nowrap}:host([tone="error"]) .ran-disclosure-summary{color:var(--ran-disclosure-error-color, var(--ran-color-danger))}:host([busy]) .ran-disclosure-row:after{content:"";position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,var(--ran-disclosure-sweep-color, color-mix(in srgb, var(--ran-color-bg) 65%, transparent)) 55%,transparent 100%);width:var(--ran-disclosure-sweep-width, 12rem);animation:ran-disclosure-sweep var(--ran-disclosure-sweep-duration, 2.6s) ease-out infinite;pointer-events:none}@keyframes ran-disclosure-sweep{0%{left:-12rem}90%,to{left:100%}}@media(prefers-reduced-motion:reduce){:host([busy]) .ran-disclosure-row:after{animation:none}}.ran-disclosure-body{min-width:0}:host(:not([open])) .ran-disclosure-body{display:none}@media(prefers-reduced-motion:reduce){.ran-disclosure-icon,.ran-disclosure-chevron{transition:none}}', f = "disclosuretoggle", y = class extends g {
_events = new p();
_shadowDom;
_row;
_title;
_summary;
_sep;
static get observedAttributes() {
return [
"open",
"expandable",
"heading",
"summary",
"tone",
"busy",
"sheet"
];
}
constructor() {
super(), this._shadowDom = m(this, w);
const e = i(), r = i(), s = i(), a = i(), u = d().class("ran-disclosure").attr("part", "disclosure").children(h().class("ran-disclosure-row").ref(e).attr("part", "row").attr("type", "button").children(t().class("ran-disclosure-leading").attr("part", "leading").children(t().class("ran-disclosure-icon").children(c().attr("name", "leading").build()).build(), t().class("ran-disclosure-chevron").attr("aria-hidden", "true").text("▸").build()).build(), t().class("ran-disclosure-title").ref(r).attr("part", "title").build(), t().class("ran-disclosure-sep").ref(a).attr("part", "separator").attr("aria-hidden", "true").build(), t().class("ran-disclosure-summary").ref(s).attr("part", "summary").build()).build(), d().class("ran-disclosure-body").attr("part", "body").children(c().build()).build()).build();
this._shadowDom.appendChild(u), this._row = o(e, "row"), this._title = o(r, "title"), this._summary = o(s, "summary"), this._sep = o(a, "separator");
}
get open() {
return this.hasAttribute("open");
}
set open(e) {
e !== this.open && (e ? this.setAttribute("open", "") : this.removeAttribute("open"));
}
get expandable() {
return this.hasAttribute("expandable");
}
set expandable(e) {
e ? this.setAttribute("expandable", "") : this.removeAttribute("expandable");
}
get heading() {
return l(this, "heading");
}
set heading(e) {
n(this, "heading", e);
}
get summary() {
return l(this, "summary");
}
set summary(e) {
n(this, "summary", e);
}
get busy() {
return this.hasAttribute("busy");
}
set busy(e) {
e ? this.setAttribute("busy", "") : this.removeAttribute("busy");
}
get tone() {
return l(this, "tone");
}
set tone(e) {
n(this, "tone", e);
}
get sheet() {
return l(this, "sheet");
}
set sheet(e) {
n(this, "sheet", e);
}
connectedCallback() {
this.handlerExternalCss(), this._events.on(this._row, "click", this._toggle), this._sync();
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(e, r, s) {
r !== s && (e === "sheet" ? this.handlerExternalCss() : this._sync());
}
handlerExternalCss = () => {
b(this, this._shadowDom, "sheet", null, this.sheet);
};
_toggle = () => {
this.expandable && (this.open = !this.open, this.dispatchEvent(new CustomEvent(f, {
detail: { open: this.open },
bubbles: !0,
composed: !0
})));
};
_sync() {
const { heading: e, summary: r, expandable: s, open: a } = this;
this._title.textContent = e, this._summary.textContent = r, this._sep.hidden = r === "" || e === "", this._row.setAttribute("aria-expanded", s ? String(a) : "false"), s ? (this._row.removeAttribute("disabled"), this._row.removeAttribute("aria-disabled")) : this._row.setAttribute("aria-disabled", "true");
}
};
v("r-disclosure-row", y);
export {
y as n,
f as t
};