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

annotate design_system/src/components/disclosure.js @ 258:60a876c4587a

[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Wed, 05 Aug 2026 05:25:40 -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 }