@cal.macconnachie/web-components 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1246 +0,0 @@
1
- const M = globalThis, I = M.ShadowRoot && (M.ShadyCSS === void 0 || M.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, q = Symbol(), J = /* @__PURE__ */ new WeakMap();
2
- let at = class {
3
- constructor(t, e, s) {
4
- if (this._$cssResult$ = !0, s !== q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
5
- this.cssText = t, this.t = e;
6
- }
7
- get styleSheet() {
8
- let t = this.o;
9
- const e = this.t;
10
- if (I && t === void 0) {
11
- const s = e !== void 0 && e.length === 1;
12
- s && (t = J.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && J.set(e, t));
13
- }
14
- return t;
15
- }
16
- toString() {
17
- return this.cssText;
18
- }
19
- };
20
- const ft = (i) => new at(typeof i == "string" ? i : i + "", void 0, q), mt = (i, ...t) => {
21
- const e = i.length === 1 ? i[0] : t.reduce(((s, r, a) => s + ((o) => {
22
- if (o._$cssResult$ === !0) return o.cssText;
23
- if (typeof o == "number") return o;
24
- throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
25
- })(r) + i[a + 1]), i[0]);
26
- return new at(e, i, q);
27
- }, gt = (i, t) => {
28
- if (I) i.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
29
- else for (const e of t) {
30
- const s = document.createElement("style"), r = M.litNonce;
31
- r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
32
- }
33
- }, Y = I ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
34
- let e = "";
35
- for (const s of t.cssRules) e += s.cssText;
36
- return ft(e);
37
- })(i) : i;
38
- const { is: vt, defineProperty: $t, getOwnPropertyDescriptor: yt, getOwnPropertyNames: _t, getOwnPropertySymbols: wt, getPrototypeOf: xt } = Object, j = globalThis, Z = j.trustedTypes, At = Z ? Z.emptyScript : "", Et = j.reactiveElementPolyfillSupport, S = (i, t) => i, R = { toAttribute(i, t) {
39
- switch (t) {
40
- case Boolean:
41
- i = i ? At : null;
42
- break;
43
- case Object:
44
- case Array:
45
- i = i == null ? i : JSON.stringify(i);
46
- }
47
- return i;
48
- }, fromAttribute(i, t) {
49
- let e = i;
50
- switch (t) {
51
- case Boolean:
52
- e = i !== null;
53
- break;
54
- case Number:
55
- e = i === null ? null : Number(i);
56
- break;
57
- case Object:
58
- case Array:
59
- try {
60
- e = JSON.parse(i);
61
- } catch {
62
- e = null;
63
- }
64
- }
65
- return e;
66
- } }, W = (i, t) => !vt(i, t), Q = { attribute: !0, type: String, converter: R, reflect: !1, useDefault: !1, hasChanged: W };
67
- Symbol.metadata ??= Symbol("metadata"), j.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
68
- let A = class extends HTMLElement {
69
- static addInitializer(t) {
70
- this._$Ei(), (this.l ??= []).push(t);
71
- }
72
- static get observedAttributes() {
73
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
74
- }
75
- static createProperty(t, e = Q) {
76
- if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
77
- const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
78
- r !== void 0 && $t(this.prototype, t, r);
79
- }
80
- }
81
- static getPropertyDescriptor(t, e, s) {
82
- const { get: r, set: a } = yt(this.prototype, t) ?? { get() {
83
- return this[e];
84
- }, set(o) {
85
- this[e] = o;
86
- } };
87
- return { get: r, set(o) {
88
- const h = r?.call(this);
89
- a?.call(this, o), this.requestUpdate(t, h, s);
90
- }, configurable: !0, enumerable: !0 };
91
- }
92
- static getPropertyOptions(t) {
93
- return this.elementProperties.get(t) ?? Q;
94
- }
95
- static _$Ei() {
96
- if (this.hasOwnProperty(S("elementProperties"))) return;
97
- const t = xt(this);
98
- t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
99
- }
100
- static finalize() {
101
- if (this.hasOwnProperty(S("finalized"))) return;
102
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(S("properties"))) {
103
- const e = this.properties, s = [..._t(e), ...wt(e)];
104
- for (const r of s) this.createProperty(r, e[r]);
105
- }
106
- const t = this[Symbol.metadata];
107
- if (t !== null) {
108
- const e = litPropertyMetadata.get(t);
109
- if (e !== void 0) for (const [s, r] of e) this.elementProperties.set(s, r);
110
- }
111
- this._$Eh = /* @__PURE__ */ new Map();
112
- for (const [e, s] of this.elementProperties) {
113
- const r = this._$Eu(e, s);
114
- r !== void 0 && this._$Eh.set(r, e);
115
- }
116
- this.elementStyles = this.finalizeStyles(this.styles);
117
- }
118
- static finalizeStyles(t) {
119
- const e = [];
120
- if (Array.isArray(t)) {
121
- const s = new Set(t.flat(1 / 0).reverse());
122
- for (const r of s) e.unshift(Y(r));
123
- } else t !== void 0 && e.push(Y(t));
124
- return e;
125
- }
126
- static _$Eu(t, e) {
127
- const s = e.attribute;
128
- return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
129
- }
130
- constructor() {
131
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
132
- }
133
- _$Ev() {
134
- this._$ES = new Promise(((t) => this.enableUpdating = t)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t) => t(this)));
135
- }
136
- addController(t) {
137
- (this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
138
- }
139
- removeController(t) {
140
- this._$EO?.delete(t);
141
- }
142
- _$E_() {
143
- const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
144
- for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
145
- t.size > 0 && (this._$Ep = t);
146
- }
147
- createRenderRoot() {
148
- const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
149
- return gt(t, this.constructor.elementStyles), t;
150
- }
151
- connectedCallback() {
152
- this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
153
- }
154
- enableUpdating(t) {
155
- }
156
- disconnectedCallback() {
157
- this._$EO?.forEach(((t) => t.hostDisconnected?.()));
158
- }
159
- attributeChangedCallback(t, e, s) {
160
- this._$AK(t, s);
161
- }
162
- _$ET(t, e) {
163
- const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
164
- if (r !== void 0 && s.reflect === !0) {
165
- const a = (s.converter?.toAttribute !== void 0 ? s.converter : R).toAttribute(e, s.type);
166
- this._$Em = t, a == null ? this.removeAttribute(r) : this.setAttribute(r, a), this._$Em = null;
167
- }
168
- }
169
- _$AK(t, e) {
170
- const s = this.constructor, r = s._$Eh.get(t);
171
- if (r !== void 0 && this._$Em !== r) {
172
- const a = s.getPropertyOptions(r), o = typeof a.converter == "function" ? { fromAttribute: a.converter } : a.converter?.fromAttribute !== void 0 ? a.converter : R;
173
- this._$Em = r;
174
- const h = o.fromAttribute(e, a.type);
175
- this[r] = h ?? this._$Ej?.get(r) ?? h, this._$Em = null;
176
- }
177
- }
178
- requestUpdate(t, e, s) {
179
- if (t !== void 0) {
180
- const r = this.constructor, a = this[t];
181
- if (s ??= r.getPropertyOptions(t), !((s.hasChanged ?? W)(a, e) || s.useDefault && s.reflect && a === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, s)))) return;
182
- this.C(t, e, s);
183
- }
184
- this.isUpdatePending === !1 && (this._$ES = this._$EP());
185
- }
186
- C(t, e, { useDefault: s, reflect: r, wrapped: a }, o) {
187
- s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, o ?? e ?? this[t]), a !== !0 || o !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
188
- }
189
- async _$EP() {
190
- this.isUpdatePending = !0;
191
- try {
192
- await this._$ES;
193
- } catch (e) {
194
- Promise.reject(e);
195
- }
196
- const t = this.scheduleUpdate();
197
- return t != null && await t, !this.isUpdatePending;
198
- }
199
- scheduleUpdate() {
200
- return this.performUpdate();
201
- }
202
- performUpdate() {
203
- if (!this.isUpdatePending) return;
204
- if (!this.hasUpdated) {
205
- if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
206
- for (const [r, a] of this._$Ep) this[r] = a;
207
- this._$Ep = void 0;
208
- }
209
- const s = this.constructor.elementProperties;
210
- if (s.size > 0) for (const [r, a] of s) {
211
- const { wrapped: o } = a, h = this[r];
212
- o !== !0 || this._$AL.has(r) || h === void 0 || this.C(r, void 0, a, h);
213
- }
214
- }
215
- let t = !1;
216
- const e = this._$AL;
217
- try {
218
- t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach(((s) => s.hostUpdate?.())), this.update(e)) : this._$EM();
219
- } catch (s) {
220
- throw t = !1, this._$EM(), s;
221
- }
222
- t && this._$AE(e);
223
- }
224
- willUpdate(t) {
225
- }
226
- _$AE(t) {
227
- this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
228
- }
229
- _$EM() {
230
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
231
- }
232
- get updateComplete() {
233
- return this.getUpdateComplete();
234
- }
235
- getUpdateComplete() {
236
- return this._$ES;
237
- }
238
- shouldUpdate(t) {
239
- return !0;
240
- }
241
- update(t) {
242
- this._$Eq &&= this._$Eq.forEach(((e) => this._$ET(e, this[e]))), this._$EM();
243
- }
244
- updated(t) {
245
- }
246
- firstUpdated(t) {
247
- }
248
- };
249
- A.elementStyles = [], A.shadowRootOptions = { mode: "open" }, A[S("elementProperties")] = /* @__PURE__ */ new Map(), A[S("finalized")] = /* @__PURE__ */ new Map(), Et?.({ ReactiveElement: A }), (j.reactiveElementVersions ??= []).push("2.1.1");
250
- const K = globalThis, N = K.trustedTypes, X = N ? N.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ot = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, nt = "?" + g, Tt = `<${nt}>`, w = document, k = () => w.createComment(""), P = (i) => i === null || typeof i != "object" && typeof i != "function", V = Array.isArray, St = (i) => V(i) || typeof i?.[Symbol.iterator] == "function", D = `[
251
- \f\r]`, T = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, tt = /-->/g, et = />/g, y = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^
252
- \f\r"'\`<>=]|("|')|))|$)`, "g"), st = /'/g, it = /"/g, ht = /^(?:script|style|textarea|title)$/i, Ct = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), f = Ct(1), v = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), rt = /* @__PURE__ */ new WeakMap(), _ = w.createTreeWalker(w, 129);
253
- function lt(i, t) {
254
- if (!V(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
255
- return X !== void 0 ? X.createHTML(t) : t;
256
- }
257
- const kt = (i, t) => {
258
- const e = i.length - 1, s = [];
259
- let r, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = T;
260
- for (let h = 0; h < e; h++) {
261
- const n = i[h];
262
- let c, p, l = -1, b = 0;
263
- for (; b < n.length && (o.lastIndex = b, p = o.exec(n), p !== null); ) b = o.lastIndex, o === T ? p[1] === "!--" ? o = tt : p[1] !== void 0 ? o = et : p[2] !== void 0 ? (ht.test(p[2]) && (r = RegExp("</" + p[2], "g")), o = y) : p[3] !== void 0 && (o = y) : o === y ? p[0] === ">" ? (o = r ?? T, l = -1) : p[1] === void 0 ? l = -2 : (l = o.lastIndex - p[2].length, c = p[1], o = p[3] === void 0 ? y : p[3] === '"' ? it : st) : o === it || o === st ? o = y : o === tt || o === et ? o = T : (o = y, r = void 0);
264
- const m = o === y && i[h + 1].startsWith("/>") ? " " : "";
265
- a += o === T ? n + Tt : l >= 0 ? (s.push(c), n.slice(0, l) + ot + n.slice(l) + g + m) : n + g + (l === -2 ? h : m);
266
- }
267
- return [lt(i, a + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
268
- };
269
- class H {
270
- constructor({ strings: t, _$litType$: e }, s) {
271
- let r;
272
- this.parts = [];
273
- let a = 0, o = 0;
274
- const h = t.length - 1, n = this.parts, [c, p] = kt(t, e);
275
- if (this.el = H.createElement(c, s), _.currentNode = this.el.content, e === 2 || e === 3) {
276
- const l = this.el.content.firstChild;
277
- l.replaceWith(...l.childNodes);
278
- }
279
- for (; (r = _.nextNode()) !== null && n.length < h; ) {
280
- if (r.nodeType === 1) {
281
- if (r.hasAttributes()) for (const l of r.getAttributeNames()) if (l.endsWith(ot)) {
282
- const b = p[o++], m = r.getAttribute(l).split(g), O = /([.?@])?(.*)/.exec(b);
283
- n.push({ type: 1, index: a, name: O[2], strings: m, ctor: O[1] === "." ? Ht : O[1] === "?" ? Ut : O[1] === "@" ? Ot : L }), r.removeAttribute(l);
284
- } else l.startsWith(g) && (n.push({ type: 6, index: a }), r.removeAttribute(l));
285
- if (ht.test(r.tagName)) {
286
- const l = r.textContent.split(g), b = l.length - 1;
287
- if (b > 0) {
288
- r.textContent = N ? N.emptyScript : "";
289
- for (let m = 0; m < b; m++) r.append(l[m], k()), _.nextNode(), n.push({ type: 2, index: ++a });
290
- r.append(l[b], k());
291
- }
292
- }
293
- } else if (r.nodeType === 8) if (r.data === nt) n.push({ type: 2, index: a });
294
- else {
295
- let l = -1;
296
- for (; (l = r.data.indexOf(g, l + 1)) !== -1; ) n.push({ type: 7, index: a }), l += g.length - 1;
297
- }
298
- a++;
299
- }
300
- }
301
- static createElement(t, e) {
302
- const s = w.createElement("template");
303
- return s.innerHTML = t, s;
304
- }
305
- }
306
- function E(i, t, e = i, s) {
307
- if (t === v) return t;
308
- let r = s !== void 0 ? e._$Co?.[s] : e._$Cl;
309
- const a = P(t) ? void 0 : t._$litDirective$;
310
- return r?.constructor !== a && (r?._$AO?.(!1), a === void 0 ? r = void 0 : (r = new a(i), r._$AT(i, e, s)), s !== void 0 ? (e._$Co ??= [])[s] = r : e._$Cl = r), r !== void 0 && (t = E(i, r._$AS(i, t.values), r, s)), t;
311
- }
312
- class Pt {
313
- constructor(t, e) {
314
- this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
315
- }
316
- get parentNode() {
317
- return this._$AM.parentNode;
318
- }
319
- get _$AU() {
320
- return this._$AM._$AU;
321
- }
322
- u(t) {
323
- const { el: { content: e }, parts: s } = this._$AD, r = (t?.creationScope ?? w).importNode(e, !0);
324
- _.currentNode = r;
325
- let a = _.nextNode(), o = 0, h = 0, n = s[0];
326
- for (; n !== void 0; ) {
327
- if (o === n.index) {
328
- let c;
329
- n.type === 2 ? c = new U(a, a.nextSibling, this, t) : n.type === 1 ? c = new n.ctor(a, n.name, n.strings, this, t) : n.type === 6 && (c = new Mt(a, this, t)), this._$AV.push(c), n = s[++h];
330
- }
331
- o !== n?.index && (a = _.nextNode(), o++);
332
- }
333
- return _.currentNode = w, r;
334
- }
335
- p(t) {
336
- let e = 0;
337
- for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(t, s, e), e += s.strings.length - 2) : s._$AI(t[e])), e++;
338
- }
339
- }
340
- class U {
341
- get _$AU() {
342
- return this._$AM?._$AU ?? this._$Cv;
343
- }
344
- constructor(t, e, s, r) {
345
- this.type = 2, this._$AH = d, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
346
- }
347
- get parentNode() {
348
- let t = this._$AA.parentNode;
349
- const e = this._$AM;
350
- return e !== void 0 && t?.nodeType === 11 && (t = e.parentNode), t;
351
- }
352
- get startNode() {
353
- return this._$AA;
354
- }
355
- get endNode() {
356
- return this._$AB;
357
- }
358
- _$AI(t, e = this) {
359
- t = E(this, t, e), P(t) ? t === d || t == null || t === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : t !== this._$AH && t !== v && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : St(t) ? this.k(t) : this._(t);
360
- }
361
- O(t) {
362
- return this._$AA.parentNode.insertBefore(t, this._$AB);
363
- }
364
- T(t) {
365
- this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
366
- }
367
- _(t) {
368
- this._$AH !== d && P(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
369
- }
370
- $(t) {
371
- const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = H.createElement(lt(s.h, s.h[0]), this.options)), s);
372
- if (this._$AH?._$AD === r) this._$AH.p(e);
373
- else {
374
- const a = new Pt(r, this), o = a.u(this.options);
375
- a.p(e), this.T(o), this._$AH = a;
376
- }
377
- }
378
- _$AC(t) {
379
- let e = rt.get(t.strings);
380
- return e === void 0 && rt.set(t.strings, e = new H(t)), e;
381
- }
382
- k(t) {
383
- V(this._$AH) || (this._$AH = [], this._$AR());
384
- const e = this._$AH;
385
- let s, r = 0;
386
- for (const a of t) r === e.length ? e.push(s = new U(this.O(k()), this.O(k()), this, this.options)) : s = e[r], s._$AI(a), r++;
387
- r < e.length && (this._$AR(s && s._$AB.nextSibling, r), e.length = r);
388
- }
389
- _$AR(t = this._$AA.nextSibling, e) {
390
- for (this._$AP?.(!1, !0, e); t !== this._$AB; ) {
391
- const s = t.nextSibling;
392
- t.remove(), t = s;
393
- }
394
- }
395
- setConnected(t) {
396
- this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
397
- }
398
- }
399
- class L {
400
- get tagName() {
401
- return this.element.tagName;
402
- }
403
- get _$AU() {
404
- return this._$AM._$AU;
405
- }
406
- constructor(t, e, s, r, a) {
407
- this.type = 1, this._$AH = d, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = a, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = d;
408
- }
409
- _$AI(t, e = this, s, r) {
410
- const a = this.strings;
411
- let o = !1;
412
- if (a === void 0) t = E(this, t, e, 0), o = !P(t) || t !== this._$AH && t !== v, o && (this._$AH = t);
413
- else {
414
- const h = t;
415
- let n, c;
416
- for (t = a[0], n = 0; n < a.length - 1; n++) c = E(this, h[s + n], e, n), c === v && (c = this._$AH[n]), o ||= !P(c) || c !== this._$AH[n], c === d ? t = d : t !== d && (t += (c ?? "") + a[n + 1]), this._$AH[n] = c;
417
- }
418
- o && !r && this.j(t);
419
- }
420
- j(t) {
421
- t === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
422
- }
423
- }
424
- class Ht extends L {
425
- constructor() {
426
- super(...arguments), this.type = 3;
427
- }
428
- j(t) {
429
- this.element[this.name] = t === d ? void 0 : t;
430
- }
431
- }
432
- class Ut extends L {
433
- constructor() {
434
- super(...arguments), this.type = 4;
435
- }
436
- j(t) {
437
- this.element.toggleAttribute(this.name, !!t && t !== d);
438
- }
439
- }
440
- class Ot extends L {
441
- constructor(t, e, s, r, a) {
442
- super(t, e, s, r, a), this.type = 5;
443
- }
444
- _$AI(t, e = this) {
445
- if ((t = E(this, t, e, 0) ?? d) === v) return;
446
- const s = this._$AH, r = t === d && s !== d || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, a = t !== d && (s === d || r);
447
- r && this.element.removeEventListener(this.name, this, s), a && this.element.addEventListener(this.name, this, t), this._$AH = t;
448
- }
449
- handleEvent(t) {
450
- typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
451
- }
452
- }
453
- class Mt {
454
- constructor(t, e, s) {
455
- this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
456
- }
457
- get _$AU() {
458
- return this._$AM._$AU;
459
- }
460
- _$AI(t) {
461
- E(this, t);
462
- }
463
- }
464
- const Rt = K.litHtmlPolyfillSupport;
465
- Rt?.(H, U), (K.litHtmlVersions ??= []).push("3.3.1");
466
- const Nt = (i, t, e) => {
467
- const s = e?.renderBefore ?? t;
468
- let r = s._$litPart$;
469
- if (r === void 0) {
470
- const a = e?.renderBefore ?? null;
471
- s._$litPart$ = r = new U(t.insertBefore(k(), a), a, void 0, e ?? {});
472
- }
473
- return r._$AI(i), r;
474
- };
475
- const F = globalThis;
476
- let C = class extends A {
477
- constructor() {
478
- super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
479
- }
480
- createRenderRoot() {
481
- const t = super.createRenderRoot();
482
- return this.renderOptions.renderBefore ??= t.firstChild, t;
483
- }
484
- update(t) {
485
- const e = this.render();
486
- this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Nt(e, this.renderRoot, this.renderOptions);
487
- }
488
- connectedCallback() {
489
- super.connectedCallback(), this._$Do?.setConnected(!0);
490
- }
491
- disconnectedCallback() {
492
- super.disconnectedCallback(), this._$Do?.setConnected(!1);
493
- }
494
- render() {
495
- return v;
496
- }
497
- };
498
- C._$litElement$ = !0, C.finalized = !0, F.litElementHydrateSupport?.({ LitElement: C });
499
- const jt = F.litElementPolyfillSupport;
500
- jt?.({ LitElement: C });
501
- (F.litElementVersions ??= []).push("4.2.1");
502
- const Lt = (i) => (t, e) => {
503
- e !== void 0 ? e.addInitializer((() => {
504
- customElements.define(i, t);
505
- })) : customElements.define(i, t);
506
- };
507
- const Dt = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: W }, zt = (i = Dt, t, e) => {
508
- const { kind: s, metadata: r } = e;
509
- let a = globalThis.litPropertyMetadata.get(r);
510
- if (a === void 0 && globalThis.litPropertyMetadata.set(r, a = /* @__PURE__ */ new Map()), s === "setter" && ((i = Object.create(i)).wrapped = !0), a.set(e.name, i), s === "accessor") {
511
- const { name: o } = e;
512
- return { set(h) {
513
- const n = t.get.call(this);
514
- t.set.call(this, h), this.requestUpdate(o, n, i);
515
- }, init(h) {
516
- return h !== void 0 && this.C(o, void 0, i, h), h;
517
- } };
518
- }
519
- if (s === "setter") {
520
- const { name: o } = e;
521
- return function(h) {
522
- const n = this[o];
523
- t.call(this, h), this.requestUpdate(o, n, i);
524
- };
525
- }
526
- throw Error("Unsupported decorator location: " + s);
527
- };
528
- function x(i) {
529
- return (t, e) => typeof e == "object" ? zt(i, t, e) : ((s, r, a) => {
530
- const o = r.hasOwnProperty(a);
531
- return r.constructor.createProperty(a, s), o ? Object.getOwnPropertyDescriptor(r, a) : void 0;
532
- })(i, t, e);
533
- }
534
- function dt(i) {
535
- return x({ ...i, state: !0, attribute: !1 });
536
- }
537
- const Bt = (i, t, e) => (e.configurable = !0, e.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(i, t, e), e);
538
- function It(i, t) {
539
- return (e, s, r) => {
540
- const a = (o) => o.renderRoot?.querySelector(i) ?? null;
541
- return Bt(e, s, { get() {
542
- return a(this);
543
- } });
544
- };
545
- }
546
- const ct = { ATTRIBUTE: 1, CHILD: 2 }, pt = (i) => (...t) => ({ _$litDirective$: i, values: t });
547
- class ut {
548
- constructor(t) {
549
- }
550
- get _$AU() {
551
- return this._$AM._$AU;
552
- }
553
- _$AT(t, e, s) {
554
- this._$Ct = t, this._$AM = e, this._$Ci = s;
555
- }
556
- _$AS(t, e) {
557
- return this.update(t, e);
558
- }
559
- update(t, e) {
560
- return this.render(...e);
561
- }
562
- }
563
- const z = pt(class extends ut {
564
- constructor(i) {
565
- if (super(i), i.type !== ct.ATTRIBUTE || i.name !== "class" || i.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
566
- }
567
- render(i) {
568
- return " " + Object.keys(i).filter(((t) => i[t])).join(" ") + " ";
569
- }
570
- update(i, [t]) {
571
- if (this.st === void 0) {
572
- this.st = /* @__PURE__ */ new Set(), i.strings !== void 0 && (this.nt = new Set(i.strings.join(" ").split(/\s/).filter(((s) => s !== ""))));
573
- for (const s in t) t[s] && !this.nt?.has(s) && this.st.add(s);
574
- return this.render(t);
575
- }
576
- const e = i.element.classList;
577
- for (const s of this.st) s in t || (e.remove(s), this.st.delete(s));
578
- for (const s in t) {
579
- const r = !!t[s];
580
- r === this.st.has(s) || this.nt?.has(s) || (r ? (e.add(s), this.st.add(s)) : (e.remove(s), this.st.delete(s)));
581
- }
582
- return v;
583
- }
584
- });
585
- class B extends ut {
586
- constructor(t) {
587
- if (super(t), this.it = d, t.type !== ct.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
588
- }
589
- render(t) {
590
- if (t === d || t == null) return this._t = void 0, this.it = t;
591
- if (t === v) return t;
592
- if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
593
- if (t === this.it) return this._t;
594
- this.it = t;
595
- const e = [t];
596
- return e.raw = e, this._t = { _$litType$: this.constructor.resultType, strings: e, values: [] };
597
- }
598
- }
599
- B.directiveName = "unsafeHTML", B.resultType = 1;
600
- const qt = pt(B);
601
- var Wt = Object.defineProperty, bt = (i, t, e, s) => {
602
- for (var r = void 0, a = i.length - 1, o; a >= 0; a--)
603
- (o = i[a]) && (r = o(t, e, r) || r);
604
- return r && Wt(t, e, r), r;
605
- };
606
- class G extends C {
607
- constructor() {
608
- super(...arguments), this.theme = "light", this.storageKey = "theme-preference", this.boundThemeChangeHandler = this.handleGlobalThemeChange.bind(this);
609
- }
610
- connectedCallback() {
611
- super.connectedCallback();
612
- const t = document.documentElement.getAttribute("data-theme"), e = localStorage.getItem(this.storageKey), s = window.matchMedia("(prefers-color-scheme: dark)").matches;
613
- t ? this.theme = t : e ? (this.theme = e, this.applyTheme()) : s ? (this.theme = "dark", this.applyTheme()) : this.applyTheme(), window.addEventListener("theme-changed", this.boundThemeChangeHandler);
614
- }
615
- disconnectedCallback() {
616
- window.removeEventListener("theme-changed", this.boundThemeChangeHandler), super.disconnectedCallback();
617
- }
618
- handleGlobalThemeChange(t) {
619
- const e = t;
620
- e.target !== this && e.detail.theme !== this.theme && (this.theme = e.detail.theme);
621
- }
622
- applyTheme() {
623
- document.documentElement.setAttribute("data-theme", this.theme), localStorage.setItem(this.storageKey, this.theme), this.dispatchEvent(
624
- new CustomEvent("theme-changed", {
625
- detail: { theme: this.theme },
626
- bubbles: !0,
627
- composed: !0
628
- })
629
- );
630
- }
631
- }
632
- bt([
633
- x({ type: String, attribute: "data-theme", reflect: !0 })
634
- ], G.prototype, "theme");
635
- bt([
636
- x({ type: String, attribute: "storage-key" })
637
- ], G.prototype, "storageKey");
638
- var Kt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, $ = (i, t, e, s) => {
639
- for (var r = s > 1 ? void 0 : s ? Vt(t, e) : t, a = i.length - 1, o; a >= 0; a--)
640
- (o = i[a]) && (r = (s ? o(t, e, r) : o(r)) || r);
641
- return s && r && Kt(t, e, r), r;
642
- };
643
- let u = class extends G {
644
- constructor() {
645
- super(...arguments), this.activeTab = "", this.ariaLabel = "Dashboard navigation", this.syncWithHash = !0, this.variant = "sidebar", this.tabs = [], this.isExpanded = !1, this.boundHashChangeHandler = this.handleHashChange.bind(this);
646
- }
647
- connectedCallback() {
648
- super.connectedCallback(), window.addEventListener("hashchange", this.boundHashChangeHandler), this.addEventListener("tab-register", this.handleTabRegister), this.addEventListener("tab-badge-update", this.handleTabBadgeUpdate);
649
- }
650
- disconnectedCallback() {
651
- window.removeEventListener("hashchange", this.boundHashChangeHandler), this.removeEventListener("tab-register", this.handleTabRegister), this.removeEventListener("tab-badge-update", this.handleTabBadgeUpdate), super.disconnectedCallback();
652
- }
653
- firstUpdated() {
654
- this.queryAndRegisterTabs(), setTimeout(() => {
655
- if (this.syncWithHash && window.location.hash) {
656
- const i = window.location.hash.replace("#", "");
657
- if (this.tabs.find((e) => e.id === i)) {
658
- this.selectTab(i);
659
- return;
660
- }
661
- }
662
- !this.activeTab && this.tabs.length > 0 && this.selectTab(this.tabs[0].id);
663
- }, 0);
664
- }
665
- queryAndRegisterTabs() {
666
- this.querySelectorAll("base-tab").forEach((t) => {
667
- const e = {
668
- id: t.id,
669
- label: t.getAttribute("label") || "",
670
- badge: t.hasAttribute("badge") ? Number(t.getAttribute("badge")) : void 0,
671
- icon: t.getAttribute("icon") || void 0
672
- };
673
- e.id && !this.tabs.find((s) => s.id === e.id) && (this.tabs = [...this.tabs, e]);
674
- });
675
- }
676
- updated(i) {
677
- super.updated(i), i.has("activeTab") && this.updateChildTabs();
678
- }
679
- handleTabRegister(i) {
680
- i.stopPropagation();
681
- const t = i.detail;
682
- this.tabs.find((e) => e.id === t.id) || (this.tabs = [...this.tabs, t], this.tabs.length === 1 && !this.activeTab && setTimeout(() => {
683
- this.selectTab(t.id);
684
- }, 0));
685
- }
686
- handleTabBadgeUpdate(i) {
687
- i.stopPropagation();
688
- const { id: t, badge: e } = i.detail, s = this.tabs.findIndex((r) => r.id === t);
689
- s !== -1 && (this.tabs = this.tabs.map(
690
- (r, a) => a === s ? { ...r, badge: e } : r
691
- ));
692
- }
693
- updateChildTabs() {
694
- this.querySelectorAll("base-tab").forEach((t) => {
695
- t.active = t.id === this.activeTab;
696
- });
697
- }
698
- handleHashChange() {
699
- if (!this.syncWithHash) return;
700
- const i = window.location.hash.replace("#", "");
701
- this.tabs.find((e) => e.id === i) && i !== this.activeTab && this.selectTab(i);
702
- }
703
- selectTab(i) {
704
- this.activeTab = i, this.syncWithHash && history.replaceState(null, "", `#${i}`), this.dispatchEvent(
705
- new CustomEvent("tab-change", {
706
- detail: { activeTab: i },
707
- bubbles: !0,
708
- composed: !0
709
- })
710
- );
711
- }
712
- handleTabClick(i) {
713
- this.selectTab(i);
714
- }
715
- handleKeyDown(i, t) {
716
- let e = t;
717
- switch (i.key) {
718
- case "ArrowRight":
719
- case "ArrowDown":
720
- i.preventDefault(), e = t + 1, e >= this.tabs.length && (e = 0);
721
- break;
722
- case "ArrowLeft":
723
- case "ArrowUp":
724
- i.preventDefault(), e = t - 1, e < 0 && (e = this.tabs.length - 1);
725
- break;
726
- case "Home":
727
- i.preventDefault(), e = 0;
728
- break;
729
- case "End":
730
- i.preventDefault(), e = this.tabs.length - 1;
731
- break;
732
- default:
733
- return;
734
- }
735
- const s = this.tabs[e];
736
- s && (this.selectTab(s.id), this.shadowRoot?.querySelector(`#tab-${s.id}`)?.focus());
737
- }
738
- toggleSidebar() {
739
- this.isExpanded = !this.isExpanded;
740
- }
741
- renderTabButton(i, t) {
742
- const e = this.activeTab === i.id, s = {
743
- "tab-button": !0,
744
- "tab-button--active": e
745
- };
746
- return f`
747
- <button
748
- role="tab"
749
- aria-selected=${e}
750
- aria-controls="tabpanel-${i.id}"
751
- id="tab-${i.id}"
752
- tabindex=${e ? 0 : -1}
753
- class=${z(s)}
754
- @click=${() => this.handleTabClick(i.id)}
755
- @keydown=${(r) => this.handleKeyDown(r, t)}
756
- >
757
- ${i.icon && this.variant === "sidebar" ? f`<span class="tab-icon">${qt(i.icon)}</span>` : d}
758
- ${this.isExpanded || this.variant !== "sidebar" ? f`<span class="tab-label">${i.label}</span>` : d}
759
- ${i.badge !== void 0 && i.badge > 0 && (this.isExpanded || this.variant !== "sidebar") ? f`<span class="tab-badge">${i.badge}</span>` : d}
760
- </button>
761
- `;
762
- }
763
- render() {
764
- const i = {
765
- "base-tabs": !0,
766
- "base-tabs--vertical": this.variant === "sidebar"
767
- }, t = {
768
- "tabs-sidebar": !0,
769
- "tabs-sidebar--expanded": this.isExpanded
770
- };
771
- return f`
772
- <div class=${z(i)} role="tablist" aria-label=${this.ariaLabel}>
773
- ${this.variant === "sidebar" ? f`
774
- <div class=${z(t)}>
775
- <!-- Sidebar Header -->
776
- <div class="sidebar-header">
777
- <slot name="sidebar-header"></slot>
778
- </div>
779
-
780
- <!-- Sidebar Toggle -->
781
- <button
782
- class="sidebar-toggle"
783
- @click=${this.toggleSidebar}
784
- aria-label="Toggle sidebar"
785
- >
786
- ${this.isExpanded ? f`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
787
- <path d="M11 19l-7-7 7-7" />
788
- </svg>` : f`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
789
- <path d="M9 5l7 7-7 7" />
790
- </svg>`}
791
- </button>
792
-
793
- <!-- Tabs Navigation -->
794
- <nav class="tabs-nav">
795
- ${this.tabs.map((e, s) => this.renderTabButton(e, s))}
796
- </nav>
797
-
798
- <!-- Sidebar Footer -->
799
- <div class="sidebar-footer">
800
- <slot name="sidebar-footer"></slot>
801
- </div>
802
- </div>
803
- ` : f`
804
- <div class="tabs-header">
805
- ${this.tabs.map((e, s) => this.renderTabButton(e, s))}
806
- </div>
807
- `}
808
-
809
- <!-- Tabs Content -->
810
- <div class="tabs-content">
811
- <slot></slot>
812
- </div>
813
- </div>
814
- `;
815
- }
816
- };
817
- u.styles = mt`
818
- :host {
819
- display: block;
820
- width: 100%;
821
- }
822
-
823
- .base-tabs {
824
- width: 100%;
825
- }
826
-
827
- .base-tabs--vertical {
828
- display: flex;
829
- gap: var(--space-6, 1.5rem);
830
- align-items: flex-start;
831
- padding: var(--space-4, 1rem);
832
- }
833
-
834
- /* Sidebar Layout */
835
- .tabs-sidebar {
836
- position: sticky;
837
- top: var(--space-4, 1rem);
838
- max-height: calc(100dvh - var(--space-8, 2rem));
839
- display: flex;
840
- flex-direction: column;
841
- gap: var(--space-4, 1rem);
842
- background: var(--color-bg-primary, #ffffff);
843
- border: 1px solid var(--color-border, #e2e8f0);
844
- border-radius: var(--radius-lg, 0.75rem);
845
- padding: var(--space-4, 1rem);
846
- width: 80px;
847
- transition: width var(--transition-base, 200ms);
848
- overflow-y: auto;
849
- overflow-x: hidden;
850
- scrollbar-width: thin;
851
- box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
852
- }
853
-
854
- .tabs-sidebar--expanded {
855
- width: 260px;
856
- }
857
-
858
- .sidebar-header {
859
- display: flex;
860
- flex-direction: column;
861
- gap: var(--space-3, 0.75rem);
862
- padding-bottom: var(--space-3, 0.75rem);
863
- border-bottom: 1px solid var(--color-border, #e2e8f0);
864
- }
865
-
866
- .sidebar-toggle {
867
- display: flex;
868
- align-items: center;
869
- justify-content: center;
870
- padding: var(--space-2, 0.5rem);
871
- background: none;
872
- border: none;
873
- color: var(--color-text-secondary, #64748b);
874
- cursor: pointer;
875
- border-radius: var(--radius-md, 0.5rem);
876
- transition: all var(--transition-fast, 150ms);
877
- }
878
-
879
- .sidebar-toggle:hover {
880
- background: var(--color-bg-muted, #f8fafc);
881
- color: var(--color-text-primary, #0f172a);
882
- }
883
-
884
- .sidebar-toggle svg {
885
- stroke: var(--color-text-primary, #0f172a);
886
- opacity: 0.8;
887
- }
888
-
889
- .sidebar-toggle:hover svg {
890
- stroke: var(--color-text-primary, #0f172a);
891
- opacity: 1;
892
- }
893
-
894
- .sidebar-toggle:focus-visible {
895
- outline: 2px solid var(--color-primary, #2563eb);
896
- outline-offset: 2px;
897
- }
898
-
899
- .tabs-nav {
900
- display: flex;
901
- flex-direction: column;
902
- gap: var(--space-2, 0.5rem);
903
- flex: 1;
904
- }
905
-
906
- .sidebar-footer {
907
- display: flex;
908
- flex-direction: column;
909
- gap: var(--space-2, 0.5rem);
910
- padding-top: var(--space-3, 0.75rem);
911
- border-top: 1px solid var(--color-border, #e2e8f0);
912
- margin-top: auto;
913
- }
914
-
915
- .tabs-sidebar .tab-button {
916
- display: flex;
917
- align-items: center;
918
- justify-content: flex-start;
919
- gap: var(--space-3, 0.75rem);
920
- padding: var(--space-3, 0.75rem);
921
- background: none;
922
- border: none;
923
- border-radius: var(--radius-md, 0.5rem);
924
- color: var(--color-text-secondary, #64748b);
925
- font-size: var(--font-size-base, 1rem);
926
- font-weight: var(--font-weight-medium, 500);
927
- cursor: pointer;
928
- white-space: nowrap;
929
- transition: color var(--transition-fast, 150ms),
930
- background var(--transition-fast, 150ms);
931
- text-align: left;
932
- width: 100%;
933
- min-height: 44px;
934
- }
935
-
936
- .tabs-sidebar .tab-button:hover {
937
- color: var(--color-text-primary, #0f172a);
938
- background: var(--color-bg-muted, #f8fafc);
939
- }
940
-
941
- .tabs-sidebar .tab-button:focus-visible {
942
- outline: 2px solid var(--color-primary, #2563eb);
943
- outline-offset: -2px;
944
- }
945
-
946
- .tabs-sidebar .tab-button--active {
947
- color: var(--color-primary, #2563eb);
948
- background: var(--color-primary-light, rgba(59, 130, 246, 0.1));
949
- }
950
-
951
- .tab-icon {
952
- flex-shrink: 0;
953
- width: 20px;
954
- height: 20px;
955
- display: flex;
956
- align-items: center;
957
- justify-content: center;
958
- margin-left: 18px;
959
- }
960
-
961
- .tab-icon svg {
962
- width: 20px;
963
- height: 20px;
964
- stroke: currentColor;
965
- }
966
-
967
- .tabs-sidebar .tab-label {
968
- flex: 1;
969
- line-height: 1;
970
- overflow: visible;
971
- text-overflow: ellipsis;
972
- }
973
-
974
- .tabs-sidebar .tab-badge {
975
- display: inline-flex;
976
- align-items: center;
977
- justify-content: center;
978
- min-width: 18px;
979
- height: 18px;
980
- padding: 0 var(--space-1, 0.25rem);
981
- background: var(--color-error, #dc2626);
982
- color: white;
983
- border-radius: var(--radius-full, 9999px);
984
- font-size: var(--font-size-xs, 0.75rem);
985
- font-weight: var(--font-weight-semibold, 600);
986
- line-height: 1;
987
- flex-shrink: 0;
988
- }
989
-
990
- .tabs-sidebar .tab-button--active .tab-badge {
991
- background: var(--color-primary, #2563eb);
992
- }
993
-
994
- /* Horizontal Layout */
995
- .tabs-header {
996
- display: flex;
997
- gap: var(--space-2, 0.5rem);
998
- border-bottom: 2px solid var(--color-border, #e2e8f0);
999
- margin-bottom: var(--space-6, 1.5rem);
1000
- overflow-x: auto;
1001
- scrollbar-width: none;
1002
- -ms-overflow-style: none;
1003
- }
1004
-
1005
- .tabs-header::-webkit-scrollbar {
1006
- display: none;
1007
- }
1008
-
1009
- .tabs-header .tab-button {
1010
- position: relative;
1011
- display: flex;
1012
- align-items: center;
1013
- gap: var(--space-2, 0.5rem);
1014
- padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
1015
- background: none;
1016
- border: none;
1017
- border-bottom: 2px solid transparent;
1018
- margin-bottom: -2px;
1019
- color: var(--color-text-secondary, #64748b);
1020
- font-size: var(--font-size-base, 1rem);
1021
- font-weight: var(--font-weight-medium, 500);
1022
- cursor: pointer;
1023
- white-space: nowrap;
1024
- transition: all var(--transition-fast, 150ms);
1025
- }
1026
-
1027
- .tabs-header .tab-button:hover {
1028
- color: var(--color-text-primary, #0f172a);
1029
- background: var(--color-bg-muted, #f8fafc);
1030
- }
1031
-
1032
- .tabs-header .tab-button:focus-visible {
1033
- outline: 2px solid var(--color-primary, #2563eb);
1034
- outline-offset: -2px;
1035
- border-radius: var(--radius-sm, 0.25rem);
1036
- }
1037
-
1038
- .tabs-header .tab-button--active {
1039
- color: var(--color-primary, #2563eb);
1040
- border-bottom-color: var(--color-primary, #2563eb);
1041
- }
1042
-
1043
- .tabs-header .tab-label {
1044
- line-height: 1;
1045
- }
1046
-
1047
- .tabs-header .tab-badge {
1048
- display: inline-flex;
1049
- align-items: center;
1050
- justify-content: center;
1051
- min-width: 18px;
1052
- height: 18px;
1053
- padding: 0 var(--space-1, 0.25rem);
1054
- background: var(--color-error, #dc2626);
1055
- color: white;
1056
- border-radius: var(--radius-full, 9999px);
1057
- font-size: var(--font-size-xs, 0.75rem);
1058
- font-weight: var(--font-weight-semibold, 600);
1059
- line-height: 1;
1060
- }
1061
-
1062
- .tabs-header .tab-button--active .tab-badge {
1063
- background: var(--color-primary, #2563eb);
1064
- }
1065
-
1066
- .tabs-content {
1067
- flex: 1;
1068
- min-width: 0;
1069
- animation: fadeIn 0.2s ease-in;
1070
- }
1071
-
1072
- .base-tabs--vertical .tabs-content {
1073
- flex: 1;
1074
- min-width: 0;
1075
- }
1076
-
1077
- @keyframes fadeIn {
1078
- from {
1079
- opacity: 0;
1080
- transform: translateY(8px);
1081
- }
1082
- to {
1083
- opacity: 1;
1084
- transform: translateY(0);
1085
- }
1086
- }
1087
-
1088
- /* Mobile responsive */
1089
- @media (max-width: 768px) {
1090
- .base-tabs--vertical {
1091
- flex-direction: column;
1092
- padding: 0;
1093
- }
1094
-
1095
- .tabs-sidebar {
1096
- position: sticky;
1097
- top: 0;
1098
- width: 100%;
1099
- max-height: none;
1100
- border-radius: 0;
1101
- border-left: none;
1102
- border-right: none;
1103
- padding: var(--space-3, 0.75rem);
1104
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1105
- z-index: 10;
1106
- display: grid;
1107
- grid-template-columns: 1fr auto;
1108
- grid-template-rows: auto auto;
1109
- gap: var(--space-3, 0.75rem);
1110
- align-items: center;
1111
- }
1112
-
1113
- .tabs-sidebar--expanded {
1114
- width: 100%;
1115
- }
1116
-
1117
- .sidebar-toggle {
1118
- display: none;
1119
- }
1120
-
1121
- .sidebar-header {
1122
- grid-column: 1;
1123
- grid-row: 1;
1124
- flex-direction: row;
1125
- justify-content: flex-start;
1126
- align-items: center;
1127
- gap: 0;
1128
- padding-bottom: 0;
1129
- border-bottom: none;
1130
- }
1131
-
1132
- .sidebar-header .sidebar-profile {
1133
- display: none;
1134
- }
1135
-
1136
- .sidebar-footer {
1137
- grid-column: 2;
1138
- grid-row: 1;
1139
- flex-direction: row;
1140
- justify-content: flex-end;
1141
- align-items: center;
1142
- padding-top: 0;
1143
- border-top: none;
1144
- margin-top: 0;
1145
- margin-left: auto;
1146
- }
1147
-
1148
- .tabs-nav {
1149
- grid-column: 1 / -1;
1150
- grid-row: 2;
1151
- flex-direction: row;
1152
- gap: var(--space-1, 0.25rem);
1153
- overflow-x: auto;
1154
- scrollbar-width: none;
1155
- -ms-overflow-style: none;
1156
- padding: 0;
1157
- }
1158
-
1159
- .tabs-nav::-webkit-scrollbar {
1160
- display: none;
1161
- }
1162
-
1163
- .tabs-sidebar .tab-button {
1164
- flex-direction: column;
1165
- justify-content: center;
1166
- align-items: center;
1167
- gap: var(--space-1, 0.25rem);
1168
- padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
1169
- min-width: 70px;
1170
- min-height: auto;
1171
- position: relative;
1172
- }
1173
-
1174
- .tabs-sidebar .tab-button .tab-label {
1175
- display: block;
1176
- font-size: 11px;
1177
- text-align: center;
1178
- line-height: 1.2;
1179
- }
1180
-
1181
- .tabs-sidebar .tab-icon {
1182
- width: 20px;
1183
- height: 20px;
1184
- }
1185
-
1186
- .tabs-sidebar .tab-badge {
1187
- position: absolute;
1188
- top: 4px;
1189
- right: 4px;
1190
- min-width: 16px;
1191
- height: 16px;
1192
- font-size: 10px;
1193
- }
1194
-
1195
- .base-tabs--vertical .tabs-content {
1196
- width: 100%;
1197
- padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
1198
- }
1199
- }
1200
-
1201
- @media (max-width: 640px) {
1202
- .tabs-header {
1203
- gap: var(--space-1, 0.25rem);
1204
- margin-bottom: var(--space-4, 1rem);
1205
- }
1206
-
1207
- .tabs-header .tab-button {
1208
- padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
1209
- font-size: var(--font-size-sm, 0.875rem);
1210
- }
1211
- }
1212
-
1213
- @media (prefers-reduced-motion: reduce) {
1214
- * {
1215
- animation: none !important;
1216
- transition: none !important;
1217
- }
1218
- }
1219
- `;
1220
- $([
1221
- x({ type: String, attribute: "active-tab" })
1222
- ], u.prototype, "activeTab", 2);
1223
- $([
1224
- x({ type: String, attribute: "aria-label" })
1225
- ], u.prototype, "ariaLabel", 2);
1226
- $([
1227
- x({ type: Boolean, attribute: "sync-with-hash" })
1228
- ], u.prototype, "syncWithHash", 2);
1229
- $([
1230
- x({ type: String })
1231
- ], u.prototype, "variant", 2);
1232
- $([
1233
- dt()
1234
- ], u.prototype, "tabs", 2);
1235
- $([
1236
- dt()
1237
- ], u.prototype, "isExpanded", 2);
1238
- $([
1239
- It(".tabs-nav")
1240
- ], u.prototype, "tabsNav", 2);
1241
- u = $([
1242
- Lt("base-tabs")
1243
- ], u);
1244
- export {
1245
- u as BaseTabs
1246
- };