@florid-kit/components 0.4.0 → 0.4.2

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.
Files changed (4) hide show
  1. package/components/side-panel.d.ts +2 -0
  2. package/index.js +68 -44
  3. package/index.mjs +298 -268
  4. package/package.json +1 -1
package/index.mjs CHANGED
@@ -5,16 +5,16 @@
5
5
  */
6
6
  const X = globalThis, ht = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, dt = Symbol(), vt = /* @__PURE__ */ new WeakMap();
7
7
  let Et = class {
8
- constructor(t, e, n) {
9
- if (this._$cssResult$ = !0, n !== dt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
8
+ constructor(t, e, s) {
9
+ if (this._$cssResult$ = !0, s !== dt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
10
10
  this.cssText = t, this.t = e;
11
11
  }
12
12
  get styleSheet() {
13
13
  let t = this.o;
14
14
  const e = this.t;
15
15
  if (ht && t === void 0) {
16
- const n = e !== void 0 && e.length === 1;
17
- n && (t = vt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), n && vt.set(e, t));
16
+ const s = e !== void 0 && e.length === 1;
17
+ s && (t = vt.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && vt.set(e, t));
18
18
  }
19
19
  return t;
20
20
  }
@@ -22,60 +22,60 @@ let Et = class {
22
22
  return this.cssText;
23
23
  }
24
24
  };
25
- const It = (s) => new Et(typeof s == "string" ? s : s + "", void 0, dt), A = (s, ...t) => {
26
- const e = s.length === 1 ? s[0] : t.reduce((n, o, i) => n + ((r) => {
25
+ const It = (n) => new Et(typeof n == "string" ? n : n + "", void 0, dt), A = (n, ...t) => {
26
+ const e = n.length === 1 ? n[0] : t.reduce((s, o, i) => s + ((r) => {
27
27
  if (r._$cssResult$ === !0) return r.cssText;
28
28
  if (typeof r == "number") return r;
29
29
  throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
30
- })(o) + s[i + 1], s[0]);
31
- return new Et(e, s, dt);
32
- }, Bt = (s, t) => {
33
- if (ht) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
30
+ })(o) + n[i + 1], n[0]);
31
+ return new Et(e, n, dt);
32
+ }, Bt = (n, t) => {
33
+ if (ht) n.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
34
34
  else for (const e of t) {
35
- const n = document.createElement("style"), o = X.litNonce;
36
- o !== void 0 && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
35
+ const s = document.createElement("style"), o = X.litNonce;
36
+ o !== void 0 && s.setAttribute("nonce", o), s.textContent = e.cssText, n.appendChild(s);
37
37
  }
38
- }, bt = ht ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
38
+ }, bt = ht ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((t) => {
39
39
  let e = "";
40
- for (const n of t.cssRules) e += n.cssText;
40
+ for (const s of t.cssRules) e += s.cssText;
41
41
  return It(e);
42
- })(s) : s;
42
+ })(n) : n;
43
43
  /**
44
44
  * @license
45
45
  * Copyright 2017 Google LLC
46
46
  * SPDX-License-Identifier: BSD-3-Clause
47
47
  */
