/home/mrjunejune/zenbu: design_system/src/components/disclosure.js annotate

annotate design_system/src/components/disclosure.js @ 279:b3b547563ec7

Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d

author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -0700
parents	2b6e732087ff
children

rev	line source
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 let nextDisclosureId = 1;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	2
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 const HTMLElementBase = globalThis.HTMLElement \|\| class {};
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	4
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 function rememberAttribute(state, element, name) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	6 let attributes = state.get(element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 if (!attributes) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 attributes = new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 state.set(element, attributes);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 if (!attributes.has(name)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	12 attributes.set(name, element.getAttribute(name));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	15
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	16 function setManagedAttribute(state, element, name, value) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 rememberAttribute(state, element, name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 if (value === null) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 if (element.hasAttribute(name)) element.removeAttribute(name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 } else if (element.getAttribute(name) !== value) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	21 element.setAttribute(name, value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	22 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	23 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	24
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 function restoreAttribute(state, element, name) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	26 const attributes = state.get(element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	27 if (!attributes?.has(name)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	28 const value = attributes.get(name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	29 if (value === null) element.removeAttribute(name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	30 else element.setAttribute(name, value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	31 attributes.delete(name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 if (!attributes.size) state.delete(element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	33 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	34
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 function restoreElement(state, element) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 const attributes = state.get(element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 if (!attributes) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 for (const [name, value] of attributes) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 if (value === null) element.removeAttribute(name);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 else element.setAttribute(name, value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 state.delete(element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	43 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	44
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 function restoreAttributes(state) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	46 for (const element of [...state.keys()]) restoreElement(state, element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	48
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 function pruneAttributes(state, retained) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 for (const element of [...state.keys()]) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 if (!retained.has(element)) restoreElement(state, element);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	52 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	54
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	55 function uniqueId(element, prefix) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 const document = element.ownerDocument;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	57 let id;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	58 do id = `${prefix}-${nextDisclosureId++}`;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	59 while ([...document.querySelectorAll("[id]")].some(item => item.id === id));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	60 return id;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	61 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	62
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	63 function ensureId(state, element, prefix) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	64 const document = element.ownerDocument;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	65 const duplicate = element.id &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	66 [...document.querySelectorAll("[id]")].some(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	67 item => item !== element && item.id === element.id,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	69 if (!element.id \|\| duplicate) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 setManagedAttribute(state, element, "id", uniqueId(element, prefix));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	71 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 return element.id;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	74
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 function eventElement(event) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	76 const target = event.target;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	77 if (target?.nodeType === 1) return target;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	78 return target?.parentElement \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	80
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 function isDisabled(control) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	82 return Boolean(control.disabled) \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	83 control.getAttribute("aria-disabled") === "true";
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	85
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	86 function emitChange(element, detail) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 element.dispatchEvent(new CustomEvent("zen-change", {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	88 bubbles: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 detail,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	90 }));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	91 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	92
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 function ownedElements(host, selector) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	94 return [...host.querySelectorAll(selector)].filter(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	95 element => element.closest(host.localName) === host,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	96 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	98
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	99 function syncDisclosureIcon(details) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	100 const summary = details.querySelector(":scope > summary");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 if (!summary) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	102 let icon = summary.querySelector(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	103 ":scope > zen-icon[data-zen-disclosure-icon]",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	104 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	105 if (!icon) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	106 icon = document.createElement("zen-icon");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	107 icon.dataset.zenDisclosureIcon = "";
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	108 icon.dataset.zenGenerated = "true";
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	109 summary.append(icon);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	110 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 if (!icon.hasAttribute("name")) icon.setAttribute("name", "chevron-down");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	113
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	114 function removeGeneratedDisclosureIcons(host) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	115 for (const icon of host.querySelectorAll(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 'zen-icon[data-zen-disclosure-icon][data-zen-generated="true"]',
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	117 )) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	118 icon.remove();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	119 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	120 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	121
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	122 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	123 * Coordinates native details elements and summary keyboard navigation.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	124 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 export class ZenAccordion extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	128 static get observedAttributes() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 return ["multiple"];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	131
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 this._details \|\|= new Set();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	134 this._onToggle \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 const opened = event.currentTarget;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	136 if (!opened.open \|\| this.hasAttribute("multiple")) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 for (const details of this._details) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	138 if (details !== opened) details.open = false;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	140 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 this._onKeydown \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	142 if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	144 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 const summary = eventElement(event)?.closest("summary");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	146 const summaries = this.summaries();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	147 const index = summaries.indexOf(summary);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	148 if (index < 0) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 event.preventDefault();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	150 let next = event.key === "Home" ? 0 : summaries.length - 1;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 if (event.key === "ArrowUp") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 next = (index - 1 + summaries.length) % summaries.length;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 } else if (event.key === "ArrowDown") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 next = (index + 1) % summaries.length;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 summaries[next]?.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 this.addEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 this._observer.observe(this, { childList: true, subtree: true });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	163
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	165 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	166 this.removeEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	167 for (const details of this._details \|\| []) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 details.removeEventListener("toggle", this._onToggle);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	169 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 removeGeneratedDisclosureIcons(this);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 this._details?.clear();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	173
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	174 attributeChangedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 if (this.isConnected && this._details) this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	176 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	177
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	178 summaries() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 return [...this._details]
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	180 .map(details => details.querySelector(":scope > summary"))
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	181 .filter(Boolean);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	182 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	183
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	184 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	185 const current = new Set(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	186 ownedElements(this, "details").filter(details => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	187 const parent = details.parentElement?.closest("details");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	188 return !parent \|\| parent.closest("zen-accordion") !== this;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	189 }),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	190 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	191 for (const details of this._details) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	192 if (!current.has(details)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	193 details.removeEventListener("toggle", this._onToggle);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	194 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	195 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	196 for (const details of current) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	197 if (!this._details.has(details)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	198 details.addEventListener("toggle", this._onToggle);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	199 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	200 syncDisclosureIcon(details);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	201 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	202 this._details = current;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	203
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	204 if (!this.hasAttribute("multiple")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	205 const opened = [...current].filter(details => details.open);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	206 for (const details of opened.slice(1)) details.open = false;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	207 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	208 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	209 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	210
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	211 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	212 * Styles a single native details disclosure without replacing its behavior.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	213 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	214 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	215 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	216 export class ZenCollapsible extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	217 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	218 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	219 this._observer.observe(this, { childList: true, subtree: true });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	220 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	221 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	222
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	223 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	224 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	225 removeGeneratedDisclosureIcons(this);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	226 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	227
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	228 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	229 for (const details of ownedElements(this, "details")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	230 syncDisclosureIcon(details);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	231 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	232 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	233 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	234
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	235 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	236 * Connects an ARIA tablist with its native content panels.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	237 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	238 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	239 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	240 export class ZenTabs extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	241 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	242 this._managed \|\|= new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	243 this._onClick \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	244 const tab = eventElement(event)?.closest('[role="tab"]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	245 if (!this.isTab(tab) \|\| isDisabled(tab)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	246 this.activate(tab, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	247 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	248 this._onKeydown \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	249 const tab = eventElement(event)?.closest('[role="tab"]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	250 if (!this.isTab(tab)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	251 const tabs = this._tabs.filter(candidate => !isDisabled(candidate));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	252 const index = tabs.indexOf(tab);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	253 if (index < 0) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	254
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	255 let next;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	256 if (event.key === "Home") next = tabs[0];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	257 else if (event.key === "End") next = tabs[tabs.length - 1];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	258 else if (event.key === "ArrowLeft") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	259 next = tabs[(index - 1 + tabs.length) % tabs.length];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	260 } else if (event.key === "ArrowRight") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	261 next = tabs[(index + 1) % tabs.length];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	262 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	263 return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	264 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	265
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	266 event.preventDefault();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	267 this._focusTab = next;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	268 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	269 next.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	270 if (this.getAttribute("activation") !== "manual") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	271 this.activate(next, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	272 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	273 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	274 this.addEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	275 this.addEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	276 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	277 this._observer.observe(this, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	278 attributeFilter: ["aria-controls", "aria-disabled", "disabled", "id"],
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	279 attributes: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	280 childList: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	281 subtree: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	282 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	283 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	284 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	285
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	286 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	287 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	288 this.removeEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	289 this.removeEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	290 restoreAttributes(this._managed);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	291 this._tablist = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	292 this._tabs = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	293 this._panels = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	294 this._pairs = new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	295 this._active = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	296 this._focusTab = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	297 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	298
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	299 isTab(tab) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	300 return Boolean(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	301 tab && this._tabs?.includes(tab) && this._tablist?.contains(tab),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	302 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	303 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	304
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	305 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	306 this._tablist = ownedElements(this, '[role="tablist"]')[0] \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	307 this._tabs = this._tablist
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	308 ? [...this._tablist.querySelectorAll('[role="tab"]')].filter(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	309 tab => tab.closest("zen-tabs") === this,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	310 )
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	311 : [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	312 this._panels = ownedElements(this, '[role="tabpanel"]');
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	313 pruneAttributes(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	314 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	315 new Set([...this._tabs, ...this._panels]),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	316 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	317
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	318 for (const tab of this._tabs) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	319 ensureId(this._managed, tab, "zen-tab");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	320 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	321 for (const panel of this._panels) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	322 ensureId(this._managed, panel, "zen-tabpanel");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	323 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	324
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	325 const available = new Set(this._panels);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	326 this._pairs = new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	327 for (const [index, tab] of this._tabs.entries()) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	328 const controlled = tab.getAttribute("aria-controls");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	329 let panel = this._panels.find(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	330 candidate => available.has(candidate) && candidate.id === controlled,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	331 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	332 if (!panel && available.has(this._panels[index])) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	333 panel = this._panels[index];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	334 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	335 panel \|\|= [...available][0] \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	336 if (panel) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	337 available.delete(panel);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	338 this._pairs.set(tab, panel);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	339 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	340 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	341 tab,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	342 "aria-controls",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	343 panel.id,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	344 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	345 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	346 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	347 panel,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	348 "aria-labelledby",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	349 tab.id,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	350 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	351 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	352 restoreAttribute(this._managed, tab, "aria-controls");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	353 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	354 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	355 for (const panel of available) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	356 restoreAttribute(this._managed, panel, "aria-labelledby");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	357 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	358
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	359 if (!this._tabs.includes(this._active) \|\| isDisabled(this._active)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	360 this._active = this._tabs.find(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	361 tab => !isDisabled(tab) && tab.getAttribute("aria-selected") === "true",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	362 ) \|\| this._tabs.find(tab => !isDisabled(tab)) \|\| this._tabs[0] \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	363 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	364 if (!this._tabs.includes(this._focusTab) \|\| isDisabled(this._focusTab)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	365 this._focusTab = this._active;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	366 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	367 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	368 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	369
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	370 render() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	371 for (const tab of this._tabs) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	372 const active = tab === this._active;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	373 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	374 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	375 tab,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	376 "aria-selected",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	377 String(active),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	378 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	379 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	380 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	381 tab,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	382 "tabindex",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	383 tab === this._focusTab && !isDisabled(tab) ? "0" : "-1",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	384 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	385 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	386 const activePanel = this._pairs.get(this._active);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	387 for (const panel of this._panels) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	388 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	389 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	390 panel,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	391 "hidden",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	392 panel === activePanel ? null : "",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	393 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	394 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	395 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	396
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	397 activate(tab, notify) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	398 if (!this.isTab(tab) \|\| isDisabled(tab)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	399 this._focusTab = tab;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	400 if (tab === this._active) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	401 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	402 return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	403 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	404 this._active = tab;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	405 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	406 if (notify) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	407 emitChange(this, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	408 value: tab.dataset.value ?? tab.getAttribute("value") ?? tab.id,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	409 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	410 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	411 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	412 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	413
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	414 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	415 * Manages the pressed state of one direct native button.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	416 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	417 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	418 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	419 export class ZenToggle extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	420 static get observedAttributes() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	421 return ["pressed"];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	422 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	423
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	424 get pressed() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	425 return this.hasAttribute("pressed");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	426 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	427
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	428 set pressed(value) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	429 this.toggleAttribute("pressed", Boolean(value));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	430 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	431
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	432 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	433 this._managed \|\|= new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	434 this._onClick \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	435 const button = eventElement(event)?.closest("button");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	436 if (button !== this._button \|\| isDisabled(button)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	437 this.pressed = !this.pressed;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	438 emitChange(this, { pressed: this.pressed });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	439 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	440 this.addEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	441 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	442 this._observer.observe(this, { childList: true });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	443 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	444 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	445
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	446 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	447 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	448 this.removeEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	449 restoreAttributes(this._managed);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	450 this._button = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	451 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	452
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	453 attributeChangedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	454 if (this.isConnected && this._managed) this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	455 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	456
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	457 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	458 const button = this.querySelector(":scope > button");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	459 if (button !== this._button) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	460 if (this._button) restoreElement(this._managed, this._button);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	461 this._button = button;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	462 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	463 if (button) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	464 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	465 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	466 button,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	467 "aria-pressed",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	468 String(this.pressed),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	469 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	470 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	471 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	472 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	473
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	474 function buttonValue(button) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	475 return button.getAttribute("value") ?? button.dataset.value ?? "";
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	476 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	477
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	478 function parseMultipleValue(value) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	479 if (!value) return [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	480 if (value.trim().startsWith("[")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	481 try {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	482 const parsed = JSON.parse(value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	483 if (Array.isArray(parsed)) return parsed.map(String);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	484 } catch {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	485 // Fall through to token parsing.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	486 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	487 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	488 return value.trim().split(/[\s,]+/).filter(Boolean);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	489 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	490
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	491 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	492 * Manages single or multiple pressed buttons with roving focus.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	493 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	494 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	495 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	496 export class ZenToggleGroup extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	497 static get observedAttributes() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	498 return ["type", "value"];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	499 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	500
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	501 get values() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	502 return [...(this._values \|\| [])];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	503 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	504
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	505 set values(values) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	506 this.setValues(Array.isArray(values) ? values.map(String) : [], false);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	507 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	508
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	509 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	510 this._managed \|\|= new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	511 this._buttons \|\|= [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	512 if (!this._initialized) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	513 this._values = this.initialValues();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	514 this._initialized = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	515 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	516 this._hasConnected = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	517 this._onClick \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	518 const button = eventElement(event)?.closest("button");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	519 if (!this._buttons.includes(button) \|\| isDisabled(button)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	520 const value = buttonValue(button);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	521 this._focusButton = button;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	522 let values;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	523 if (this.multiple) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	524 values = this._values.includes(value)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	525 ? this._values.filter(item => item !== value)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	526 : [...this._values, value];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	527 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	528 values = this._values.includes(value) ? [] : [value];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	529 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	530 this.setValues(values, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	531 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	532 this._onKeydown \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	533 const button = eventElement(event)?.closest("button");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	534 const buttons = this._buttons.filter(candidate => !isDisabled(candidate));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	535 const index = buttons.indexOf(button);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	536 if (index < 0) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	537
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	538 let next;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	539 if (event.key === "Home") next = buttons[0];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	540 else if (event.key === "End") next = buttons[buttons.length - 1];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	541 else if (event.key === "ArrowLeft" \|\| event.key === "ArrowUp") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	542 next = buttons[(index - 1 + buttons.length) % buttons.length];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	543 } else if (event.key === "ArrowRight" \|\| event.key === "ArrowDown") {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	544 next = buttons[(index + 1) % buttons.length];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	545 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	546 return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	547 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	548 event.preventDefault();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	549 this._focusButton = next;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	550 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	551 next.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	552 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	553 this.addEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	554 this.addEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	555 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	556 this._observer.observe(this, {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	557 attributeFilter: ["aria-disabled", "data-value", "disabled", "value"],
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	558 attributes: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	559 childList: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	560 subtree: true,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	561 });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	562 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	563 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	564
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	565 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	566 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	567 this.removeEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	568 this.removeEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	569 restoreAttributes(this._managed);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	570 this._buttons = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	571 this._focusButton = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	572 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	573
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	574 attributeChangedCallback(name) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	575 if (name === "value" && !this._settingValue &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	576 this.hasAttribute("value")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	577 this._values = this.readValue();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	578 this._initialized = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	579 } else if (name === "value" && !this._settingValue) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	580 this._values = [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	581 this._initialized = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	582 } else if (name === "type" && !this._hasConnected &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	583 this.hasAttribute("value")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	584 this._values = this.readValue();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	585 this._initialized = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	586 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	587 if (this.isConnected && this._managed) this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	588 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	589
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	590 get multiple() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	591 return this.getAttribute("type") === "multiple";
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	592 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	593
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	594 readValue() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	595 const value = this.getAttribute("value");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	596 if (value === null) return [];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	597 return this.multiple ? parseMultipleValue(value) : [value];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	598 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	599
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	600 initialValues() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	601 if (this.hasAttribute("value")) return this.readValue();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	602 const pressed = [...this.querySelectorAll(":scope > button")]
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	603 .filter(button => button.getAttribute("aria-pressed") === "true");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	604 return pressed.map(buttonValue);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	605 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	606
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	607 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	608 const buttons = [...this.querySelectorAll(":scope > button")];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	609 pruneAttributes(this._managed, new Set([this, ...buttons]));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	610 this._buttons = buttons;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	611 if (!this.hasAttribute("role")) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	612 setManagedAttribute(this._managed, this, "role", "group");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	613 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	614 if (!this.multiple && this._values.length > 1) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	615 this._values = this._values.slice(0, 1);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	616 this.writeValue();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	617 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	618 if (!buttons.includes(this._focusButton) \|\|
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	619 isDisabled(this._focusButton)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	620 this._focusButton = buttons.find(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	621 button =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	622 !isDisabled(button) &&
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	623 button.getAttribute("tabindex") === "0",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	624 ) \|\| buttons.find(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	625 button =>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	626 !isDisabled(button) && this._values.includes(buttonValue(button)),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	627 ) \|\| buttons.find(button => !isDisabled(button)) \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	628 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	629 this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	630 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	631
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	632 render() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	633 for (const button of this._buttons) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	634 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	635 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	636 button,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	637 "aria-pressed",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	638 String(this._values.includes(buttonValue(button))),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	639 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	640 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	641 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	642 button,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	643 "tabindex",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	644 button === this._focusButton ? "0" : "-1",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	645 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	646 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	647 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	648
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	649 writeValue() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	650 this._settingValue = true;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	651 const value = this.multiple
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	652 ? (this._values.some(item => /[\s,]/.test(item))
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	653 ? JSON.stringify(this._values)
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	654 : this._values.join(" "))
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	655 : this._values[0];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	656 if (value === undefined \|\| value === "") this.removeAttribute("value");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	657 else this.setAttribute("value", value);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	658 this._settingValue = false;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	659 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	660
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	661 setValues(values, notify) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	662 const unique = [...new Set(values.map(String))];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	663 this._values = this.multiple ? unique : unique.slice(0, 1);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	664 this.writeValue();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	665 if (this.isConnected) this.render();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	666 if (notify) emitChange(this, { values: this.values });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	667 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	668 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	669
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	670 /**
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	671 * Controls a responsive native sidebar region and its trigger.
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	672 *
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	673 * @extends {HTMLElement}
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	674 */
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	675 export class ZenSidebar extends HTMLElementBase {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	676 static get observedAttributes() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	677 return ["open"];
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	678 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	679
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	680 get open() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	681 return this.hasAttribute("open");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	682 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	683
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	684 set open(value) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	685 this.toggleAttribute("open", Boolean(value));
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	686 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	687
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	688 connectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	689 this._managed \|\|= new Map();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	690 this._onClick \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	691 const trigger = eventElement(event)?.closest(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	692 "[data-zen-sidebar-trigger]",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	693 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	694 if (trigger !== this._trigger \|\| isDisabled(trigger)) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	695 this.setOpen(!this.open, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	696 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	697 this._onKeydown \|\|= event => {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	698 if (event.key !== "Escape" \|\| !this.open) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	699 event.preventDefault();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	700 this.setOpen(false, true);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	701 this._trigger?.focus();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	702 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	703 this._onMediaChange \|\|= () => this.syncState();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	704 this.addEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	705 this.addEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	706 this._observer \|\|= new MutationObserver(() => this.sync());
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	707 this._observer.observe(this, { childList: true });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	708 this._media = globalThis.matchMedia?.("(max-width: 640px)") \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	709 if (this._media?.addEventListener) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	710 this._media.addEventListener("change", this._onMediaChange);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	711 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	712 this._media?.addListener?.(this._onMediaChange);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	713 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	714 this.sync();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	715 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	716
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	717 disconnectedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	718 this._observer?.disconnect();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	719 this.removeEventListener("click", this._onClick);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	720 this.removeEventListener("keydown", this._onKeydown);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	721 if (this._media?.removeEventListener) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	722 this._media.removeEventListener("change", this._onMediaChange);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	723 } else {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	724 this._media?.removeListener?.(this._onMediaChange);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	725 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	726 restoreAttributes(this._managed);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	727 this._trigger = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	728 this._panel = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	729 this._media = null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	730 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	731
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	732 attributeChangedCallback() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	733 if (this.isConnected) this.syncState();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	734 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	735
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	736 sync() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	737 const trigger = ownedElements(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	738 this,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	739 "[data-zen-sidebar-trigger]",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	740 )[0] \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	741 const panel = ownedElements(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	742 this,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	743 "[data-zen-sidebar-panel]",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	744 )[0] \|\| null;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	745 if (trigger !== this._trigger \|\| panel !== this._panel) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	746 if (this._trigger) restoreElement(this._managed, this._trigger);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	747 if (this._panel) restoreElement(this._managed, this._panel);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	748 this._trigger = trigger;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	749 this._panel = panel;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	750 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	751 if (!trigger \|\| !panel) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	752 const panelId = ensureId(this._managed, panel, "zen-sidebar-panel");
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	753 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	754 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	755 trigger,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	756 "aria-controls",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	757 panelId,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	758 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	759 this.syncState();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	760 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	761
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	762 syncState() {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	763 if (!this._trigger \|\| !this._panel) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	764 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	765 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	766 this._panel,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	767 "hidden",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	768 this.open ? null : "",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	769 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	770 setManagedAttribute(
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	771 this._managed,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	772 this._trigger,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	773 "aria-expanded",
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	774 String(this.open),
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	775 );
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	776 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	777
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	778 setOpen(open, notify) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	779 if (this.open === open) return;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	780 this.open = open;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	781 this.syncState();
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	782 if (notify) emitChange(this, { open });
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	783 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	784 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	785
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	786 const definitions = {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	787 "zen-accordion": ZenAccordion,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	788 "zen-collapsible": ZenCollapsible,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	789 "zen-sidebar": ZenSidebar,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	790 "zen-tabs": ZenTabs,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	791 "zen-toggle": ZenToggle,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	792 "zen-toggle-group": ZenToggleGroup,
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	793 };
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	794
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	795 const registry = globalThis.customElements;
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	796 if (registry) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	797 for (const [name, definition] of Object.entries(definitions)) {
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	798 if (!registry.get(name)) registry.define(name, definition);
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	799 }
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: diff changeset	800 }