48
- const { is: Ot, defineProperty: Mt, getOwnPropertyDescriptor: Ht, getOwnPropertyNames: Tt, getOwnPropertySymbols: Dt, getPrototypeOf: Ut } = Object, C = globalThis, gt = C.trustedTypes, zt = gt ? gt.emptyScript : "", nt = C.reactiveElementPolyfillSupport, R = (s, t) => s, J = { toAttribute(s, t) {
48
+ const { is: Ot, defineProperty: Mt, getOwnPropertyDescriptor: zt, getOwnPropertyNames: Ht, getOwnPropertySymbols: Tt, getPrototypeOf: Dt } = Object, C = globalThis, gt = C.trustedTypes, Ut = gt ? gt.emptyScript : "", st = C.reactiveElementPolyfillSupport, R = (n, t) => n, J = { toAttribute(n, t) {
49
49
  switch (t) {
50
50
  case Boolean:
51
- s = s ? zt : null;
51
+ n = n ? Ut : null;
52
52
  break;
53
53
  case Object:
54
54
  case Array:
55
- s = s == null ? s : JSON.stringify(s);
55
+ n = n == null ? n : JSON.stringify(n);
56
56
  }
57
- return s;
58
- }, fromAttribute(s, t) {
59
- let e = s;
57
+ return n;
58
+ }, fromAttribute(n, t) {
59
+ let e = n;
60
60
  switch (t) {
61
61
  case Boolean:
62
- e = s !== null;
62
+ e = n !== null;
63
63
  break;
64
64
  case Number:
65
- e = s === null ? null : Number(s);
65
+ e = n === null ? null : Number(n);
66
66
  break;
67
67
  case Object:
68
68
  case Array:
69
69
  try {
70
- e = JSON.parse(s);
70
+ e = JSON.parse(n);
71
71
  } catch {
72
72
  e = null;
73
73
  }
74
74
  }
75
75
  return e;
76
- } }, pt = (s, t) => !Ot(s, t), yt = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: pt };
76
+ } }, pt = (n, t) => !Ot(n, t), yt = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: pt };
77
77
  Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), C.litPropertyMetadata ?? (C.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
78
- let D = class extends HTMLElement {
78
+ let T = class extends HTMLElement {
79
79
  static addInitializer(t) {
80
80
  this._$Ei(), (this.l ?? (this.l = [])).push(t);
81
81
  }
@@ -84,19 +84,19 @@ let D = class extends HTMLElement {
84
84
  }
85
85
  static createProperty(t, e = yt) {
86
86
  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) {
87
- const n = Symbol(), o = this.getPropertyDescriptor(t, n, e);
87
+ const s = Symbol(), o = this.getPropertyDescriptor(t, s, e);
88
88
  o !== void 0 && Mt(this.prototype, t, o);
89
89
  }
90
90
  }
91
- static getPropertyDescriptor(t, e, n) {
92
- const { get: o, set: i } = Ht(this.prototype, t) ?? { get() {
91
+ static getPropertyDescriptor(t, e, s) {
92
+ const { get: o, set: i } = zt(this.prototype, t) ?? { get() {
93
93
  return this[e];
94
94
  }, set(r) {
95
95
  this[e] = r;
96
96
  } };
97
97
  return { get: o, set(r) {
98
98
  const c = o == null ? void 0 : o.call(this);
99
- i == null || i.call(this, r), this.requestUpdate(t, c, n);
99
+ i == null || i.call(this, r), this.requestUpdate(t, c, s);
100
100
  }, configurable: !0, enumerable: !0 };
101
101
  }
102
102
  static getPropertyOptions(t) {
@@ -104,23 +104,23 @@ let D = class extends HTMLElement {
104
104
  }
105
105
  static _$Ei() {
106
106
  if (this.hasOwnProperty(R("elementProperties"))) return;
107
- const t = Ut(this);
107
+ const t = Dt(this);
108
108
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
109
109
  }
110
110
  static finalize() {
111
111
  if (this.hasOwnProperty(R("finalized"))) return;
112
112
  if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(R("properties"))) {
113
- const e = this.properties, n = [...Tt(e), ...Dt(e)];
114
- for (const o of n) this.createProperty(o, e[o]);
113
+ const e = this.properties, s = [...Ht(e), ...Tt(e)];
114
+ for (const o of s) this.createProperty(o, e[o]);
115
115
  }
116
116
  const t = this[Symbol.metadata];
117
117
  if (t !== null) {
118
118
  const e = litPropertyMetadata.get(t);
119
- if (e !== void 0) for (const [n, o] of e) this.elementProperties.set(n, o);
119
+ if (e !== void 0) for (const [s, o] of e) this.elementProperties.set(s, o);
120
120
  }
121
121
  this._$Eh = /* @__PURE__ */ new Map();
122
- for (const [e, n] of this.elementProperties) {
123
- const o = this._$Eu(e, n);
122
+ for (const [e, s] of this.elementProperties) {
123
+ const o = this._$Eu(e, s);
124
124
  o !== void 0 && this._$Eh.set(o, e);
125
125
  }
126
126
  this.elementStyles = this.finalizeStyles(this.styles);
@@ -128,14 +128,14 @@ let D = class extends HTMLElement {
128
128
  static finalizeStyles(t) {
129
129
  const e = [];
130
130
  if (Array.isArray(t)) {
131
- const n = new Set(t.flat(1 / 0).reverse());
132
- for (const o of n) e.unshift(bt(o));
131
+ const s = new Set(t.flat(1 / 0).reverse());
132
+ for (const o of s) e.unshift(bt(o));
133
133
  } else t !== void 0 && e.push(bt(t));
134
134
  return e;
135
135
  }
136
136
  static _$Eu(t, e) {
137
- const n = e.attribute;
138
- return n === !1 ? void 0 : typeof n == "string" ? n : typeof t == "string" ? t.toLowerCase() : void 0;
137
+ const s = e.attribute;
138
+ return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
139
139
  }
140
140
  constructor() {
141
141
  super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
@@ -154,7 +154,7 @@ let D = class extends HTMLElement {
154
154
  }
155
155
  _$E_() {
156
156
  const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
157
- for (const n of e.keys()) this.hasOwnProperty(n) && (t.set(n, this[n]), delete this[n]);
157
+ for (const s of e.keys()) this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
158
158
  t.size > 0 && (this._$Ep = t);
159
159
  }
160
160
  createRenderRoot() {
@@ -164,8 +164,8 @@ let D = class extends HTMLElement {
164
164
  connectedCallback() {
165
165
  var t;
166
166
  this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
167
- var n;
168
- return (n = e.hostConnected) == null ? void 0 : n.call(e);
167
+ var s;
168
+ return (s = e.hostConnected) == null ? void 0 : s.call(e);
169
169
  });
170
170
  }
171
171
  enableUpdating(t) {
@@ -173,40 +173,40 @@ let D = class extends HTMLElement {
173
173
  disconnectedCallback() {
174
174
  var t;
175
175
  (t = this._$EO) == null || t.forEach((e) => {
176
- var n;
177
- return (n = e.hostDisconnected) == null ? void 0 : n.call(e);
176
+ var s;
177
+ return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
178
178
  });
179
179
  }
180
- attributeChangedCallback(t, e, n) {
181
- this._$AK(t, n);
180
+ attributeChangedCallback(t, e, s) {
181
+ this._$AK(t, s);
182
182
  }
183
183
  _$ET(t, e) {
184
184
  var i;
185
- const n = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, n);
186
- if (o !== void 0 && n.reflect === !0) {
187
- const r = (((i = n.converter) == null ? void 0 : i.toAttribute) !== void 0 ? n.converter : J).toAttribute(e, n.type);
185
+ const s = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, s);
186
+ if (o !== void 0 && s.reflect === !0) {
187
+ const r = (((i = s.converter) == null ? void 0 : i.toAttribute) !== void 0 ? s.converter : J).toAttribute(e, s.type);
188
188
  this._$Em = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$Em = null;
189
189
  }
190
190
  }
191
191
  _$AK(t, e) {
192
192
  var i, r;
193
- const n = this.constructor, o = n._$Eh.get(t);
193
+ const s = this.constructor, o = s._$Eh.get(t);
194
194
  if (o !== void 0 && this._$Em !== o) {
195
- const c = n.getPropertyOptions(o), l = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((i = c.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? c.converter : J;
195
+ const c = s.getPropertyOptions(o), l = typeof c.converter == "function" ? { fromAttribute: c.converter } : ((i = c.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? c.converter : J;
196
196
  this._$Em = o, this[o] = l.fromAttribute(e, c.type) ?? ((r = this._$Ej) == null ? void 0 : r.get(o)) ?? null, this._$Em = null;
197
197
  }
198
198
  }
199
- requestUpdate(t, e, n) {
199
+ requestUpdate(t, e, s) {
200
200
  var o;
201
201
  if (t !== void 0) {
202
202
  const i = this.constructor, r = this[t];
203
- if (n ?? (n = i.getPropertyOptions(t)), !((n.hasChanged ?? pt)(r, e) || n.useDefault && n.reflect && r === ((o = this._$Ej) == null ? void 0 : o.get(t)) && !this.hasAttribute(i._$Eu(t, n)))) return;
204
- this.C(t, e, n);
203
+ if (s ?? (s = i.getPropertyOptions(t)), !((s.hasChanged ?? pt)(r, e) || s.useDefault && s.reflect && r === ((o = this._$Ej) == null ? void 0 : o.get(t)) && !this.hasAttribute(i._$Eu(t, s)))) return;
204
+ this.C(t, e, s);
205
205
  }
206
206
  this.isUpdatePending === !1 && (this._$ES = this._$EP());
207
207
  }
208
- C(t, e, { useDefault: n, reflect: o, wrapped: i }, r) {
209
- n && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, r ?? e ?? this[t]), i !== !0 || r !== void 0) || (this._$AL.has(t) || (this.hasUpdated || n || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
208
+ C(t, e, { useDefault: s, reflect: o, wrapped: i }, r) {
209
+ s && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, r ?? e ?? this[t]), i !== !0 || r !== void 0) || (this._$AL.has(t) || (this.hasUpdated || s || (e = void 0), this._$AL.set(t, e)), o === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
210
210
  }
211
211
  async _$EP() {
212
212
  this.isUpdatePending = !0;
@@ -222,7 +222,7 @@ let D = class extends HTMLElement {
222
222
  return this.performUpdate();
223
223
  }
224
224
  performUpdate() {
225
- var n;
225
+ var s;
226
226
  if (!this.isUpdatePending) return;
227
227
  if (!this.hasUpdated) {
228
228
  if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
@@ -238,7 +238,7 @@ let D = class extends HTMLElement {
238
238
  let t = !1;
239
239
  const e = this._$AL;
240
240
  try {
241
- t = this.shouldUpdate(e), t ? (this.willUpdate(e), (n = this._$EO) == null || n.forEach((o) => {
241
+ t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((o) => {
242
242
  var i;
243
243
  return (i = o.hostUpdate) == null ? void 0 : i.call(o);
244
244
  }), this.update(e)) : this._$EM();
@@ -251,9 +251,9 @@ let D = class extends HTMLElement {
251
251
  }
252
252
  _$AE(t) {
253
253
  var e;
254
- (e = this._$EO) == null || e.forEach((n) => {
254
+ (e = this._$EO) == null || e.forEach((s) => {
255
255
  var o;
256
- return (o = n.hostUpdated) == null ? void 0 : o.call(n);
256
+ return (o = s.hostUpdated) == null ? void 0 : o.call(s);
257
257
  }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
258
258
  }
259
259
  _$EM() {
@@ -276,38 +276,38 @@ let D = class extends HTMLElement {
276
276
  firstUpdated(t) {
277
277
  }
278
278
  };
279
- D.elementStyles = [], D.shadowRootOptions = { mode: "open" }, D[R("elementProperties")] = /* @__PURE__ */ new Map(), D[R("finalized")] = /* @__PURE__ */ new Map(), nt == null || nt({ ReactiveElement: D }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
279
+ T.elementStyles = [], T.shadowRootOptions = { mode: "open" }, T[R("elementProperties")] = /* @__PURE__ */ new Map(), T[R("finalized")] = /* @__PURE__ */ new Map(), st == null || st({ ReactiveElement: T }), (C.reactiveElementVersions ?? (C.reactiveElementVersions = [])).push("2.1.0");
280
280
  /**
281
281
  * @license
282
282
  * Copyright 2017 Google LLC
283
283
  * SPDX-License-Identifier: BSD-3-Clause
284
284
  */
285
- const V = globalThis, Q = V.trustedTypes, mt = Q ? Q.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, Ct = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Lt = "?" + E, Nt = `<${Lt}>`, O = document, F = () => O.createComment(""), q = (s) => s === null || typeof s != "object" && typeof s != "function", ut = Array.isArray, jt = (s) => ut(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ot = `[
285
+ const V = globalThis, Q = V.trustedTypes, mt = Q ? Q.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Ct = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Lt = "?" + E, Nt = `<${Lt}>`, O = document, F = () => O.createComment(""), q = (n) => n === null || typeof n != "object" && typeof n != "function", ut = Array.isArray, jt = (n) => ut(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", ot = `[
286
286
  \f\r]`, j = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, $t = /-->/g, wt = />/g, k = RegExp(`>|${ot}(?:([^\\s"'>=/]+)(${ot}*=${ot}*(?:[^
287
- \f\r"'\`<>=]|("|')|))|$)`, "g"), xt = /'/g, _t = /"/g, Pt = /^(?:script|style|textarea|title)$/i, Rt = (s) => (t, ...e) => ({ _$litType$: s, strings: t, values: e }), d = Rt(1), M = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), At = /* @__PURE__ */ new WeakMap(), I = O.createTreeWalker(O, 129);
288
- function kt(s, t) {
289
- if (!ut(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
287
+ \f\r"'\`<>=]|("|')|))|$)`, "g"), xt = /'/g, _t = /"/g, Pt = /^(?:script|style|textarea|title)$/i, Rt = (n) => (t, ...e) => ({ _$litType$: n, strings: t, values: e }), d = Rt(1), M = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), At = /* @__PURE__ */ new WeakMap(), I = O.createTreeWalker(O, 129);
288
+ function kt(n, t) {
289
+ if (!ut(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
290
290
  return mt !== void 0 ? mt.createHTML(t) : t;
291
291
  }
292
- const Vt = (s, t) => {
293
- const e = s.length - 1, n = [];
292
+ const Vt = (n, t) => {
293
+ const e = n.length - 1, s = [];
294
294
  let o, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = j;
295
295
  for (let c = 0; c < e; c++) {
296
- const l = s[c];
296
+ const l = n[c];
297
297
  let f, v, p = -1, x = 0;
298
298
  for (; x < l.length && (r.lastIndex = x, v = r.exec(l), v !== null); ) x = r.lastIndex, r === j ? v[1] === "!--" ? r = $t : v[1] !== void 0 ? r = wt : v[2] !== void 0 ? (Pt.test(v[2]) && (o = RegExp("</" + v[2], "g")), r = k) : v[3] !== void 0 && (r = k) : r === k ? v[0] === ">" ? (r = o ?? j, p = -1) : v[1] === void 0 ? p = -2 : (p = r.lastIndex - v[2].length, f = v[1], r = v[3] === void 0 ? k : v[3] === '"' ? _t : xt) : r === _t || r === xt ? r = k : r === $t || r === wt ? r = j : (r = k, o = void 0);
299
- const S = r === k && s[c + 1].startsWith("/>") ? " " : "";
300
- i += r === j ? l + Nt : p >= 0 ? (n.push(f), l.slice(0, p) + Ct + l.slice(p) + E + S) : l + E + (p === -2 ? c : S);
299
+ const S = r === k && n[c + 1].startsWith("/>") ? " " : "";
300
+ i += r === j ? l + Nt : p >= 0 ? (s.push(f), l.slice(0, p) + Ct + l.slice(p) + E + S) : l + E + (p === -2 ? c : S);
301
301
  }
302
- return [kt(s, i + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), n];
302
+ return [kt(n, i + (n[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
303
303
  };
304
304
  class Z {
305
- constructor({ strings: t, _$litType$: e }, n) {
305
+ constructor({ strings: t, _$litType$: e }, s) {
306
306
  let o;
307
307
  this.parts = [];
308
308
  let i = 0, r = 0;
309
309
  const c = t.length - 1, l = this.parts, [f, v] = Vt(t, e);
310
- if (this.el = Z.createElement(f, n), I.currentNode = this.el.content, e === 2 || e === 3) {
310
+ if (this.el = Z.createElement(f, s), I.currentNode = this.el.content, e === 2 || e === 3) {
311
311
  const p = this.el.content.firstChild;
312
312
  p.replaceWith(...p.childNodes);
313
313
  }
@@ -334,16 +334,16 @@ class Z {
334
334
  }
335
335
  }
336
336
  static createElement(t, e) {
337
- const n = O.createElement("template");
338
- return n.innerHTML = t, n;
337
+ const s = O.createElement("template");
338
+ return s.innerHTML = t, s;
339
339
  }
340
340
  }
341
- function U(s, t, e = s, n) {
341
+ function D(n, t, e = n, s) {
342
342
  var r, c;
343
343
  if (t === M) return t;
344
- let o = n !== void 0 ? (r = e._$Co) == null ? void 0 : r[n] : e._$Cl;
344
+ let o = s !== void 0 ? (r = e._$Co) == null ? void 0 : r[s] : e._$Cl;
345
345
  const i = q(t) ? void 0 : t._$litDirective$;
346
- return (o == null ? void 0 : o.constructor) !== i && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), i === void 0 ? o = void 0 : (o = new i(s), o._$AT(s, e, n)), n !== void 0 ? (e._$Co ?? (e._$Co = []))[n] = o : e._$Cl = o), o !== void 0 && (t = U(s, o._$AS(s, t.values), o, n)), t;
346
+ return (o == null ? void 0 : o.constructor) !== i && ((c = o == null ? void 0 : o._$AO) == null || c.call(o, !1), i === void 0 ? o = void 0 : (o = new i(n), o._$AT(n, e, s)), s !== void 0 ? (e._$Co ?? (e._$Co = []))[s] = o : e._$Cl = o), o !== void 0 && (t = D(n, o._$AS(n, t.values), o, s)), t;
347
347
  }
348
348
  class Ft {
349
349
  constructor(t, e) {
@@ -356,13 +356,13 @@ class Ft {
356
356
  return this._$AM._$AU;
357
357
  }
358
358
  u(t) {
359
- const { el: { content: e }, parts: n } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? O).importNode(e, !0);
359
+ const { el: { content: e }, parts: s } = this._$AD, o = ((t == null ? void 0 : t.creationScope) ?? O).importNode(e, !0);
360
360
  I.currentNode = o;
361
- let i = I.nextNode(), r = 0, c = 0, l = n[0];
361
+ let i = I.nextNode(), r = 0, c = 0, l = s[0];
362
362
  for (; l !== void 0; ) {
363
363
  if (r === l.index) {
364
364
  let f;
365
- l.type === 2 ? f = new G(i, i.nextSibling, this, t) : l.type === 1 ? f = new l.ctor(i, l.name, l.strings, this, t) : l.type === 6 && (f = new Gt(i, this, t)), this._$AV.push(f), l = n[++c];
365
+ l.type === 2 ? f = new G(i, i.nextSibling, this, t) : l.type === 1 ? f = new l.ctor(i, l.name, l.strings, this, t) : l.type === 6 && (f = new Gt(i, this, t)), this._$AV.push(f), l = s[++c];
366
366
  }
367
367
  r !== (l == null ? void 0 : l.index) && (i = I.nextNode(), r++);
368
368
  }
@@ -370,7 +370,7 @@ class Ft {
370
370
  }
371
371
  p(t) {
372
372
  let e = 0;
373
- for (const n of this._$AV) n !== void 0 && (n.strings !== void 0 ? (n._$AI(t, n, e), e += n.strings.length - 2) : n._$AI(t[e])), e++;
373
+ 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++;
374
374
  }
375
375
  }
376
376
  class G {
@@ -378,8 +378,8 @@ class G {
378
378
  var t;
379
379
  return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
380
380
  }
381
- constructor(t, e, n, o) {
382
- this.type = 2, this._$AH = h, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = n, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
381
+ constructor(t, e, s, o) {
382
+ this.type = 2, this._$AH = h, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
383
383
  }
384
384
  get parentNode() {
385
385
  let t = this._$AA.parentNode;
@@ -393,7 +393,7 @@ class G {
393
393
  return this._$AB;
394
394
  }
395
395
  _$AI(t, e = this) {
396
- t = U(this, t, e), q(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== M && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : jt(t) ? this.k(t) : this._(t);
396
+ t = D(this, t, e), q(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== M && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : jt(t) ? this.k(t) : this._(t);
397
397
  }
398
398
  O(t) {
399
399
  return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -406,7 +406,7 @@ class G {
406
406
  }
407
407
  $(t) {
408
408
  var i;
409
- const { values: e, _$litType$: n } = t, o = typeof n == "number" ? this._$AC(t) : (n.el === void 0 && (n.el = Z.createElement(kt(n.h, n.h[0]), this.options)), n);
409
+ const { values: e, _$litType$: s } = t, o = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = Z.createElement(kt(s.h, s.h[0]), this.options)), s);
410
410
  if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(e);
411
411
  else {
412
412
  const r = new Ft(o, this), c = r.u(this.options);
@@ -420,13 +420,13 @@ class G {
420
420
  k(t) {
421
421
  ut(this._$AH) || (this._$AH = [], this._$AR());
422
422
  const e = this._$AH;
423
- let n, o = 0;
424
- for (const i of t) o === e.length ? e.push(n = new G(this.O(F()), this.O(F()), this, this.options)) : n = e[o], n._$AI(i), o++;
425
- o < e.length && (this._$AR(n && n._$AB.nextSibling, o), e.length = o);
423
+ let s, o = 0;
424
+ for (const i of t) o === e.length ? e.push(s = new G(this.O(F()), this.O(F()), this, this.options)) : s = e[o], s._$AI(i), o++;
425
+ o < e.length && (this._$AR(s && s._$AB.nextSibling, o), e.length = o);
426
426
  }
427
427
  _$AR(t = this._$AA.nextSibling, e) {
428
- var n;
429
- for ((n = this._$AP) == null ? void 0 : n.call(this, !1, !0, e); t && t !== this._$AB; ) {
428
+ var s;
429
+ for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, e); t && t !== this._$AB; ) {
430
430
  const o = t.nextSibling;
431
431
  t.remove(), t = o;
432
432
  }
@@ -443,17 +443,17 @@ class Y {
443
443
  get _$AU() {
444
444
  return this._$AM._$AU;
445
445
  }
446
- constructor(t, e, n, o, i) {
447
- this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = h;
446
+ constructor(t, e, s, o, i) {
447
+ this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = e, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = h;
448
448
  }
449
- _$AI(t, e = this, n, o) {
449
+ _$AI(t, e = this, s, o) {
450
450
  const i = this.strings;
451
451
  let r = !1;
452
- if (i === void 0) t = U(this, t, e, 0), r = !q(t) || t !== this._$AH && t !== M, r && (this._$AH = t);
452
+ if (i === void 0) t = D(this, t, e, 0), r = !q(t) || t !== this._$AH && t !== M, r && (this._$AH = t);
453
453
  else {
454
454
  const c = t;
455
455
  let l, f;
456
- for (t = i[0], l = 0; l < i.length - 1; l++) f = U(this, c[n + l], e, l), f === M && (f = this._$AH[l]), r || (r = !q(f) || f !== this._$AH[l]), f === h ? t = h : t !== h && (t += (f ?? "") + i[l + 1]), this._$AH[l] = f;
456
+ for (t = i[0], l = 0; l < i.length - 1; l++) f = D(this, c[s + l], e, l), f === M && (f = this._$AH[l]), r || (r = !q(f) || f !== this._$AH[l]), f === h ? t = h : t !== h && (t += (f ?? "") + i[l + 1]), this._$AH[l] = f;
457
457
  }
458
458
  r && !o && this.j(t);
459
459
  }
@@ -478,13 +478,13 @@ class Zt extends Y {
478
478
  }
479
479
  }
480
480
  class Wt extends Y {
481
- constructor(t, e, n, o, i) {
482
- super(t, e, n, o, i), this.type = 5;
481
+ constructor(t, e, s, o, i) {
482
+ super(t, e, s, o, i), this.type = 5;
483
483
  }
484
484
  _$AI(t, e = this) {
485
- if ((t = U(this, t, e, 0) ?? h) === M) return;
486
- const n = this._$AH, o = t === h && n !== h || t.capture !== n.capture || t.once !== n.once || t.passive !== n.passive, i = t !== h && (n === h || o);
487
- o && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
485
+ if ((t = D(this, t, e, 0) ?? h) === M) return;
486
+ const s = this._$AH, o = t === h && s !== h || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive, i = t !== h && (s === h || o);
487
+ o && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
488
488
  }
489
489
  handleEvent(t) {
490
490
  var e;
@@ -492,26 +492,26 @@ class Wt extends Y {
492
492
  }
493
493
  }
494
494
  class Gt {
495
- constructor(t, e, n) {
496
- this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = n;
495
+ constructor(t, e, s) {
496
+ this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = s;
497
497
  }
498
498
  get _$AU() {
499
499
  return this._$AM._$AU;
500
500
  }
501
501
  _$AI(t) {
502
- U(this, t);
502
+ D(this, t);
503
503
  }
504
504
  }
505
505
  const rt = V.litHtmlPolyfillSupport;
506
506
  rt == null || rt(Z, G), (V.litHtmlVersions ?? (V.litHtmlVersions = [])).push("3.3.0");
507
- const Kt = (s, t, e) => {
508
- const n = (e == null ? void 0 : e.renderBefore) ?? t;
509
- let o = n._$litPart$;
507
+ const Kt = (n, t, e) => {
508
+ const s = (e == null ? void 0 : e.renderBefore) ?? t;
509
+ let o = s._$litPart$;
510
510
  if (o === void 0) {
511
511
  const i = (e == null ? void 0 : e.renderBefore) ?? null;
512
- n._$litPart$ = o = new G(t.insertBefore(F(), i), i, void 0, e ?? {});
512
+ s._$litPart$ = o = new G(t.insertBefore(F(), i), i, void 0, e ?? {});
513
513
  }
514
- return o._$AI(s), o;
514
+ return o._$AI(n), o;
515
515
  };
516
516
  /**
517
517
  * @license
@@ -519,7 +519,7 @@ const Kt = (s, t, e) => {
519
519
  * SPDX-License-Identifier: BSD-3-Clause
520
520
  */
521
521
  const B = globalThis;
522
- let m = class extends D {
522
+ let m = class extends T {
523
523
  constructor() {
524
524
  super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
525
525
  }
@@ -554,50 +554,50 @@ it == null || it({ LitElement: m });
554
554
  * Copyright 2017 Google LLC
555
555
  * SPDX-License-Identifier: BSD-3-Clause
556
556
  */
557
- const H = (s) => (t, e) => {
557
+ const z = (n) => (t, e) => {
558
558
  e !== void 0 ? e.addInitializer(() => {
559
- customElements.define(s, t);
560
- }) : customElements.define(s, t);
559
+ customElements.define(n, t);
560
+ }) : customElements.define(n, t);
561
561
  };
562
562
  /**
563
563
  * @license
564
564
  * Copyright 2017 Google LLC
565
565
  * SPDX-License-Identifier: BSD-3-Clause
566
566
  */
567
- const Xt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: pt }, Jt = (s = Xt, t, e) => {
568
- const { kind: n, metadata: o } = e;
567
+ const Xt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: pt }, Jt = (n = Xt, t, e) => {
568
+ const { kind: s, metadata: o } = e;
569
569
  let i = globalThis.litPropertyMetadata.get(o);
570
- if (i === void 0 && globalThis.litPropertyMetadata.set(o, i = /* @__PURE__ */ new Map()), n === "setter" && ((s = Object.create(s)).wrapped = !0), i.set(e.name, s), n === "accessor") {
570
+ if (i === void 0 && globalThis.litPropertyMetadata.set(o, i = /* @__PURE__ */ new Map()), s === "setter" && ((n = Object.create(n)).wrapped = !0), i.set(e.name, n), s === "accessor") {
571
571
  const { name: r } = e;
572
572
  return { set(c) {
573
573
  const l = t.get.call(this);
574
- t.set.call(this, c), this.requestUpdate(r, l, s);
574
+ t.set.call(this, c), this.requestUpdate(r, l, n);
575
575
  }, init(c) {
576
- return c !== void 0 && this.C(r, void 0, s, c), c;
576
+ return c !== void 0 && this.C(r, void 0, n, c), c;
577
577
  } };
578
578
  }
579
- if (n === "setter") {
579
+ if (s === "setter") {
580
580
  const { name: r } = e;
581
581
  return function(c) {
582
582
  const l = this[r];
583
- t.call(this, c), this.requestUpdate(r, l, s);
583
+ t.call(this, c), this.requestUpdate(r, l, n);
584
584
  };
585
585
  }
586
- throw Error("Unsupported decorator location: " + n);
586
+ throw Error("Unsupported decorator location: " + s);
587
587
  };
588
- function a(s) {
589
- return (t, e) => typeof e == "object" ? Jt(s, t, e) : ((n, o, i) => {
588
+ function a(n) {
589
+ return (t, e) => typeof e == "object" ? Jt(n, t, e) : ((s, o, i) => {
590
590
  const r = o.hasOwnProperty(i);
591
- return o.constructor.createProperty(i, n), r ? Object.getOwnPropertyDescriptor(o, i) : void 0;
592
- })(s, t, e);
591
+ return o.constructor.createProperty(i, s), r ? Object.getOwnPropertyDescriptor(o, i) : void 0;
592
+ })(n, t, e);
593
593
  }
594
594
  /**
595
595
  * @license
596
596
  * Copyright 2017 Google LLC
597
597
  * SPDX-License-Identifier: BSD-3-Clause
598
598
  */
599
- function Qt(s) {
600
- return a({ ...s, state: !0, attribute: !1 });
599
+ function Qt(n) {
600
+ return a({ ...n, state: !0, attribute: !1 });
601
601
  }
602
602
  const Yt = A`
603
603
  outline: 1px dashed var(--button-border-color);
@@ -615,9 +615,9 @@ A`
615
615
  * SPDX-License-Identifier: Apache-2.0
616
616
  */
617
617
  const ft = Symbol("internals"), at = Symbol("privateInternals");
618
- function te(s) {
618
+ function te(n) {
619
619
  var t;
620
- class e extends s {
620
+ class e extends n {
621
621
  get [(t = ft, t)]() {
622
622
  return this[at] || (this[at] = this.attachInternals()), this[at];
623
623
  }
@@ -629,14 +629,14 @@ function te(s) {
629
629
  * Copyright 2023 Google LLC
630
630
  * SPDX-License-Identifier: Apache-2.0
631
631
  */
632
- function ee(s) {
633
- s.addInitializer((t) => {
632
+ function ee(n) {
633
+ n.addInitializer((t) => {
634
634
  const e = t;
635
- e.addEventListener("click", async (n) => {
635
+ e.addEventListener("click", async (s) => {
636
636
  const { type: o, [ft]: i } = e, { form: r } = i;
637
637
  if (!(!r || o === "button") && (await new Promise((c) => {
638
638
  setTimeout(c);
639
- }), !n.defaultPrevented)) {
639
+ }), !s.defaultPrevented)) {
640
640
  if (o === "reset") {
641
641
  r.reset();
642
642
  return;
@@ -656,10 +656,10 @@ function ee(s) {
656
656
  });
657
657
  });
658
658
  }
659
- const se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
659
+ const ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
660
660
  <path d="M8 3.6275C7.06799 0.971489 3.25399 -0.0226278 1.67414 2.30983C0.0877404 4.65197 1.67414 6.99412 2.62598 8.33249C3.0147 8.87905 8 14 8 14C8 14 12.9853 8.87905 13.374 8.33249C14.3259 6.99412 15.9123 4.65197 14.3259 2.30983C12.746 -0.0226277 8.97167 0.971489 8 3.6275Z" stroke="#3F2B2E" stroke-linecap="round"/>
661
661
  </svg>
662
- `, ne = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
662
+ `, se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
663
663
  <path d="M16 8L4 0V16L16 8Z" fill="#3F2B2E"/>
664
664
  </svg>
665
665
  `, oe = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -710,8 +710,8 @@ const se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
710
710
  <path class="st0" d="M27.3,20.7H12.7c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h14.7c0.4,0,0.7,0.3,0.7,0.7S27.7,20.7,27.3,20.7z"/>
711
711
  </svg>
712
712
  `, tt = {
713
- wishlist: se,
714
- playerv: ne,
713
+ wishlist: ne,
714
+ playerv: se,
715
715
  chevronRight: oe,
716
716
  chevronLeft: re,
717
717
  icoPlus: ue,
@@ -729,15 +729,15 @@ const se = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="h
729
729
  * Copyright 2017 Google LLC
730
730
  * SPDX-License-Identifier: BSD-3-Clause
731
731
  */
732
- const ve = { CHILD: 2 }, be = (s) => (...t) => ({ _$litDirective$: s, values: t });
732
+ const ve = { CHILD: 2 }, be = (n) => (...t) => ({ _$litDirective$: n, values: t });
733
733
  class ge {
734
734
  constructor(t) {
735
735
  }
736
736
  get _$AU() {
737
737
  return this._$AM._$AU;
738
738
  }
739
- _$AT(t, e, n) {
740
- this._$Ct = t, this._$AM = e, this._$Ci = n;
739
+ _$AT(t, e, s) {
740
+ this._$Ct = t, this._$AM = e, this._$Ci = s;
741
741
  }
742
742
  _$AS(t, e) {
743
743
  return this.update(t, e);
@@ -775,10 +775,10 @@ class ct extends lt {
775
775
  }
776
776
  ct.directiveName = "unsafeSVG", ct.resultType = 2;
777
777
  const W = be(ct);
778
- var ye = Object.defineProperty, me = Object.getOwnPropertyDescriptor, g = (s, t, e, n) => {
779
- for (var o = n > 1 ? void 0 : n ? me(t, e) : t, i = s.length - 1, r; i >= 0; i--)
780
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
781
- return n && o && ye(t, e, o), o;
778
+ var ye = Object.defineProperty, me = Object.getOwnPropertyDescriptor, g = (n, t, e, s) => {
779
+ for (var o = s > 1 ? void 0 : s ? me(t, e) : t, i = n.length - 1, r; i >= 0; i--)
780
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
781
+ return s && o && ye(t, e, o), o;
782
782
  };
783
783
  const $e = te(m);
784
784
  let u = class extends $e {
@@ -788,36 +788,36 @@ let u = class extends $e {
788
788
  get name() {
789
789
  return this.getAttribute("name") ?? "";
790
790
  }
791
- set name(s) {
792
- this.setAttribute("name", s);
791
+ set name(n) {
792
+ this.setAttribute("name", n);
793
793
  }
794
794
  get form() {
795
795
  return this[ft].form;
796
796
  }
797
797
  handleClick() {
798
798
  if (this.panelTarget) {
799
- const s = document.getElementById(this.panelTarget);
800
- s != null && s.openPanel && typeof s.openPanel == "function" ? s.openPanel() : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
799
+ const n = document.getElementById(this.panelTarget);
800
+ n != null && n.openPanel && typeof n.openPanel == "function" ? n.openPanel() : console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`);
801
801
  }
802
802
  }
803
803
  render() {
804
804
  return this.href ? this.renderLink() : this.renderButton();
805
805
  }
806
- renderIcon(s) {
807
- const t = s === "start" ? this.startIconModel : this.endIconModel;
806
+ renderIcon(n) {
807
+ const t = n === "start" ? this.startIconModel : this.endIconModel;
808
808
  if (!t) return h;
809
809
  const e = tt[t].replace(
810
810
  "<svg",
811
811
  '<svg aria-hidden="true" focusable="false" part="svg"'
812
812
  );
813
- return d`<span class="${s === "start" ? "icon-start" : "icon-end"}">${W(e)}</span>`;
813
+ return d`<span class="${n === "start" ? "icon-start" : "icon-end"}">${W(e)}</span>`;
814
814
  }
815
815
  renderButton() {
816
- const s = this.text || this.textsecond;
816
+ const n = this.text || this.textsecond;
817
817
  return d`
818
818
  <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
819
819
  ${this.startIcon ? this.renderIcon("start") : h}
820
- ${s ? d`
820
+ ${n ? d`
821
821
  ${this.text ? d`<span class="text">${this.text}</span>` : h}
822
822
  ${this.textsecond ? d`<span class="text">${this.textsecond}</span>` : h}
823
823
  ` : d`<slot></slot>`}
@@ -826,7 +826,7 @@ let u = class extends $e {
826
826
  `;
827
827
  }
828
828
  renderLink() {
829
- const s = this.text || this.textsecond;
829
+ const n = this.text || this.textsecond;
830
830
  return d`
831
831
  <a
832
832
  href=${this.href}
@@ -835,7 +835,7 @@ let u = class extends $e {
835
835
  ?disabled=${this.disabled}
836
836
  >
837
837
  ${this.startIcon ? this.renderIcon("start") : h}
838
- ${s ? d`
838
+ ${n ? d`
839
839
  ${this.text ? d`<span>${this.text}</span>` : h}
840
840
  ${this.textsecond ? d`<span>${this.textsecond}</span>` : h}
841
841
  ` : d`<slot></slot>`}
@@ -866,8 +866,8 @@ u.styles = A`
866
866
  --button-border: transparent;
867
867
  --button-border-width: var(--border-m);
868
868
  --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
869
- --button-starticon-svg-width: 0px; /* No SVG for primary button */
870
- --button-endicon-svg-width: 0px; /* No SVG for primary button */
869
+ --button-starticon-svg-width: 0px; /* No starticon SVG for primary button */
870
+ --button-endicon-svg-width: 0px; /* No endicon SVG for primary button */
871
871
  }
872
872
 
873
873
  :host([variant="secondary"]) {
@@ -880,7 +880,7 @@ u.styles = A`
880
880
  --button-border-width: var(--border-m);
881
881
  --button-padding: var(--spacing-l, 12px) var(--spacing-3-xl, 24px);
882
882
  --button-starticon-svg-width: 16px;
883
- --button-endicon-svg-width: 0px; /* No SVG for primary button */
883
+ --button-endicon-svg-width: 0px; /* No endicon SVG for secondary button */
884
884
  }
885
885
 
886
886
  :host([variant="ghost"]) {
@@ -892,7 +892,7 @@ u.styles = A`
892
892
  --button-border-width: 0;
893
893
  --button-padding: var(--spacing-m, 10px) var(--spacing-xl, 16px);
894
894
  --button-starticon-svg-width: 16px;
895
- --button-endicon-svg-width: 12px; /* No SVG for primary button */
895
+ --button-endicon-svg-width: 12px;
896
896
  }
897
897
 
898
898
  :host([variant="tertiary"]) {
@@ -903,8 +903,8 @@ u.styles = A`
903
903
  --button-text-hover: var(--color-content-action-tertiary);
904
904
  --button-border-width: 0;
905
905
  --button-padding: var(--spacing-m, 10px) var(--spacing-l, 12px);
906
- --button-starticon-svg-width: 0px;
907
- --button-endicon-svg-width: 8px; /* No SVG for primary button */
906
+ --button-starticon-svg-width: 0px; /* No starticon SVG for tertiary button */
907
+ --button-endicon-svg-width: 8px;
908
908
  }
909
909
 
910
910
  :host([disabled]),
@@ -1048,14 +1048,14 @@ g([
1048
1048
  a({ type: String })
1049
1049
  ], u.prototype, "target", 2);
1050
1050
  u = g([
1051
- H("o-button")
1051
+ z("o-button")
1052
1052
  ], u);
1053
- var we = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, et = (s, t, e, n) => {
1054
- for (var o = n > 1 ? void 0 : n ? xe(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1055
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1056
- return n && o && we(t, e, o), o;
1053
+ var we = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, et = (n, t, e, s) => {
1054
+ for (var o = s > 1 ? void 0 : s ? xe(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1055
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1056
+ return s && o && we(t, e, o), o;
1057
1057
  };
1058
- let z = class extends m {
1058
+ let U = class extends m {
1059
1059
  constructor() {
1060
1060
  super(...arguments), this.status = "empty", this.ariaDescribedBy = "a-product-name", this.label = "Add to wishlist", this.toggleStatus = () => {
1061
1061
  this.status = this.status === "empty" ? "filled" : "empty", this.setAttribute("aria-pressed", String(this.status === "filled")), this.dispatchEvent(new CustomEvent("wishlist-toggle", {
@@ -1071,32 +1071,32 @@ let z = class extends m {
1071
1071
  firstUpdated() {
1072
1072
  this.addEventListener("click", this.toggleStatus), this.addEventListener("keydown", this.handleKeydown);
1073
1073
  }
1074
- handleKeydown(s) {
1075
- (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.toggleStatus());
1074
+ handleKeydown(n) {
1075
+ (n.key === "Enter" || n.key === " ") && (n.preventDefault(), this.toggleStatus());
1076
1076
  }
1077
1077
  render() {
1078
- const s = tt.wishlist.replace(
1078
+ const n = tt.wishlist.replace(
1079
1079
  "<svg",
1080
1080
  '<svg aria-hidden="true" focusable="false" part="svg"'
1081
1081
  );
1082
1082
  return d`
1083
1083
  <button type="button" aria-describedby="${this.ariaDescribedBy}" class="wishlist-button">
1084
1084
  <span class="sr-only">${this.label}</span>
1085
- ${W(s)}
1085
+ ${W(n)}
1086
1086
  </button>
1087
1087
  `;
1088
1088
  }
1089
- setStatus(s) {
1090
- this.status = s, this.setAttribute("aria-pressed", String(this.status === "filled")), this.requestUpdate();
1089
+ setStatus(n) {
1090
+ this.status = n, this.setAttribute("aria-pressed", String(this.status === "filled")), this.requestUpdate();
1091
1091
  }
1092
- setAriaDescribedBy(s) {
1093
- this.ariaDescribedBy = s, this.requestUpdate();
1092
+ setAriaDescribedBy(n) {
1093
+ this.ariaDescribedBy = n, this.requestUpdate();
1094
1094
  }
1095
- setLabel(s) {
1096
- this.label = s, this.requestUpdate();
1095
+ setLabel(n) {
1096
+ this.label = n, this.requestUpdate();
1097
1097
  }
1098
1098
  };
1099
- z.styles = A`
1099
+ U.styles = A`
1100
1100
  :host {
1101
1101
  display: inline-flex;
1102
1102
  justify-content: center;
@@ -1158,30 +1158,30 @@ z.styles = A`
1158
1158
  `;
1159
1159
  et([
1160
1160
  a({ type: String, reflect: !0 })
1161
- ], z.prototype, "status", 2);
1161
+ ], U.prototype, "status", 2);
1162
1162
  et([
1163
1163
  a({ type: String, reflect: !0 })
1164
- ], z.prototype, "ariaDescribedBy", 2);
1164
+ ], U.prototype, "ariaDescribedBy", 2);
1165
1165
  et([
1166
1166
  a({ type: String, reflect: !0 })
1167
- ], z.prototype, "label", 2);
1168
- z = et([
1169
- H("o-wishlist-button")
1170
- ], z);
1171
- var _e = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, L = (s, t, e, n) => {
1172
- for (var o = n > 1 ? void 0 : n ? Ae(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1173
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1174
- return n && o && _e(t, e, o), o;
1167
+ ], U.prototype, "label", 2);
1168
+ U = et([
1169
+ z("o-wishlist-button")
1170
+ ], U);
1171
+ var _e = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, L = (n, t, e, s) => {
1172
+ for (var o = s > 1 ? void 0 : s ? Ae(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1173
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1174
+ return s && o && _e(t, e, o), o;
1175
1175
  };
1176
1176
  let $ = class extends m {
1177
1177
  constructor() {
1178
1178
  super(...arguments), this.bgstyle = "background-light", this.size = "medium", this.status = "empty", this.type = "button", this.strokewidth = "1", this.icon = "wishlist", this.disabled = !1;
1179
1179
  }
1180
- updated(s) {
1181
- super.updated(s), this.style.setProperty("--icon-stroke-width", this.strokewidth);
1180
+ updated(n) {
1181
+ super.updated(n), this.style.setProperty("--icon-stroke-width", this.strokewidth);
1182
1182
  }
1183
1183
  render() {
1184
- const s = tt[this.icon] ?? "", t = `icon-${this.icon}`, e = s.replace(
1184
+ const n = tt[this.icon] ?? "", t = `icon-${this.icon}`, e = n.replace(
1185
1185
  "<svg",
1186
1186
  '<svg aria-hidden="true" focusable="false" part="svg"'
1187
1187
  );
@@ -1383,12 +1383,12 @@ L([
1383
1383
  a({ type: Boolean, reflect: !0 })
1384
1384
  ], $.prototype, "disabled", 2);
1385
1385
  $ = L([
1386
- H("o-icon-button")
1386
+ z("o-icon-button")
1387
1387
  ], $);
1388
- var Se = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, T = (s, t, e, n) => {
1389
- for (var o = n > 1 ? void 0 : n ? Ee(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1390
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1391
- return n && o && Se(t, e, o), o;
1388
+ var Se = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, H = (n, t, e, s) => {
1389
+ for (var o = s > 1 ? void 0 : s ? Ee(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1390
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1391
+ return s && o && Se(t, e, o), o;
1392
1392
  };
1393
1393
  let _ = class extends m {
1394
1394
  constructor() {
@@ -1508,51 +1508,51 @@ _.styles = A`
1508
1508
  }
1509
1509
  /* End of underline effect */
1510
1510
  `;
1511
- T([
1511
+ H([
1512
1512
  a({ type: String })
1513
1513
  ], _.prototype, "href", 2);
1514
- T([
1514
+ H([
1515
1515
  a({ type: String })
1516
1516
  ], _.prototype, "target", 2);
1517
- T([
1517
+ H([
1518
1518
  a({ type: String, reflect: !0 })
1519
1519
  ], _.prototype, "template", 2);
1520
- T([
1520
+ H([
1521
1521
  a({ type: Boolean, reflect: !0 })
1522
1522
  ], _.prototype, "inverse", 2);
1523
- T([
1523
+ H([
1524
1524
  a({ type: Boolean, reflect: !0 })
1525
1525
  ], _.prototype, "endIcon", 2);
1526
- T([
1526
+ H([
1527
1527
  a({ type: Boolean, reflect: !0 })
1528
1528
  ], _.prototype, "reverseEndIcon", 2);
1529
- _ = T([
1530
- H("o-link")
1529
+ _ = H([
1530
+ z("o-link")
1531
1531
  ], _);
1532
- var Ce = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, st = (s, t, e, n) => {
1533
- for (var o = n > 1 ? void 0 : n ? Le(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1534
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1535
- return n && o && Ce(t, e, o), o;
1532
+ var Ce = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, nt = (n, t, e, s) => {
1533
+ for (var o = s > 1 ? void 0 : s ? Le(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1534
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1535
+ return s && o && Ce(t, e, o), o;
1536
1536
  };
1537
1537
  let N = class extends m {
1538
1538
  constructor() {
1539
1539
  super(...arguments), this.rating = 0;
1540
1540
  }
1541
1541
  getStarKeys() {
1542
- const s = [];
1542
+ const n = [];
1543
1543
  for (let t = 0; t < 5; t++) {
1544
1544
  const e = this.rating - t;
1545
- let n;
1546
- e >= 1 ? n = 100 : e <= 0 ? n = 0 : n = Math.round(e * 100 / 25) * 25, s.push(`star-${n}`);
1545
+ let s;
1546
+ e >= 1 ? s = 100 : e <= 0 ? s = 0 : s = Math.round(e * 100 / 25) * 25, n.push(`star-${s}`);
1547
1547
  }
1548
- return s;
1548
+ return n;
1549
1549
  }
1550
1550
  render() {
1551
- const s = this.getStarKeys();
1551
+ const n = this.getStarKeys();
1552
1552
  return d`
1553
1553
  <div class="rating">
1554
1554
  <div class="stars">
1555
- ${s.map(
1555
+ ${n.map(
1556
1556
  (t) => d`<span class="star">${W(tt[t] ?? "")}</span>`
1557
1557
  )}
1558
1558
  </div>
@@ -1595,27 +1595,27 @@ N.styles = A`
1595
1595
  cursor: pointer;
1596
1596
  }
1597
1597
  `;
1598
- st([
1598
+ nt([
1599
1599
  a({ type: Number })
1600
1600
  ], N.prototype, "rating", 2);
1601
- st([
1601
+ nt([
1602
1602
  a({ type: String })
1603
1603
  ], N.prototype, "reviewCount", 2);
1604
- st([
1604
+ nt([
1605
1605
  a({ type: String })
1606
1606
  ], N.prototype, "href", 2);
1607
- N = st([
1608
- H("o-rating")
1607
+ N = nt([
1608
+ z("o-rating")
1609
1609
  ], N);
1610
- var Pe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, y = (s, t, e, n) => {
1611
- for (var o = n > 1 ? void 0 : n ? ke(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1612
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1613
- return n && o && Pe(t, e, o), o;
1610
+ var Pe = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, y = (n, t, e, s) => {
1611
+ for (var o = s > 1 ? void 0 : s ? ke(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1612
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1613
+ return s && o && Pe(t, e, o), o;
1614
1614
  };
1615
1615
  let b = class extends m {
1616
1616
  constructor() {
1617
- super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.headerTitle = "", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.secondaryButtonLabel = "", this.secondaryButtonVariant = "secondary", this.disablePortal = !1, this.previousFocusedElement = null, this.handleKeyDown = (s) => {
1618
- this.open && (s.key === "Escape" ? this.closePanel() : s.key === "Tab" && this.trapFocus(s));
1617
+ super(...arguments), this.open = !1, this.showHeader = !0, this.showFooter = !1, this.headerTitle = "", this.closeButtonLabel = "Close the modal", this.firstButtonLabel = "Close", this.firstButtonVariant = "primary", this.secondaryButtonLabel = "", this.secondaryButtonVariant = "secondary", this.disablePortal = !1, this.zIndex = 99, this.previousFocusedElement = null, this.handleKeyDown = (n) => {
1618
+ this.open && (n.key === "Escape" ? this.closePanel() : n.key === "Tab" && this.trapFocus(n));
1619
1619
  };
1620
1620
  }
1621
1621
  connectedCallback() {
@@ -1624,29 +1624,29 @@ let b = class extends m {
1624
1624
  disconnectedCallback() {
1625
1625
  document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
1626
1626
  }
1627
- trapFocus(s) {
1627
+ trapFocus(n) {
1628
1628
  const t = this.getFocusableElements();
1629
1629
  if (t.length === 0) return;
1630
- const e = t[0], n = t[t.length - 1];
1631
- s.shiftKey && document.activeElement === e ? (s.preventDefault(), n.focus()) : !s.shiftKey && document.activeElement === n && (s.preventDefault(), e.focus());
1630
+ const e = t[0], s = t[t.length - 1];
1631
+ n.shiftKey && document.activeElement === e ? (n.preventDefault(), s.focus()) : !n.shiftKey && document.activeElement === s && (n.preventDefault(), e.focus());
1632
1632
  }
1633
1633
  getFocusableElements() {
1634
- const s = this.renderRoot.querySelector(".panel");
1635
- return s ? Array.from(
1636
- s.querySelectorAll(
1634
+ const n = this.renderRoot.querySelector(".panel");
1635
+ return n ? Array.from(
1636
+ n.querySelectorAll(
1637
1637
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
1638
1638
  )
1639
1639
  ).filter((t) => !t.hasAttribute("disabled")) : [];
1640
1640
  }
1641
1641
  openPanel() {
1642
1642
  this.previousFocusedElement = document.activeElement, this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open"), this.updateComplete.then(() => {
1643
- const s = this.getFocusableElements()[0];
1644
- s == null || s.focus();
1643
+ const n = this.getFocusableElements()[0];
1644
+ n == null || n.focus();
1645
1645
  });
1646
1646
  }
1647
1647
  closePanel() {
1648
- var s;
1649
- this.open = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), (s = this.previousFocusedElement) == null || s.focus(), this.dispatchEvent(
1648
+ var n;
1649
+ this.open = !1, document.body.style.overflow = "", document.body.removeAttribute("data-side-panel"), (n = this.previousFocusedElement) == null || n.focus(), this.dispatchEvent(
1650
1650
  new CustomEvent("close", { bubbles: !0, composed: !0 })
1651
1651
  );
1652
1652
  }
@@ -1656,14 +1656,18 @@ let b = class extends m {
1656
1656
  handleSecondaryClick() {
1657
1657
  typeof this.onSecondaryButtonClick == "function" && this.onSecondaryButtonClick(), this.closePanel();
1658
1658
  }
1659
+ updated() {
1660
+ this.style.setProperty("--z-overlay", `${this.zIndex}`), this.style.setProperty("--z-panel", `${this.zIndex + 1}`);
1661
+ }
1659
1662
  render() {
1660
1663
  return d`
1661
- <div class="overlay" @click=${this.closePanel}></div>
1664
+ <div class="overlay" style="z-index: ${this.zIndex}" @click=${this.closePanel}></div>
1662
1665
  <div
1663
1666
  class="panel"
1664
1667
  role="dialog"
1665
1668
  aria-modal="true"
1666
1669
  aria-labelledby="panel-title"
1670
+ style="z-index: ${this.zIndex + 1}"
1667
1671
  >
1668
1672
  <o-icon-button icon="cross" size="medium" class="close-btn" @click=${this.closePanel} aria-label="${this.closeButtonLabel}"></o-icon-button>
1669
1673
 
@@ -1704,12 +1708,13 @@ let b = class extends m {
1704
1708
  };
1705
1709
  b.styles = A`
1706
1710
  :host {
1711
+ --z-overlay: 99;
1712
+ --z-panel: 100;
1707
1713
  position: fixed;
1708
1714
  top: 0;
1709
1715
  right: 0;
1710
1716
  height: 100%;
1711
1717
  width: 100%;
1712
- z-index: 2147483647;
1713
1718
  pointer-events: none;
1714
1719
  }
1715
1720
 
@@ -1721,6 +1726,7 @@ b.styles = A`
1721
1726
  opacity: 0;
1722
1727
  transition: opacity 0.3s ease;
1723
1728
  pointer-events: none;
1729
+ z-index: var(--z-overlay);
1724
1730
  }
1725
1731
 
1726
1732
  :host([open]) .overlay {
@@ -1743,6 +1749,7 @@ b.styles = A`
1743
1749
  display: flex;
1744
1750
  flex-direction: column;
1745
1751
  pointer-events: auto;
1752
+ z-index: var(--z-panel);
1746
1753
  }
1747
1754
 
1748
1755
  :host([open]) .panel {
@@ -1832,57 +1839,60 @@ y([
1832
1839
  y([
1833
1840
  a({ type: Boolean, reflect: !0 })
1834
1841
  ], b.prototype, "disablePortal", 2);
1842
+ y([
1843
+ a({ type: Number, reflect: !0 })
1844
+ ], b.prototype, "zIndex", 2);
1835
1845
  b = y([
1836
- H("o-side-panel")
1846
+ z("o-side-panel")
1837
1847
  ], b);
1838
- var Ie = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, P = (s, t, e, n) => {
1839
- for (var o = n > 1 ? void 0 : n ? Be(t, e) : t, i = s.length - 1, r; i >= 0; i--)
1840
- (r = s[i]) && (o = (n ? r(t, e, o) : r(o)) || o);
1841
- return n && o && Ie(t, e, o), o;
1848
+ var Ie = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, P = (n, t, e, s) => {
1849
+ for (var o = s > 1 ? void 0 : s ? Be(t, e) : t, i = n.length - 1, r; i >= 0; i--)
1850
+ (r = n[i]) && (o = (s ? r(t, e, o) : r(o)) || o);
1851
+ return s && o && Ie(t, e, o), o;
1842
1852
  };
1843
1853
  let w = class extends m {
1844
1854
  constructor() {
1845
1855
  super(...arguments), this.thumbnails = [], this.activeIndex = 0, this.disabledIndexes = [], this.maxWidth = "100%", this.focusedIndex = 0;
1846
1856
  }
1847
- handleKeyDown(s) {
1848
- s.key === "ArrowRight" ? (s.preventDefault(), this.focusNext()) : s.key === "ArrowLeft" ? (s.preventDefault(), this.focusPrevious()) : (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this.selectThumbnail(this.focusedIndex));
1857
+ handleKeyDown(n) {
1858
+ n.key === "ArrowRight" ? (n.preventDefault(), this.focusNext()) : n.key === "ArrowLeft" ? (n.preventDefault(), this.focusPrevious()) : (n.key === "Enter" || n.key === " ") && (n.preventDefault(), this.selectThumbnail(this.focusedIndex));
1849
1859
  }
1850
1860
  focusNext() {
1851
- let s = this.focusedIndex + 1;
1852
- for (; this.disabledIndexes.includes(s) && s < this.thumbnails.length; )
1853
- s++;
1854
- s < this.thumbnails.length && (this.focusedIndex = s, this.focusThumbnail(s));
1861
+ let n = this.focusedIndex + 1;
1862
+ for (; this.disabledIndexes.includes(n) && n < this.thumbnails.length; )
1863
+ n++;
1864
+ n < this.thumbnails.length && (this.focusedIndex = n, this.focusThumbnail(n));
1855
1865
  }
1856
1866
  focusPrevious() {
1857
- let s = this.focusedIndex - 1;
1858
- for (; this.disabledIndexes.includes(s) && s >= 0; )
1859
- s--;
1860
- s >= 0 && (this.focusedIndex = s, this.focusThumbnail(s));
1867
+ let n = this.focusedIndex - 1;
1868
+ for (; this.disabledIndexes.includes(n) && n >= 0; )
1869
+ n--;
1870
+ n >= 0 && (this.focusedIndex = n, this.focusThumbnail(n));
1861
1871
  }
1862
- focusThumbnail(s) {
1863
- const t = this.renderRoot.querySelector(`[data-index="${s}"]`);
1872
+ focusThumbnail(n) {
1873
+ const t = this.renderRoot.querySelector(`[data-index="${n}"]`);
1864
1874
  t == null || t.focus();
1865
1875
  }
1866
- selectThumbnail(s) {
1867
- this.disabledIndexes.includes(s) || (this.activeIndex = s, this.swiperInstance && typeof this.swiperInstance.slideTo == "function" && this.swiperInstance.slideTo(s), this.dispatchEvent(new CustomEvent("thumbnail-select", { detail: { index: s } })));
1876
+ selectThumbnail(n) {
1877
+ this.disabledIndexes.includes(n) || (this.activeIndex = n, this.swiperInstance && typeof this.swiperInstance.slideTo == "function" && this.swiperInstance.slideTo(n), this.dispatchEvent(new CustomEvent("thumbnail-select", { detail: { index: n } })));
1868
1878
  }
1869
1879
  render() {
1870
1880
  return d`
1871
1881
  <div class="scroll-container" style="max-width: ${this.maxWidth};">
1872
- ${this.thumbnails.map((s, t) => {
1873
- const e = this.disabledIndexes.includes(t), n = this.activeIndex === t, o = s.type === "video";
1882
+ ${this.thumbnails.map((n, t) => {
1883
+ const e = this.disabledIndexes.includes(t), s = this.activeIndex === t, o = n.type === "video";
1874
1884
  return d`
1875
1885
  <div class="thumb-wrapper">
1876
1886
  <button
1877
1887
  class="thumb"
1878
1888
  data-index="${t}"
1879
1889
  ?disabled=${e}
1880
- aria-selected=${n}
1890
+ aria-selected=${s}
1881
1891
  tabindex="${this.focusedIndex === t ? 0 : -1}"
1882
1892
  @click=${() => this.selectThumbnail(t)}
1883
1893
  @keydown=${this.handleKeyDown}
1884
1894
  >
1885
- <img src="${s.src}" />
1895
+ <img src="${n.src}" />
1886
1896
  </button>
1887
1897
  ${o ? d`<div class="play-icon-wrapper">${this.playIcon}</div>` : null}
1888
1898
  </div>
@@ -1895,7 +1905,7 @@ let w = class extends m {
1895
1905
  w.styles = A`
1896
1906
  :host {
1897
1907
  display: flex;
1898
- gap: 8px;
1908
+ gap: 5px;
1899
1909
  }
1900
1910
 
1901
1911
  .thumb-wrapper {
@@ -1908,21 +1918,26 @@ w.styles = A`
1908
1918
  height: 70px;
1909
1919
  background-size: cover;
1910
1920
  background-position: center;
1911
- border: 1px solid var(--color-border-normal, #ccc);
1921
+ border: 1px solid var(--color-border-secondary);
1912
1922
  opacity: 1;
1913
1923
  cursor: pointer;
1914
1924
  outline: none;
1915
1925
  transition: border 0.2s, opacity 0.2s;
1916
1926
  padding: 0;
1917
1927
  margin: 0;
1928
+ box-sizing: content-box;
1918
1929
 
1919
1930
  img {
1920
1931
  width: 100%;
1932
+ height: auto;
1933
+ max-width: 100%;
1934
+ border: 1px solid var(--color-container-white);
1935
+ box-sizing: border-box;
1921
1936
  }
1922
1937
  }
1923
1938
 
1924
1939
  .thumb[aria-selected="true"] {
1925
- border: 2px solid black;
1940
+ border: 1px solid var(--color-border-primary);
1926
1941
  }
1927
1942
 
1928
1943
  .thumb[disabled] {
@@ -1932,7 +1947,7 @@ w.styles = A`
1932
1947
  }
1933
1948
 
1934
1949
  .thumb:focus-visible {
1935
- outline: 2px solid black;
1950
+ outline: 2px solid var(--color-border-secondary);
1936
1951
  }
1937
1952
 
1938
1953
  .play-icon-wrapper {
@@ -1953,7 +1968,7 @@ w.styles = A`
1953
1968
  }
1954
1969
 
1955
1970
  .scroll-container::-webkit-scrollbar {
1956
- height: 6px;
1971
+ height: 2px;
1957
1972
  }
1958
1973
 
1959
1974
  .scroll-container::-webkit-scrollbar-track {
@@ -1961,9 +1976,24 @@ w.styles = A`
1961
1976
  }
1962
1977
 
1963
1978
  .scroll-container::-webkit-scrollbar-thumb {
1964
- background-color: var(--color-border-normal, #ccc);
1979
+ background-color: var(--color-neutral-grey);
1965
1980
  border-radius: 3px;
1966
1981
  }
1982
+
1983
+ ::slotted(.scroll-container) {
1984
+ scrollbar-width: none;
1985
+ }
1986
+
1987
+ ::slotted(.scroll-container)::-webkit-scrollbar {
1988
+ height: 2px;
1989
+ background: transparent;
1990
+ }
1991
+
1992
+ ::slotted(.scroll-container)::-webkit-scrollbar-button {
1993
+ display: none;
1994
+ height: 0;
1995
+ width: 0;
1996
+ }
1967
1997
  `;
1968
1998
  P([
1969
1999
  a({ type: Array })
@@ -1987,5 +2017,5 @@ P([
1987
2017
  Qt()
1988
2018
  ], w.prototype, "focusedIndex", 2);
1989
2019
  w = P([
1990
- H("thumbnail-navigation")
2020
+ z("thumbnail-navigation")
1991
2021
  ], w);