placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/dist/components/tab-group/tab-group.js

@@ -1,5 +1,2387 @@
-import { PcTabGroup as PcTabGroup$1 } from './tab-group.component.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i6 = decorators.length - 1, decorator; i6 >= 0; i6--)
+    if (decorator = decorators[i6])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
 
-var PcTabGroup = PcTabGroup$1;
+// node_modules/@lit/reactive-element/css-tag.js
+var t = globalThis;
+var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
+var s = Symbol();
+var o = /* @__PURE__ */ new WeakMap();
+var n = class {
+  constructor(t6, e8, o7) {
+    if (this._$cssResult$ = true, o7 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t6, this.t = e8;
+  }
+  get styleSheet() {
+    let t6 = this.o;
+    const s4 = this.t;
+    if (e && void 0 === t6) {
+      const e8 = void 0 !== s4 && 1 === s4.length;
+      e8 && (t6 = o.get(s4)), void 0 === t6 && ((this.o = t6 = new CSSStyleSheet()).replaceSync(this.cssText), e8 && o.set(s4, t6));
+    }
+    return t6;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var r = (t6) => new n("string" == typeof t6 ? t6 : t6 + "", void 0, s);
+var S = (s4, o7) => {
+  if (e) s4.adoptedStyleSheets = o7.map(((t6) => t6 instanceof CSSStyleSheet ? t6 : t6.styleSheet));
+  else for (const e8 of o7) {
+    const o8 = document.createElement("style"), n5 = t.litNonce;
+    void 0 !== n5 && o8.setAttribute("nonce", n5), o8.textContent = e8.cssText, s4.appendChild(o8);
+  }
+};
+var c = e ? (t6) => t6 : (t6) => t6 instanceof CSSStyleSheet ? ((t7) => {
+  let e8 = "";
+  for (const s4 of t7.cssRules) e8 += s4.cssText;
+  return r(e8);
+})(t6) : t6;
 
-export { PcTabGroup$1 as PcTabGroup, PcTabGroup as default };
+// node_modules/@lit/reactive-element/reactive-element.js
+var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
+var a = globalThis;
+var c2 = a.trustedTypes;
+var l = c2 ? c2.emptyScript : "";
+var p = a.reactiveElementPolyfillSupport;
+var d = (t6, s4) => t6;
+var u = { toAttribute(t6, s4) {
+  switch (s4) {
+    case Boolean:
+      t6 = t6 ? l : null;
+      break;
+    case Object:
+    case Array:
+      t6 = null == t6 ? t6 : JSON.stringify(t6);
+  }
+  return t6;
+}, fromAttribute(t6, s4) {
+  let i6 = t6;
+  switch (s4) {
+    case Boolean:
+      i6 = null !== t6;
+      break;
+    case Number:
+      i6 = null === t6 ? null : Number(t6);
+      break;
+    case Object:
+    case Array:
+      try {
+        i6 = JSON.parse(t6);
+      } catch (t7) {
+        i6 = null;
+      }
+  }
+  return i6;
+} };
+var f = (t6, s4) => !i2(t6, s4);
+var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+var y = class extends HTMLElement {
+  static addInitializer(t6) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t6);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t6, s4 = b) {
+    if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t6) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t6, s4), !s4.noAccessor) {
+      const i6 = Symbol(), h3 = this.getPropertyDescriptor(t6, i6, s4);
+      void 0 !== h3 && e2(this.prototype, t6, h3);
+    }
+  }
+  static getPropertyDescriptor(t6, s4, i6) {
+    const { get: e8, set: r6 } = h(this.prototype, t6) ?? { get() {
+      return this[s4];
+    }, set(t7) {
+      this[s4] = t7;
+    } };
+    return { get: e8, set(s5) {
+      const h3 = e8?.call(this);
+      r6?.call(this, s5), this.requestUpdate(t6, h3, i6);
+    }, configurable: true, enumerable: true };
+  }
+  static getPropertyOptions(t6) {
+    return this.elementProperties.get(t6) ?? b;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d("elementProperties"))) return;
+    const t6 = n2(this);
+    t6.finalize(), void 0 !== t6.l && (this.l = [...t6.l]), this.elementProperties = new Map(t6.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d("finalized"))) return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
+      const t7 = this.properties, s4 = [...r2(t7), ...o2(t7)];
+      for (const i6 of s4) this.createProperty(i6, t7[i6]);
+    }
+    const t6 = this[Symbol.metadata];
+    if (null !== t6) {
+      const s4 = litPropertyMetadata.get(t6);
+      if (void 0 !== s4) for (const [t7, i6] of s4) this.elementProperties.set(t7, i6);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [t7, s4] of this.elementProperties) {
+      const i6 = this._$Eu(t7, s4);
+      void 0 !== i6 && this._$Eh.set(i6, t7);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s4) {
+    const i6 = [];
+    if (Array.isArray(s4)) {
+      const e8 = new Set(s4.flat(1 / 0).reverse());
+      for (const s5 of e8) i6.unshift(c(s5));
+    } else void 0 !== s4 && i6.push(c(s4));
+    return i6;
+  }
+  static _$Eu(t6, s4) {
+    const i6 = s4.attribute;
+    return false === i6 ? void 0 : "string" == typeof i6 ? i6 : "string" == typeof t6 ? t6.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise(((t6) => this.enableUpdating = t6)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t6) => t6(this)));
+  }
+  addController(t6) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t6), void 0 !== this.renderRoot && this.isConnected && t6.hostConnected?.();
+  }
+  removeController(t6) {
+    this._$EO?.delete(t6);
+  }
+  _$E_() {
+    const t6 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
+    for (const i6 of s4.keys()) this.hasOwnProperty(i6) && (t6.set(i6, this[i6]), delete this[i6]);
+    t6.size > 0 && (this._$Ep = t6);
+  }
+  createRenderRoot() {
+    const t6 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t6, this.constructor.elementStyles), t6;
+  }
+  connectedCallback() {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach(((t6) => t6.hostConnected?.()));
+  }
+  enableUpdating(t6) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach(((t6) => t6.hostDisconnected?.()));
+  }
+  attributeChangedCallback(t6, s4, i6) {
+    this._$AK(t6, i6);
+  }
+  _$ET(t6, s4) {
+    const i6 = this.constructor.elementProperties.get(t6), e8 = this.constructor._$Eu(t6, i6);
+    if (void 0 !== e8 && true === i6.reflect) {
+      const h3 = (void 0 !== i6.converter?.toAttribute ? i6.converter : u).toAttribute(s4, i6.type);
+      this._$Em = t6, null == h3 ? this.removeAttribute(e8) : this.setAttribute(e8, h3), this._$Em = null;
+    }
+  }
+  _$AK(t6, s4) {
+    const i6 = this.constructor, e8 = i6._$Eh.get(t6);
+    if (void 0 !== e8 && this._$Em !== e8) {
+      const t7 = i6.getPropertyOptions(e8), h3 = "function" == typeof t7.converter ? { fromAttribute: t7.converter } : void 0 !== t7.converter?.fromAttribute ? t7.converter : u;
+      this._$Em = e8, this[e8] = h3.fromAttribute(s4, t7.type) ?? this._$Ej?.get(e8) ?? null, this._$Em = null;
+    }
+  }
+  requestUpdate(t6, s4, i6) {
+    if (void 0 !== t6) {
+      const e8 = this.constructor, h3 = this[t6];
+      if (i6 ?? (i6 = e8.getPropertyOptions(t6)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t6) && !this.hasAttribute(e8._$Eu(t6, i6)))) return;
+      this.C(t6, s4, i6);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$EP());
+  }
+  C(t6, s4, { useDefault: i6, reflect: e8, wrapped: h3 }, r6) {
+    i6 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t6) && (this._$Ej.set(t6, r6 ?? s4 ?? this[t6]), true !== h3 || void 0 !== r6) || (this._$AL.has(t6) || (this.hasUpdated || i6 || (s4 = void 0), this._$AL.set(t6, s4)), true === e8 && this._$Em !== t6 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t6));
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t7) {
+      Promise.reject(t7);
+    }
+    const t6 = this.scheduleUpdate();
+    return null != t6 && await t6, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [t8, s5] of this._$Ep) this[t8] = s5;
+        this._$Ep = void 0;
+      }
+      const t7 = this.constructor.elementProperties;
+      if (t7.size > 0) for (const [s5, i6] of t7) {
+        const { wrapped: t8 } = i6, e8 = this[s5];
+        true !== t8 || this._$AL.has(s5) || void 0 === e8 || this.C(s5, void 0, i6, e8);
+      }
+    }
+    let t6 = false;
+    const s4 = this._$AL;
+    try {
+      t6 = this.shouldUpdate(s4), t6 ? (this.willUpdate(s4), this._$EO?.forEach(((t7) => t7.hostUpdate?.())), this.update(s4)) : this._$EM();
+    } catch (s5) {
+      throw t6 = false, this._$EM(), s5;
+    }
+    t6 && this._$AE(s4);
+  }
+  willUpdate(t6) {
+  }
+  _$AE(t6) {
+    this._$EO?.forEach(((t7) => t7.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t6)), this.updated(t6);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t6) {
+    return true;
+  }
+  update(t6) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach(((t7) => this._$ET(t7, this[t7])))), this._$EM();
+  }
+  updated(t6) {
+  }
+  firstUpdated(t6) {
+  }
+};
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.0");
+
+// node_modules/lit-html/lit-html.js
+var t2 = globalThis;
+var i3 = t2.trustedTypes;
+var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t6) => t6 }) : void 0;
+var e3 = "$lit$";
+var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`;
+var o3 = "?" + h2;
+var n3 = `<${o3}>`;
+var r3 = document;
+var l2 = () => r3.createComment("");
+var c3 = (t6) => null === t6 || "object" != typeof t6 && "function" != typeof t6;
+var a2 = Array.isArray;
+var u2 = (t6) => a2(t6) || "function" == typeof t6?.[Symbol.iterator];
+var d2 = "[ 	\n\f\r]";
+var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+var v = /-->/g;
+var _ = />/g;
+var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g");
+var p2 = /'/g;
+var g = /"/g;
+var $ = /^(?:script|style|textarea|title)$/i;
+var y2 = (t6) => (i6, ...s4) => ({ _$litType$: t6, strings: i6, values: s4 });
+var x = y2(1);
+var b2 = y2(2);
+var w = y2(3);
+var T = Symbol.for("lit-noChange");
+var E = Symbol.for("lit-nothing");
+var A = /* @__PURE__ */ new WeakMap();
+var C = r3.createTreeWalker(r3, 129);
+function P(t6, i6) {
+  if (!a2(t6) || !t6.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s2 ? s2.createHTML(i6) : i6;
+}
+var V = (t6, i6) => {
+  const s4 = t6.length - 1, o7 = [];
+  let r6, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
+  for (let i7 = 0; i7 < s4; i7++) {
+    const s5 = t6[i7];
+    let a3, u3, d3 = -1, y3 = 0;
+    for (; y3 < s5.length && (c4.lastIndex = y3, u3 = c4.exec(s5), null !== u3); ) y3 = c4.lastIndex, c4 === f2 ? "!--" === u3[1] ? c4 = v : void 0 !== u3[1] ? c4 = _ : void 0 !== u3[2] ? ($.test(u3[2]) && (r6 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r6 ?? f2, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? m : '"' === u3[3] ? g : p2) : c4 === g || c4 === p2 ? c4 = m : c4 === v || c4 === _ ? c4 = f2 : (c4 = m, r6 = void 0);
+    const x2 = c4 === m && t6[i7 + 1].startsWith("/>") ? " " : "";
+    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o7.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i7 : x2);
+  }
+  return [P(t6, l3 + (t6[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), o7];
+};
+var N = class _N {
+  constructor({ strings: t6, _$litType$: s4 }, n5) {
+    let r6;
+    this.parts = [];
+    let c4 = 0, a3 = 0;
+    const u3 = t6.length - 1, d3 = this.parts, [f3, v2] = V(t6, s4);
+    if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s4 || 3 === s4) {
+      const t7 = this.el.content.firstChild;
+      t7.replaceWith(...t7.childNodes);
+    }
+    for (; null !== (r6 = C.nextNode()) && d3.length < u3; ) {
+      if (1 === r6.nodeType) {
+        if (r6.hasAttributes()) for (const t7 of r6.getAttributeNames()) if (t7.endsWith(e3)) {
+          const i6 = v2[a3++], s5 = r6.getAttribute(t7).split(h2), e8 = /([.?@])?(.*)/.exec(i6);
+          d3.push({ type: 1, index: c4, name: e8[2], strings: s5, ctor: "." === e8[1] ? H : "?" === e8[1] ? I : "@" === e8[1] ? L : k }), r6.removeAttribute(t7);
+        } else t7.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r6.removeAttribute(t7));
+        if ($.test(r6.tagName)) {
+          const t7 = r6.textContent.split(h2), s5 = t7.length - 1;
+          if (s5 > 0) {
+            r6.textContent = i3 ? i3.emptyScript : "";
+            for (let i6 = 0; i6 < s5; i6++) r6.append(t7[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
+            r6.append(t7[s5], l2());
+          }
+        }
+      } else if (8 === r6.nodeType) if (r6.data === o3) d3.push({ type: 2, index: c4 });
+      else {
+        let t7 = -1;
+        for (; -1 !== (t7 = r6.data.indexOf(h2, t7 + 1)); ) d3.push({ type: 7, index: c4 }), t7 += h2.length - 1;
+      }
+      c4++;
+    }
+  }
+  static createElement(t6, i6) {
+    const s4 = r3.createElement("template");
+    return s4.innerHTML = t6, s4;
+  }
+};
+function S2(t6, i6, s4 = t6, e8) {
+  if (i6 === T) return i6;
+  let h3 = void 0 !== e8 ? s4._$Co?.[e8] : s4._$Cl;
+  const o7 = c3(i6) ? void 0 : i6._$litDirective$;
+  return h3?.constructor !== o7 && (h3?._$AO?.(false), void 0 === o7 ? h3 = void 0 : (h3 = new o7(t6), h3._$AT(t6, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t6, h3._$AS(t6, i6.values), h3, e8)), i6;
+}
+var M = class {
+  constructor(t6, i6) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t6, this._$AM = i6;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t6) {
+    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t6?.creationScope ?? r3).importNode(i6, true);
+    C.currentNode = e8;
+    let h3 = C.nextNode(), o7 = 0, n5 = 0, l3 = s4[0];
+    for (; void 0 !== l3; ) {
+      if (o7 === l3.index) {
+        let i7;
+        2 === l3.type ? i7 = new R(h3, h3.nextSibling, this, t6) : 1 === l3.type ? i7 = new l3.ctor(h3, l3.name, l3.strings, this, t6) : 6 === l3.type && (i7 = new z(h3, this, t6)), this._$AV.push(i7), l3 = s4[++n5];
+      }
+      o7 !== l3?.index && (h3 = C.nextNode(), o7++);
+    }
+    return C.currentNode = r3, e8;
+  }
+  p(t6) {
+    let i6 = 0;
+    for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t6, s4, i6), i6 += s4.strings.length - 2) : s4._$AI(t6[i6])), i6++;
+  }
+};
+var R = class _R {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t6, i6, s4, e8) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t6, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
+  }
+  get parentNode() {
+    let t6 = this._$AA.parentNode;
+    const i6 = this._$AM;
+    return void 0 !== i6 && 11 === t6?.nodeType && (t6 = i6.parentNode), t6;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t6, i6 = this) {
+    t6 = S2(this, t6, i6), c3(t6) ? t6 === E || null == t6 || "" === t6 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t6 !== this._$AH && t6 !== T && this._(t6) : void 0 !== t6._$litType$ ? this.$(t6) : void 0 !== t6.nodeType ? this.T(t6) : u2(t6) ? this.k(t6) : this._(t6);
+  }
+  O(t6) {
+    return this._$AA.parentNode.insertBefore(t6, this._$AB);
+  }
+  T(t6) {
+    this._$AH !== t6 && (this._$AR(), this._$AH = this.O(t6));
+  }
+  _(t6) {
+    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t6 : this.T(r3.createTextNode(t6)), this._$AH = t6;
+  }
+  $(t6) {
+    const { values: i6, _$litType$: s4 } = t6, e8 = "number" == typeof s4 ? this._$AC(t6) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
+    if (this._$AH?._$AD === e8) this._$AH.p(i6);
+    else {
+      const t7 = new M(e8, this), s5 = t7.u(this.options);
+      t7.p(i6), this.T(s5), this._$AH = t7;
+    }
+  }
+  _$AC(t6) {
+    let i6 = A.get(t6.strings);
+    return void 0 === i6 && A.set(t6.strings, i6 = new N(t6)), i6;
+  }
+  k(t6) {
+    a2(this._$AH) || (this._$AH = [], this._$AR());
+    const i6 = this._$AH;
+    let s4, e8 = 0;
+    for (const h3 of t6) e8 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
+    e8 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e8), i6.length = e8);
+  }
+  _$AR(t6 = this._$AA.nextSibling, i6) {
+    for (this._$AP?.(false, true, i6); t6 && t6 !== this._$AB; ) {
+      const i7 = t6.nextSibling;
+      t6.remove(), t6 = i7;
+    }
+  }
+  setConnected(t6) {
+    void 0 === this._$AM && (this._$Cv = t6, this._$AP?.(t6));
+  }
+};
+var k = class {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t6, i6, s4, e8, h3) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t6, this.name = i6, this._$AM = e8, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
+  }
+  _$AI(t6, i6 = this, s4, e8) {
+    const h3 = this.strings;
+    let o7 = false;
+    if (void 0 === h3) t6 = S2(this, t6, i6, 0), o7 = !c3(t6) || t6 !== this._$AH && t6 !== T, o7 && (this._$AH = t6);
+    else {
+      const e9 = t6;
+      let n5, r6;
+      for (t6 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r6 = S2(this, e9[s4 + n5], i6, n5), r6 === T && (r6 = this._$AH[n5]), o7 || (o7 = !c3(r6) || r6 !== this._$AH[n5]), r6 === E ? t6 = E : t6 !== E && (t6 += (r6 ?? "") + h3[n5 + 1]), this._$AH[n5] = r6;
+    }
+    o7 && !e8 && this.j(t6);
+  }
+  j(t6) {
+    t6 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t6 ?? "");
+  }
+};
+var H = class extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t6) {
+    this.element[this.name] = t6 === E ? void 0 : t6;
+  }
+};
+var I = class extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t6) {
+    this.element.toggleAttribute(this.name, !!t6 && t6 !== E);
+  }
+};
+var L = class extends k {
+  constructor(t6, i6, s4, e8, h3) {
+    super(t6, i6, s4, e8, h3), this.type = 5;
+  }
+  _$AI(t6, i6 = this) {
+    if ((t6 = S2(this, t6, i6, 0) ?? E) === T) return;
+    const s4 = this._$AH, e8 = t6 === E && s4 !== E || t6.capture !== s4.capture || t6.once !== s4.once || t6.passive !== s4.passive, h3 = t6 !== E && (s4 === E || e8);
+    e8 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t6), this._$AH = t6;
+  }
+  handleEvent(t6) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t6) : this._$AH.handleEvent(t6);
+  }
+};
+var z = class {
+  constructor(t6, i6, s4) {
+    this.element = t6, this.type = 6, this._$AN = void 0, this._$AM = i6, this.options = s4;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t6) {
+    S2(this, t6);
+  }
+};
+var j = t2.litHtmlPolyfillSupport;
+j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.0");
+var B = (t6, i6, s4) => {
+  const e8 = s4?.renderBefore ?? i6;
+  let h3 = e8._$litPart$;
+  if (void 0 === h3) {
+    const t7 = s4?.renderBefore ?? null;
+    e8._$litPart$ = h3 = new R(i6.insertBefore(l2(), t7), t7, void 0, s4 ?? {});
+  }
+  return h3._$AI(t6), h3;
+};
+
+// node_modules/lit-element/lit-element.js
+var s3 = globalThis;
+var i4 = class extends y {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var _a;
+    const t6 = super.createRenderRoot();
+    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t6.firstChild), t6;
+  }
+  update(t6) {
+    const r6 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t6), this._$Do = B(r6, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(false);
+  }
+  render() {
+    return T;
+  }
+};
+i4._$litElement$ = true, i4["finalized"] = true, s3.litElementHydrateSupport?.({ LitElement: i4 });
+var o4 = s3.litElementPolyfillSupport;
+o4?.({ LitElement: i4 });
+(s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.0");
+
+// node_modules/@lit/reactive-element/decorators/custom-element.js
+var t3 = (t6) => (e8, o7) => {
+  void 0 !== o7 ? o7.addInitializer((() => {
+    customElements.define(t6, e8);
+  })) : customElements.define(t6, e8);
+};
+
+// node_modules/@lit/reactive-element/decorators/property.js
+var o5 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
+var r4 = (t6 = o5, e8, r6) => {
+  const { kind: n5, metadata: i6 } = r6;
+  let s4 = globalThis.litPropertyMetadata.get(i6);
+  if (void 0 === s4 && globalThis.litPropertyMetadata.set(i6, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t6 = Object.create(t6)).wrapped = true), s4.set(r6.name, t6), "accessor" === n5) {
+    const { name: o7 } = r6;
+    return { set(r7) {
+      const n6 = e8.get.call(this);
+      e8.set.call(this, r7), this.requestUpdate(o7, n6, t6);
+    }, init(e9) {
+      return void 0 !== e9 && this.C(o7, void 0, t6, e9), e9;
+    } };
+  }
+  if ("setter" === n5) {
+    const { name: o7 } = r6;
+    return function(r7) {
+      const n6 = this[o7];
+      e8.call(this, r7), this.requestUpdate(o7, n6, t6);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n5);
+};
+function n4(t6) {
+  return (e8, o7) => "object" == typeof o7 ? r4(t6, e8, o7) : ((t7, e9, o8) => {
+    const r6 = e9.hasOwnProperty(o8);
+    return e9.constructor.createProperty(o8, t7), r6 ? Object.getOwnPropertyDescriptor(e9, o8) : void 0;
+  })(t6, e8, o7);
+}
+
+// node_modules/@lit/reactive-element/decorators/state.js
+function r5(r6) {
+  return n4({ ...r6, state: true, attribute: false });
+}
+
+// node_modules/@lit/reactive-element/decorators/event-options.js
+function t4(t6) {
+  return (n5, o7) => {
+    const c4 = "function" == typeof n5 ? n5 : n5[o7];
+    Object.assign(c4, t6);
+  };
+}
+
+// node_modules/@lit/reactive-element/decorators/base.js
+var e4 = (e8, t6, c4) => (c4.configurable = true, c4.enumerable = true, Reflect.decorate && "object" != typeof t6 && Object.defineProperty(e8, t6, c4), c4);
+
+// node_modules/@lit/reactive-element/decorators/query.js
+function e5(e8, r6) {
+  return (n5, s4, i6) => {
+    const o7 = (t6) => t6.renderRoot?.querySelector(e8) ?? null;
+    if (r6) {
+      const { get: e9, set: r7 } = "object" == typeof s4 ? n5 : i6 ?? (() => {
+        const t6 = Symbol();
+        return { get() {
+          return this[t6];
+        }, set(e10) {
+          this[t6] = e10;
+        } };
+      })();
+      return e4(n5, s4, { get() {
+        let t6 = e9.call(this);
+        return void 0 === t6 && (t6 = o7(this), (null !== t6 || this.hasUpdated) && r7.call(this, t6)), t6;
+      } });
+    }
+    return e4(n5, s4, { get() {
+      return o7(this);
+    } });
+  };
+}
+
+// src/styles/component-styles/host.css
+var host_default = ":host {\n    box-sizing: border-box !important;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n    box-sizing: inherit !important;\n}\n\n[hidden] {\n    display: none !important;\n}\n";
+
+// src/internal/placer-element.ts
+var PlacerElement = class extends i4 {
+  constructor() {
+    super();
+    this.hasRecordedInitialProperties = false;
+    this.initialReflectedProperties = /* @__PURE__ */ new Map();
+    /** A method to set and check custom states. */
+    this.customStates = {
+      /** Adds or removes the specified custom state. */
+      set: (customState, active) => {
+        if (!Boolean(this.internals?.states)) {
+          return;
+        }
+        if (active) {
+          this.internals.states.add(customState);
+        } else {
+          this.internals.states.delete(customState);
+        }
+      },
+      /** Determines whether or not the element currently has the specified state. */
+      has: (customState) => {
+        if (!Boolean(this.internals?.states)) {
+          return false;
+        }
+        return this.internals.states.has(customState);
+      }
+    };
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      console.error(
+        "Element internals are not supported in your browser. Consider using a polyfill."
+      );
+    }
+    this.customStates.set("pc-defined", true);
+    let Self = this.constructor;
+    for (let [property, spec] of Self.elementProperties) {
+      if (spec.default === "inherit" && spec.initial !== void 0 && typeof property === "string") {
+        this.customStates.set(
+          `initial-${property}-${spec.initial}`,
+          true
+        );
+      }
+    }
+  }
+  /** Override the default `styles` property to fetch and convert string CSS files. Components can override this behavior by setting their own `static styles = []` property. */
+  static get styles() {
+    const styles = Array.isArray(this.css) ? this.css : this.css ? [this.css] : [];
+    return [host_default, ...styles].map(
+      (style) => typeof style === "string" ? r(style) : style
+    );
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.hasRecordedInitialProperties) {
+      this.constructor.elementProperties.forEach((object, property) => {
+        if (typeof property === "string" && object.reflect) {
+          const value = this[property];
+          if (value != null) {
+            this.initialReflectedProperties.set(property, value);
+          }
+        }
+      });
+      this.hasRecordedInitialProperties = true;
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    this.initialReflectedProperties.forEach((value, prop) => {
+      if (changedProperties.has(prop) && this[prop] == null) {
+        this[prop] = value;
+      }
+    });
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+  }
+};
+__decorateClass([
+  n4()
+], PlacerElement.prototype, "lang", 2);
+__decorateClass([
+  n4()
+], PlacerElement.prototype, "dir", 2);
+
+// node_modules/lit-html/directive.js
+var t5 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
+var e6 = (t6) => (...e8) => ({ _$litDirective$: t6, values: e8 });
+var i5 = class {
+  constructor(t6) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t6, e8, i6) {
+    this._$Ct = t6, this._$AM = e8, this._$Ci = i6;
+  }
+  _$AS(t6, e8) {
+    return this.update(t6, e8);
+  }
+  update(t6, e8) {
+    return this.render(...e8);
+  }
+};
+
+// node_modules/lit-html/directives/class-map.js
+var e7 = e6(class extends i5 {
+  constructor(t6) {
+    if (super(t6), t6.type !== t5.ATTRIBUTE || "class" !== t6.name || t6.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(t6) {
+    return " " + Object.keys(t6).filter(((s4) => t6[s4])).join(" ") + " ";
+  }
+  update(s4, [i6]) {
+    if (void 0 === this.st) {
+      this.st = /* @__PURE__ */ new Set(), void 0 !== s4.strings && (this.nt = new Set(s4.strings.join(" ").split(/\s/).filter(((t6) => "" !== t6))));
+      for (const t6 in i6) i6[t6] && !this.nt?.has(t6) && this.st.add(t6);
+      return this.render(i6);
+    }
+    const r6 = s4.element.classList;
+    for (const t6 of this.st) t6 in i6 || (r6.remove(t6), this.st.delete(t6));
+    for (const t6 in i6) {
+      const s5 = !!i6[t6];
+      s5 === this.st.has(t6) || this.nt?.has(t6) || (s5 ? (r6.add(t6), this.st.add(t6)) : (r6.remove(t6), this.st.delete(t6)));
+    }
+    return T;
+  }
+});
+
+// src/translations/index.ts
+var connectedElements = /* @__PURE__ */ new Set();
+var translations = /* @__PURE__ */ new Map();
+var fallback;
+var documentDirection = "ltr";
+var documentLanguage = "en";
+var isClient = typeof MutationObserver !== "undefined" && typeof document !== "undefined" && typeof document.documentElement !== "undefined";
+if (isClient) {
+  const documentElementObserver = new MutationObserver(update);
+  documentDirection = document.documentElement.dir || "ltr";
+  documentLanguage = document.documentElement.lang || navigator.language;
+  documentElementObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["dir", "lang"]
+  });
+}
+function registerTranslation(...translation2) {
+  translation2.map((t6) => {
+    const code = t6.$code.toLowerCase();
+    if (translations.has(code)) {
+      translations.set(code, { ...translations.get(code), ...t6 });
+    } else {
+      translations.set(code, t6);
+    }
+    if (!fallback) {
+      fallback = t6;
+    }
+  });
+  update();
+}
+function update() {
+  if (isClient) {
+    documentDirection = document.documentElement.dir || "ltr";
+    documentLanguage = document.documentElement.lang || navigator.language;
+  }
+  [...connectedElements.keys()].map((element) => {
+    if (element instanceof i4 && typeof element.requestUpdate === "function") {
+      element.requestUpdate();
+    }
+  });
+}
+var LocalizeController = class {
+  constructor(host) {
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    connectedElements.add(this.host);
+  }
+  hostDisconnected() {
+    connectedElements.delete(this.host);
+  }
+  /** Gets the host element’s direction as determined by the `dir` attribute. The returned value is lowercase. */
+  dir() {
+    return `${this.host.dir || documentDirection}`.toLowerCase();
+  }
+  /** Gets the host element’s language as determined by the `lang` attribute. The returned value is lowercase. */
+  lang() {
+    return `${this.host.lang || documentLanguage}`.toLowerCase();
+  }
+  getTranslationData(lang) {
+    const locale = new Intl.Locale(lang.replace(/_/g, "-"));
+    const language = locale?.language.toLowerCase();
+    const region = locale?.region?.toLowerCase() ?? "";
+    const primary = translations.get(`${language}-${region}`);
+    const secondary = translations.get(language);
+    return { locale, language, region, primary, secondary };
+  }
+  /** Determines if the specified term exists, optionally checking the fallback translation. */
+  exists(key, options) {
+    const { primary, secondary } = this.getTranslationData(
+      options.lang ?? this.lang()
+    );
+    options = {
+      includeFallback: false,
+      ...options
+    };
+    if (primary && primary[key] || secondary && secondary[key] || options.includeFallback && fallback && fallback[key]) {
+      return true;
+    }
+    return false;
+  }
+  /** Outputs a translated term. */
+  term(key, ...args) {
+    const { primary, secondary } = this.getTranslationData(this.lang());
+    let term;
+    if (primary && primary[key]) {
+      term = primary[key];
+    } else if (secondary && secondary[key]) {
+      term = secondary[key];
+    } else if (fallback && fallback[key]) {
+      term = fallback[key];
+    } else {
+      console.error(`No translation was found for \u201C${String(key)}\u201D.`);
+      return String(key);
+    }
+    if (typeof term === "function") {
+      return term(...args);
+    }
+    return term;
+  }
+  /** Outputs a localised date in the specified format. */
+  date(dateToFormat, options) {
+    dateToFormat = new Date(dateToFormat);
+    return new Intl.DateTimeFormat(this.lang(), options).format(
+      dateToFormat
+    );
+  }
+  /** Outputs a localised number in the specified format. */
+  number(numberToFormat, options) {
+    numberToFormat = Number(numberToFormat);
+    return isNaN(numberToFormat) ? "" : new Intl.NumberFormat(this.lang(), options).format(
+      numberToFormat
+    );
+  }
+  /** Outputs a localised time in relative format. */
+  relativeTime(value, unit, options) {
+    return new Intl.RelativeTimeFormat(this.lang(), options).format(
+      value,
+      unit
+    );
+  }
+};
+
+// src/translations/en.ts
+var translation = {
+  $code: "en",
+  $name: "English",
+  $dir: "ltr",
+  carousel: "Carousel",
+  clearEntry: "Clear entry",
+  close: "Close",
+  copied: "Copied!",
+  copy: "Copy",
+  currentValue: "Current value",
+  error: "Error",
+  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
+  hidePassword: "Hide password",
+  hue: "Hue",
+  loading: "Loading\u2026",
+  nextSlide: "Next slide",
+  numOptionsSelected: (number) => {
+    if (number === 0) {
+      return "No options selected";
+    } else if (number === 1) {
+      return "One option selected";
+    } else {
+      return `${number} options selected`;
+    }
+  },
+  opacity: "Opacity",
+  pickAColorFromTheScreen: "Pick a color from the screen",
+  previousSlide: "Previous slide",
+  progress: "Progress",
+  remove: "Remove",
+  resize: "Resize",
+  scrollableRegion: "Scrollable region",
+  scrollToEnd: "Scroll to end",
+  scrollToStart: "Scroll to start",
+  showPassword: "Show password",
+  slideNum: (slide) => `Slide ${slide}`,
+  toggleColorFormat: "Toggle color format"
+};
+registerTranslation(translation);
+var en_default = translation;
+
+// src/utilities/localize.ts
+var LocalizeController2 = class extends LocalizeController {
+};
+registerTranslation(en_default);
+
+// src/internal/offset.ts
+function getOffset(element, parent) {
+  return {
+    top: Math.round(
+      element.getBoundingClientRect().top - parent.getBoundingClientRect().top
+    ),
+    left: Math.round(
+      element.getBoundingClientRect().left - parent.getBoundingClientRect().left
+    )
+  };
+}
+
+// src/internal/scroll.ts
+function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+  if (direction === "horizontal" || direction === "both") {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({
+        left: offsetLeft - container.offsetWidth + element.clientWidth,
+        behavior
+      });
+    }
+  }
+  if (direction === "vertical" || direction === "both") {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({
+        top: offsetTop - container.offsetHeight + element.clientHeight,
+        behavior
+      });
+    }
+  }
+}
+
+// src/internal/watch.ts
+function watch(propertyName, options) {
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, decoratedFnName) => {
+    const { update: update2 } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](
+                oldValue,
+                newValue
+              );
+            }
+          }
+        }
+      });
+      update2.call(this, changedProps);
+    };
+  };
+}
+
+// src/internal/emit.ts
+function emit(target, eventName, eventDetail) {
+  const { detail, cancelable, ...options } = eventDetail || {};
+  const event = new CustomEvent(eventName, {
+    bubbles: true,
+    cancelable: cancelable !== void 0 ? cancelable : false,
+    composed: true,
+    detail,
+    ...options
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+// src/internal/scrollend-polyfill.ts
+var debounce = (fn, delay) => {
+  let timerId = 0;
+  return function(...args) {
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(() => {
+      fn.call(this, ...args);
+    }, delay);
+  };
+};
+var decorate = (proto, method, decorateFn) => {
+  const superFn = proto[method];
+  proto[method] = function(...args) {
+    superFn.call(this, ...args);
+    decorateFn.call(this, superFn, ...args);
+  };
+};
+(() => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const isSupported = "onscrollend" in window;
+  if (!isSupported) {
+    const pointers = /* @__PURE__ */ new Set();
+    const scrollHandlers = /* @__PURE__ */ new WeakMap();
+    const handlePointerDown = (event) => {
+      for (const touch of Array.from(event.changedTouches)) {
+        pointers.add(touch.identifier);
+      }
+    };
+    const handlePointerUp = (event) => {
+      for (const touch of Array.from(event.changedTouches)) {
+        pointers.delete(touch.identifier);
+      }
+    };
+    document.addEventListener("touchstart", handlePointerDown, true);
+    document.addEventListener("touchend", handlePointerUp, true);
+    document.addEventListener("touchcancel", handlePointerUp, true);
+    decorate(
+      EventTarget.prototype,
+      "addEventListener",
+      function(addEventListener, type) {
+        if (type !== "scrollend") return;
+        const handleScrollEnd = debounce(() => {
+          if (!pointers.size) {
+            this.dispatchEvent(new Event("scrollend"));
+          } else {
+            handleScrollEnd();
+          }
+        }, 100);
+        addEventListener.call(this, "scroll", handleScrollEnd, {
+          passive: true
+        });
+        scrollHandlers.set(this, handleScrollEnd);
+      }
+    );
+    decorate(
+      EventTarget.prototype,
+      "removeEventListener",
+      function(removeEventListener, type) {
+        if (type !== "scrollend") {
+          return;
+        }
+        const scrollHandler = scrollHandlers.get(this);
+        if (scrollHandler) {
+          removeEventListener.call(this, "scroll", scrollHandler, {
+            passive: true
+          });
+        }
+      }
+    );
+  }
+})();
+
+// node_modules/lit-html/directives/if-defined.js
+var o6 = (o7) => o7 ?? E;
+
+// src/internal/form.ts
+var formCollections = /* @__PURE__ */ new WeakMap();
+var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var checkValidityOverloads = /* @__PURE__ */ new WeakMap();
+var userInteractedControls = /* @__PURE__ */ new WeakSet();
+var interactions = /* @__PURE__ */ new WeakMap();
+var FormControlController = class {
+  constructor(host, options) {
+    this.handleFormData = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const name = this.options.name(this.host);
+      const value = this.options.value(this.host);
+      const isButton = this.host.tagName.toLowerCase() === "pc-button";
+      if (this.host.isConnected && !disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+        if (Array.isArray(value)) {
+          value.forEach((val) => {
+            event.formData.append(
+              name,
+              val.toString()
+            );
+          });
+        } else {
+          event.formData.append(
+            name,
+            value.toString()
+          );
+        }
+      }
+    };
+    this.handleFormSubmit = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const reportValidity = this.options.reportValidity;
+      if (this.form && !this.form.noValidate) {
+        formCollections.get(this.form)?.forEach((control) => {
+          this.setUserInteracted(control, true);
+        });
+      }
+      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleFormReset = () => {
+      this.options.setValue(this.host, this.options.defaultValue(this.host));
+      this.setUserInteracted(this.host, false);
+      interactions.set(this.host, []);
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = interactions.get(this.host);
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+        this.setUserInteracted(this.host, true);
+      }
+    };
+    this.checkFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.checkValidity === "function") {
+            if (!element.checkValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    this.reportFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.reportValidity === "function") {
+            if (!element.reportValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => {
+        const formID = input.form;
+        if (formID) {
+          const root = input.getRootNode();
+          const form = root.querySelector(`#${formID}`);
+          if (form) {
+            return form;
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => input.disabled ?? false,
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      checkValidity: (input) => typeof input.checkValidity === "function" ? input.checkValidity() : true,
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["pc-input"],
+      ...options
+    };
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(
+          this.form,
+          /* @__PURE__ */ new Set([this.host])
+        );
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(
+          this.form,
+          this.form.reportValidity
+        );
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+      if (!checkValidityOverloads.has(this.form)) {
+        checkValidityOverloads.set(this.form, this.form.checkValidity);
+        this.form.checkValidity = () => this.checkFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    if (!this.form) {
+      return;
+    }
+    const formCollection = formCollections.get(this.form);
+    if (!formCollection) {
+      return;
+    }
+    formCollection.delete(this.host);
+    if (formCollection.size <= 0) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(
+          this.form
+        );
+        reportValidityOverloads.delete(this.form);
+      }
+      if (checkValidityOverloads.has(this.form)) {
+        this.form.checkValidity = checkValidityOverloads.get(
+          this.form
+        );
+        checkValidityOverloads.delete(this.form);
+      }
+      this.form = void 0;
+    }
+  }
+  setUserInteracted(element, hasInteracted) {
+    if (hasInteracted) {
+      userInteractedControls.add(element);
+    } else {
+      userInteractedControls.delete(element);
+    }
+    element.requestUpdate();
+  }
+  doAction(type, submitter) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.inlineSize = "0";
+      button.style.blockSize = "0";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+        [
+          "formaction",
+          "formenctype",
+          "formmethod",
+          "formnovalidate",
+          "formtarget"
+        ].forEach((attribute) => {
+          if (submitter.hasAttribute(attribute)) {
+            button.setAttribute(
+              attribute,
+              submitter.getAttribute(attribute)
+            );
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    return this.form ?? null;
+  }
+  /** Resets the form, restoring all form controls to their default value. */
+  reset(submitter) {
+    this.doAction("reset", submitter);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(submitter) {
+    this.doAction("submit", submitter);
+  }
+  /** Synchronously sets the form control’s validity. Call this when you know the future validity state but need to update the host element immediately (i.e., before Lit updates the component in the next update). */
+  setValidity(isValid) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+    host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+  }
+  /** Updates the form control’s validity based on the current value of `host.validity.valid`. Call this when anything that affects constraint validation changes so the component receives the correct validity states. */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  /** Dispatches a non‐bubbling, cancellable custom event called `pc-invalid`. If the `pc-invalid` event will be cancelled, then the original `invalid` event (which may have been passed as an argument) will also be cancelled. If no original `invalid` event has been passed, then the `pc-invalid` event will be cancelled before being dispatched. */
+  emitInvalidEvent(originalInvalidEvent) {
+    const pcInvalidEvent = new CustomEvent(
+      "pc-invalid",
+      {
+        bubbles: false,
+        composed: false,
+        cancelable: true,
+        detail: {}
+      }
+    );
+    if (!originalInvalidEvent) {
+      pcInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(pcInvalidEvent)) {
+      originalInvalidEvent?.preventDefault();
+    }
+  }
+};
+var validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+var valueMissingValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  valueMissing: true
+});
+var customErrorValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  customError: true
+});
+
+// src/internal/slot.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return Array.from(this.host.childNodes).some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === "sl-visually-hidden") {
+          return false;
+        }
+        if (!element.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+};
+
+// src/styles/utilities/appearance.css
+var appearance_default = '@layer pc-utilities {\n    :where(:root),\n    :host([appearance="neutral"]) {\n        --pc-color-fill-loud: var(--pc-color-neutral-fill-loud);\n        --pc-color-fill-normal: var(--pc-color-neutral-fill-normal);\n        --pc-color-fill-quiet: var(--pc-color-neutral-fill-quiet);\n        --pc-color-border-loud: var(--pc-color-neutral-border-loud);\n        --pc-color-border-normal: var(--pc-color-neutral-border-normal);\n        --pc-color-border-quiet: var(--pc-color-neutral-border-quiet);\n        --pc-color-on-loud: var(--pc-color-neutral-on-loud);\n        --pc-color-on-normal: var(--pc-color-neutral-on-normal);\n        --pc-color-on-quiet: var(--pc-color-neutral-on-quiet);\n    }\n\n    :host([appearance="primary"]) {\n        --pc-color-fill-loud: var(--pc-color-primary-fill-loud);\n        --pc-color-fill-normal: var(--pc-color-primary-fill-normal);\n        --pc-color-fill-quiet: var(--pc-color-primary-fill-quiet);\n        --pc-color-border-loud: var(--pc-color-primary-border-loud);\n        --pc-color-border-normal: var(--pc-color-primary-border-normal);\n        --pc-color-border-quiet: var(--pc-color-primary-border-quiet);\n        --pc-color-on-loud: var(--pc-color-primary-on-loud);\n        --pc-color-on-normal: var(--pc-color-primary-on-normal);\n        --pc-color-on-quiet: var(--pc-color-primary-on-quiet);\n    }\n\n    :host([appearance="success"]) {\n        --pc-color-fill-loud: var(--pc-color-success-fill-loud);\n        --pc-color-fill-normal: var(--pc-color-success-fill-normal);\n        --pc-color-fill-quiet: var(--pc-color-success-fill-quiet);\n        --pc-color-border-loud: var(--pc-color-success-border-loud);\n        --pc-color-border-normal: var(--pc-color-success-border-normal);\n        --pc-color-border-quiet: var(--pc-color-success-border-quiet);\n        --pc-color-on-loud: var(--pc-color-success-on-loud);\n        --pc-color-on-normal: var(--pc-color-success-on-normal);\n        --pc-color-on-quiet: var(--pc-color-success-on-quiet);\n    }\n\n    :host([appearance="warning"]) {\n        --pc-color-fill-loud: var(--pc-color-warning-fill-loud);\n        --pc-color-fill-normal: var(--pc-color-warning-fill-normal);\n        --pc-color-fill-quiet: var(--pc-color-warning-fill-quiet);\n        --pc-color-border-loud: var(--pc-color-warning-border-loud);\n        --pc-color-border-normal: var(--pc-color-warning-border-normal);\n        --pc-color-border-quiet: var(--pc-color-warning-border-quiet);\n        --pc-color-on-loud: var(--pc-color-warning-on-loud);\n        --pc-color-on-normal: var(--pc-color-warning-on-normal);\n        --pc-color-on-quiet: var(--pc-color-warning-on-quiet);\n    }\n\n    :host([appearance="danger"]) {\n        --pc-color-fill-loud: var(--pc-color-danger-fill-loud);\n        --pc-color-fill-normal: var(--pc-color-danger-fill-normal);\n        --pc-color-fill-quiet: var(--pc-color-danger-fill-quiet);\n        --pc-color-border-loud: var(--pc-color-danger-border-loud);\n        --pc-color-border-normal: var(--pc-color-danger-border-normal);\n        --pc-color-border-quiet: var(--pc-color-danger-border-quiet);\n        --pc-color-on-loud: var(--pc-color-danger-on-loud);\n        --pc-color-on-normal: var(--pc-color-danger-on-normal);\n        --pc-color-on-quiet: var(--pc-color-danger-on-quiet);\n    }\n}\n';
+
+// src/styles/utilities/size.css
+var size_default = '@layer pc-utilities {\n    :host([size="small"]),\n    .pc-size-s {\n        font-size: var(--pc-font-size-s);\n    }\n\n    :host([size="medium"]),\n    .pc-size-m {\n        font-size: var(--pc-font-size-m);\n    }\n\n    :host([size="large"]),\n    .pc-size-l {\n        font-size: var(--pc-font-size-l);\n    }\n}\n';
+
+// src/components/button/button.css
+var button_default = ':host {\n    display: inline-block;\n    position: relative;\n}\n\n.button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: var(--pc-form-control-height);\n    background-color: var(--pc-color-fill-loud);\n    color: var(--pc-color-on-loud);\n    border: var(--pc-border-width-s) var(--pc-border-style) transparent;\n    border-radius: var(--pc-form-control-border-radius);\n    padding: 0 var(--pc-form-control-padding-inline);\n    box-sizing: border-box;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--pc-font-weight-bold);\n    line-height: calc(var(--pc-form-control-height) - var(--border-width) * 2);\n    vertical-align: middle;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: pointer;\n    text-align: center;\n    text-decoration: none;\n    transition: all var(--pc-transition-fast) ease-in-out;\n}\n\n.button::-moz-focus-inner {\n    border: 0;\n}\n\n.button:focus {\n    outline: none;\n}\n\n.button:focus-visible {\n    outline: var(--pc-focus-ring);\n    outline-offset: var(--pc-focus-ring-offset);\n    animation: focus-ring-animation var(--pc-transition-medium)\n        cubic-bezier(0.33, 1, 0.68, 1);\n}\n\n.prefix,\n.suffix {\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n}\n\n.prefix::slotted(*) {\n    margin-inline-end: 0.75em;\n}\n\n.suffix::slotted(*) {\n    margin-inline-start: 0.75em;\n}\n\n.label {\n    display: flex;\n    transition: color var(--pc-transition-fast) ease-in-out;\n}\n\n.label::slotted(pc-icon) {\n    align-self: center;\n}\n\n:host([pill]) .button {\n    border-radius: var(--pc-border-radius-pill);\n}\n\n.disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.disabled * {\n    pointer-events: none;\n}\n\n.icon-button {\n    aspect-ratio: 1 / 1;\n    inline-size: var(--pc-form-control-height);\n}\n\n:host([variant~="accent"]) {\n    .button {\n        background-color: var(--pc-color-fill-loud);\n        color: var(--pc-color-on-loud);\n        border-color: transparent;\n    }\n\n    @media (hover: hover) {\n        .button:not(.disabled):hover {\n            background-color: color-mix(\n                in oklab,\n                var(--pc-color-fill-loud),\n                var(--pc-color-mix-hover)\n            );\n        }\n    }\n\n    .button:not(.disabled):active {\n        background-color: color-mix(\n            in oklab,\n            var(--pc-color-fill-loud),\n            var(--pc-color-mix-active)\n        );\n    }\n}\n\n:host([variant~="outlined"]) {\n    .button {\n        background-color: transparent;\n        color: var(--pc-color-on-quiet);\n        border-color: var(--pc-color-border-loud);\n    }\n\n    @media (hover: hover) {\n        .button:not(.disabled):hover {\n            background-color: color-mix(\n                in oklab,\n                var(--pc-color-fill-quiet),\n                var(--pc-color-mix-hover)\n            );\n            color: var(--pc-color-on-quiet);\n        }\n    }\n\n    .button:not(.disabled):active {\n        background-color: color-mix(\n            in oklab,\n            var(--pc-color-fill-quiet),\n            var(--pc-color-mix-active)\n        );\n        color: var(--pc-color-on-quiet);\n    }\n}\n\n:host([variant~="filled"]) {\n    .button {\n        background-color: var(--pc-color-fill-normal);\n        color: var(--pc-color-on-normal);\n        border-color: transparent;\n    }\n\n    @media (hover: hover) {\n        .button:not(.disabled):hover {\n            background-color: color-mix(\n                in oklab,\n                var(--pc-color-fill-normal),\n                var(--pc-color-mix-hover)\n            );\n        }\n    }\n\n    .button:not(.disabled):active {\n        background-color: color-mix(\n            in oklab,\n            var(--pc-color-fill-normal),\n            var(--pc-color-mix-active)\n        );\n    }\n}\n\n:host([variant~="filled"][variant~="outlined"]) .button {\n    border-color: var(--pc-color-border-normal);\n}\n\n:host([variant~="plain"]) {\n    .button {\n        background-color: transparent;\n        color: var(--pc-color-on-quiet);\n        border-color: transparent;\n    }\n\n    @media (hover: hover) {\n        .button:not(.disabled):hover {\n            background-color: color-mix(\n                in oklab,\n                var(--pc-color-fill-quiet),\n                var(--pc-color-mix-hover)\n            );\n            color: var(--pc-color-on-quiet);\n        }\n    }\n\n    .button:not(.disabled):active {\n        background-color: color-mix(\n            in oklab,\n            var(--pc-color-fill-quiet),\n            var(--pc-color-mix-active)\n        );\n        color: var(--pc-color-on-quiet);\n    }\n}\n\n:host(\n        [data-pc-button-group-button-first]:not(\n            [data-pc-button-group-button-last]\n        )\n    )\n    .button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n:host([data-pc-button-group-button-inner]) .button {\n    border-radius: 0;\n}\n\n:host(\n        [data-pc-button-group-button-last]:not(\n            [data-pc-button-group-button-first]\n        )\n    )\n    .button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n}\n\n:host([data-pc-button-group-button]:not([data-pc-button-group-button-first])) {\n    margin-inline-start: calc(-1 * var(--pc-input-border-width));\n}\n\n:host([data-pc-button-group-button-hover]),\n:host([data-pc-button-group-button-focus]) {\n    z-index: 1;\n}\n\n:host([data-pc-button-group-button][checked]) {\n    z-index: 2;\n}\n\n@keyframes focus-ring-animation {\n    0% {\n        outline-width: 0;\n    }\n\n    50% {\n        outline-width: calc(var(--pc-focus-ring-width) * 2);\n    }\n\n    100% {\n        outline-width: var(--pc-focus-ring-width);\n    }\n}\n';
+
+// src/components/button/button.ts
+var PcButton = class extends PlacerElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["click"]
+    });
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "prefix",
+      "suffix"
+    );
+    this.hasFocus = false;
+    this.isIconButton = false;
+    this.invalid = false;
+    this.title = "";
+    this.appearance = "neutral";
+    this.variant = "accent";
+    this.size = "medium";
+    this.disabled = false;
+    this.pill = false;
+    this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  /** Gets the validity state object. */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message. */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+    this.handleLabelSlotChange();
+  }
+  handleClick() {
+    if (this.type === "submit") {
+      this.formControlController.submit();
+    }
+    if (this.type === "reset") {
+      this.formControlController.reset();
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    emit(this, "pc-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    emit(this, "pc-blur");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleLabelSlotChange() {
+    const nodes = this.labelSlot.assignedNodes({ flatten: true });
+    let hasIconLabel = false;
+    let hasIcon = false;
+    let hasText = false;
+    let hasOtherElements = false;
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        if (element.localName === "pc-icon") {
+          hasIcon = true;
+          if (!hasIconLabel) {
+            hasIconLabel = element.label !== void 0;
+          }
+        } else {
+          hasOtherElements = true;
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent?.trim() || "";
+        if (text.length > 0) {
+          hasText = true;
+        }
+      }
+    });
+    this.isIconButton = hasIcon && !hasText && !hasOtherElements;
+    if (this.isIconButton && !hasIconLabel) {
+      console.warn(
+        `<pc-icon> is missing an accessible label. Add a label attribute/property to help screen reader users. ${this}`
+      );
+    }
+  }
+  handleDisabledChange() {
+    if (this.isButton()) {
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Focuses the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Unfocuses the button (i.e., blurs it). */
+  blur() {
+    this.button.blur();
+  }
+  /** Checks for validity but doesn’t show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** Gets the associated form if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser’s validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return this.button.reportValidity();
+    }
+    return true;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    if (isLink) {
+      return x`
+                <a
+                    part="base"
+                    class=${e7({
+        "button": true,
+        "disabled": this.disabled,
+        "focused": this.hasFocus,
+        "icon-button": this.isIconButton,
+        "has-label": this.hasSlotController.test("[default]"),
+        "has-prefix": this.hasSlotController.test("prefix"),
+        "has-suffix": this.hasSlotController.test("suffix")
+      })}
+                    href=${o6(!this.disabled ? this.href : void 0)}
+                    target=${o6(this.target)}
+                    download=${o6(this.download)}
+                    rel=${o6(this.rel)}
+                    aria-disabled=${this.disabled ? "true" : "false"}
+                    tabindex=${this.disabled ? "-1" : "0"}
+                    @click=${this.handleClick}
+                    @focus=${this.handleFocus}
+                    @blur=${this.handleBlur}
+                >
+                    <slot class="prefix" part="prefix" name="prefix"></slot>
+                    <slot
+                        class="label"
+                        part="label"
+                        @slotchange=${this.handleLabelSlotChange}
+                    ></slot>
+                    <slot class="suffix" part="suffix" name="suffix"></slot>
+                </a>
+            `;
+    } else {
+      return x`
+                <button
+                    part="base"
+                    class=${e7({
+        "button": true,
+        "disabled": this.disabled,
+        "focused": this.hasFocus,
+        "icon-button": this.isIconButton,
+        "has-label": this.hasSlotController.test("[default]"),
+        "has-prefix": this.hasSlotController.test("prefix"),
+        "has-suffix": this.hasSlotController.test("suffix")
+      })}
+                    type=${this.type}
+                    title=${this.title}
+                    name=${this.name}
+                    value=${this.value}
+                    role="button"
+                    aria-disabled=${this.disabled ? "true" : "false"}
+                    tabindex=${this.disabled ? "-1" : "0"}
+                    @click=${this.handleClick}
+                    @focus=${this.handleFocus}
+                    @blur=${this.handleBlur}
+                    @invalid=${this.handleInvalid}
+                >
+                    <slot class="prefix" part="prefix" name="prefix"></slot>
+                    <slot
+                        class="label"
+                        part="label"
+                        @slotchange=${this.handleLabelSlotChange}
+                    ></slot>
+                    <slot class="suffix" part="suffix" name="suffix"></slot>
+                </button>
+            `;
+    }
+  }
+};
+/** @internal This is an internal static property. */
+PcButton.css = [appearance_default, size_default, button_default];
+__decorateClass([
+  e5(".button")
+], PcButton.prototype, "button", 2);
+__decorateClass([
+  e5("slot:not([name])")
+], PcButton.prototype, "labelSlot", 2);
+__decorateClass([
+  r5()
+], PcButton.prototype, "hasFocus", 2);
+__decorateClass([
+  r5()
+], PcButton.prototype, "isIconButton", 2);
+__decorateClass([
+  r5()
+], PcButton.prototype, "invalid", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "title", 2);
+__decorateClass([
+  n4({ reflect: true })
+], PcButton.prototype, "appearance", 2);
+__decorateClass([
+  n4({ reflect: true })
+], PcButton.prototype, "variant", 2);
+__decorateClass([
+  n4({ reflect: true })
+], PcButton.prototype, "size", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], PcButton.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], PcButton.prototype, "pill", 2);
+__decorateClass([
+  n4({ reflect: true })
+], PcButton.prototype, "type", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "name", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "value", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "href", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "target", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "rel", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "download", 2);
+__decorateClass([
+  n4()
+], PcButton.prototype, "form", 2);
+__decorateClass([
+  n4({ attribute: "formaction" })
+], PcButton.prototype, "formAction", 2);
+__decorateClass([
+  n4({ attribute: "formenctype" })
+], PcButton.prototype, "formEnctype", 2);
+__decorateClass([
+  n4({ attribute: "formmethod" })
+], PcButton.prototype, "formMethod", 2);
+__decorateClass([
+  n4({ attribute: "formnovalidate", type: Boolean })
+], PcButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  n4({ attribute: "formtarget" })
+], PcButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], PcButton.prototype, "handleDisabledChange", 1);
+PcButton = __decorateClass([
+  t3("pc-button")
+], PcButton);
+
+// src/components/resize-observer/resize-observer.css
+var resize_observer_default = ":host {\n    display: contents;\n}\n";
+
+// src/components/resize-observer/resize-observer.ts
+var PcResizeObserver = class extends PlacerElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(
+      (entries) => {
+        emit(this, "pc-resize", {
+          detail: { entries }
+        });
+      }
+    );
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({
+        flatten: true
+      });
+      this.observedElements.forEach(
+        (element) => this.resizeObserver.unobserve(element)
+      );
+      this.observedElements = [];
+      elements.forEach((element) => {
+        this.resizeObserver.observe(element);
+        this.observedElements.push(element);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return x`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+/** @internal This is an internal static property. */
+PcResizeObserver.css = resize_observer_default;
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], PcResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], PcResizeObserver.prototype, "handleDisabledChange", 1);
+PcResizeObserver = __decorateClass([
+  t3("pc-resize-observer")
+], PcResizeObserver);
+
+// src/components/tab-group/tab-group.css
+var tab_group_default = ":host {\n    --indicator-color: var(--pc-color-primary-fill-loud);\n    --track-width: 4px;\n\n    display: block;\n}\n\n.tab-group {\n    display: flex;\n    border-radius: 0;\n}\n\n.tabs {\n    display: flex;\n    position: relative;\n}\n\n.indicator {\n    position: absolute;\n    transition: all var(--pc-transition-medium) ease-in-out;\n}\n\n.has-scroll-controls .navigation-container {\n    position: relative;\n    padding-inline: calc(var(--pc-spacing-xxxl) + var(--pc-spacing-xs));\n}\n\n.has-scroll-controls .scroll-button-start-hidden,\n.has-scroll-controls .scroll-button-end-hidden {\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n}\n\n.navigation-container,\n.navigation {\n    outline: none;\n}\n\n.body {\n    display: block;\n}\n\n.scroll-button {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    justify-content: center;\n    inset-block: 0;\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transition:\n        opacity var(--pc-transition-fast) ease-in-out,\n        visibility 0s ease-in-out var(--pc-transition-fast);\n}\n\n.scroll-button-start {\n    inset-inline-start: 0;\n}\n\n.scroll-button-end {\n    inset-inline-end: 0;\n}\n\n.is-rtl .scroll-button-start {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n}\n\n.is-rtl .scroll-button-end {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n}\n\n.top {\n    flex-direction: column;\n}\n\n.top .navigation-container {\n    order: 1;\n}\n\n.top .navigation {\n    display: flex;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.top .navigation::-webkit-scrollbar {\n    inline-size: 0;\n    block-size: 0;\n}\n\n.top .tabs {\n    position: relative;\n    flex-direction: row;\n    flex: 1 1 auto;\n}\n\n.top .indicator {\n    inset-block-end: 0;\n    min-block-size: var(--track-width);\n    background-color: var(--indicator-color);\n    border-radius: var(--pc-border-radius-pill);\n}\n\n.top .body {\n    order: 2;\n}\n\n.top ::slotted(pc-tab-panel) {\n    padding-block: var(--pc-spacing-m);\n}\n\n.bottom {\n    flex-direction: column;\n}\n\n.bottom .navigation-container {\n    order: 2;\n}\n\n.bottom .navigation {\n    display: flex;\n    overflow-x: auto;\n    scrollbar-width: none;\n}\n\n.bottom .tabs {\n    position: relative;\n    flex-direction: row;\n    flex: 1 1 auto;\n}\n\n.bottom .indicator {\n    inset-block-start: 0;\n    min-block-size: var(--track-width);\n    background-color: var(--indicator-color);\n    border-radius: var(--pc-border-radius-pill);\n}\n\n.bottom .body {\n    order: 1;\n}\n\n.bottom ::slotted(pc-tab-panel) {\n    padding-block: var(--pc-spacing-m);\n}\n\n.start {\n    flex-direction: row;\n}\n\n.start .navigation-container {\n    order: 1;\n}\n\n.start .tabs {\n    flex-direction: column;\n    flex: 0 0 auto;\n}\n\n.start .indicator {\n    inset-inline-end: calc(-1 * var(--track-width));\n    min-inline-size: var(--track-width);\n    background-color: var(--indicator-color);\n    border-radius: var(--pc-border-radius-pill);\n}\n\n.start .body {\n    flex: 1 1 auto;\n    order: 2;\n}\n\n.start ::slotted(pc-tab-panel) {\n    padding: 0 var(--pc-spacing-m);\n}\n\n.end {\n    flex-direction: row;\n}\n\n.end .navigation-container {\n    order: 2;\n}\n\n.end .tabs {\n    flex-direction: column;\n    flex: 0 0 auto;\n}\n\n.end .indicator {\n    inset-inline-start: calc(-1 * var(--track-width));\n    min-inline-size: var(--track-width);\n    background-color: var(--indicator-color);\n    border-radius: var(--pc-border-radius-pill);\n}\n\n.end.is-rtl .indicator {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n}\n\n.end .body {\n    flex: 1 1 auto;\n    order: 1;\n}\n\n.end ::slotted(pc-tab-panel) {\n    padding-inline: var(--pc-spacing-m);\n}\n";
+
+// src/components/tab-group/tab-group.ts
+var PcTabGroup = class extends PlacerElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController2(this);
+    this.tabs = [];
+    this.focusableTabs = [];
+    this.panels = [];
+    this.hasScrollControls = false;
+    this.shouldHideScrollStartButton = false;
+    this.shouldHideScrollEndButton = false;
+    this.placement = "top";
+    this.activation = "auto";
+    this.noScrollControls = false;
+    this.fixedScrollControls = false;
+    this.scrollOffset = 1;
+  }
+  connectedCallback() {
+    const whenAllDefined = Promise.all([
+      customElements.whenDefined("pc-tab"),
+      customElements.whenDefined("pc-tab-panel")
+    ]);
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.repositionIndicator();
+      this.updateScrollControls();
+    });
+    this.mutationObserver = new MutationObserver((mutations) => {
+      const instanceMutations = mutations.filter(({ target }) => {
+        if (target === this) {
+          return true;
+        }
+        if (target.closest("pc-tab-group") !== this) {
+          return false;
+        }
+        const tagName = target.tagName.toLowerCase();
+        return tagName === "pc-tab" || tagName === "pc-tab-panel";
+      });
+      if (instanceMutations.length === 0) {
+        return;
+      }
+      if (instanceMutations.some(
+        (mutation) => !["aria-labelledby", "aria-controls"].includes(
+          mutation.attributeName
+        )
+      )) {
+        setTimeout(() => this.setAriaLabels());
+      }
+      if (instanceMutations.some(
+        (mutation) => mutation.attributeName === "disabled"
+      )) {
+        this.syncTabsAndPanels();
+      } else if (instanceMutations.some(
+        (mutation) => mutation.attributeName === "active"
+      )) {
+        const tabs = instanceMutations.filter(
+          (mutation) => mutation.attributeName === "active" && mutation.target.tagName.toLowerCase() === "pc-tab"
+        ).map((mutation) => mutation.target);
+        const newActiveTab = tabs.find((tab) => tab.active);
+        if (newActiveTab) {
+          this.setActiveTab(newActiveTab);
+        }
+      }
+    });
+    this.updateComplete.then(() => {
+      this.syncTabsAndPanels();
+      this.mutationObserver.observe(this, {
+        attributes: true,
+        attributeFilter: ["active", "disabled", "name", "panel"],
+        childList: true,
+        subtree: true
+      });
+      this.resizeObserver.observe(this.navigation);
+      whenAllDefined.then(() => {
+        const intersectionObserver = new IntersectionObserver(
+          (entries, observer) => {
+            if (entries[0].intersectionRatio > 0) {
+              this.setAriaLabels();
+              this.setActiveTab(
+                this.getActiveTab() ?? this.tabs[0],
+                { emitEvents: false }
+              );
+              observer.unobserve(entries[0].target);
+            }
+          }
+        );
+        intersectionObserver.observe(this.tabGroup);
+      });
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    if (this.navigation) {
+      this.resizeObserver?.unobserve(this.navigation);
+    }
+  }
+  getAllTabs() {
+    const slot = this.shadowRoot.querySelector(
+      'slot[name="navigation"]'
+    );
+    return slot.assignedElements();
+  }
+  getAllPanels() {
+    return [...this.body.assignedElements()].filter(
+      (element) => element.tagName.toLowerCase() === "pc-tab-panel"
+    );
+  }
+  getActiveTab() {
+    return this.tabs.find((element) => element.active);
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tab = target.closest("pc-tab");
+    const tabGroup = tab?.closest("pc-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (tab !== null) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tab = target.closest("pc-tab");
+    const tabGroup = tab?.closest("pc-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (["Enter", " "].includes(event.key)) {
+      if (tab !== null) {
+        this.setActiveTab(tab, { scrollBehavior: "smooth" });
+        event.preventDefault();
+      }
+    }
+    if ([
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      const activeElement = this.tabs.find(
+        (tab2) => tab2.matches(":focus")
+      );
+      const isRTL = this.localize.dir() === "rtl";
+      let nextTab = null;
+      if (activeElement?.tagName.toLowerCase() === "pc-tab") {
+        if (event.key === "Home") {
+          nextTab = this.focusableTabs[0];
+        } else if (event.key === "End") {
+          nextTab = this.focusableTabs[this.focusableTabs.length - 1];
+        } else if (["top", "bottom"].includes(this.placement) && event.key === (isRTL ? "ArrowRight" : "ArrowLeft") || ["start", "end"].includes(this.placement) && event.key === "ArrowUp") {
+          const currentIndex = this.tabs.findIndex(
+            (element) => element === activeElement
+          );
+          nextTab = this.findNextFocusableTab(
+            currentIndex,
+            "backward"
+          );
+        } else if (["top", "bottom"].includes(this.placement) && event.key === (isRTL ? "ArrowLeft" : "ArrowRight") || ["start", "end"].includes(this.placement) && event.key === "ArrowDown") {
+          const currentIndex = this.tabs.findIndex(
+            (element) => element === activeElement
+          );
+          nextTab = this.findNextFocusableTab(
+            currentIndex,
+            "forward"
+          );
+        }
+        if (!nextTab) {
+          return;
+        }
+        nextTab.tabIndex = 0;
+        nextTab.focus({ preventScroll: true });
+        if (this.activation === "auto") {
+          this.setActiveTab(nextTab, { scrollBehavior: "smooth" });
+        } else {
+          this.tabs.forEach((tabElement) => {
+            tabElement.tabIndex = tabElement === nextTab ? 0 : -1;
+          });
+        }
+        if (["top", "bottom"].includes(this.placement)) {
+          scrollIntoView(nextTab, this.navigation, "horizontal");
+        }
+        event.preventDefault();
+      }
+    }
+  }
+  handleScrollToStart() {
+    this.navigation.scroll({
+      left: this.localize.dir() === "rtl" ? this.navigation.scrollLeft + this.navigation.clientWidth : this.navigation.scrollLeft - this.navigation.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  handleScrollToEnd() {
+    this.navigation.scroll({
+      left: this.localize.dir() === "rtl" ? this.navigation.scrollLeft - this.navigation.clientWidth : this.navigation.scrollLeft + this.navigation.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  setActiveTab(tab, options) {
+    options = {
+      emitEvents: true,
+      scrollBehavior: "auto",
+      ...options
+    };
+    if (tab !== this.activeTab && !tab.disabled) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+      this.tabs.forEach((element) => {
+        element.active = element === this.activeTab;
+        element.tabIndex = element === this.activeTab ? 0 : -1;
+      });
+      this.panels.forEach(
+        (element) => element.active = element.name === this.activeTab?.panel
+      );
+      this.syncIndicator();
+      if (["top", "bottom"].includes(this.placement)) {
+        scrollIntoView(
+          this.activeTab,
+          this.navigation,
+          "horizontal",
+          options.scrollBehavior
+        );
+      }
+      if (options.emitEvents) {
+        if (previousTab) {
+          emit(this, "pc-tab-hide", {
+            detail: { name: previousTab.panel }
+          });
+        }
+        emit(this, "pc-tab-show", {
+          detail: { name: this.activeTab.panel }
+        });
+      }
+    }
+  }
+  setAriaLabels() {
+    this.tabs.forEach((tab) => {
+      const panel = this.panels.find(
+        (element) => element.name === tab.panel
+      );
+      if (panel) {
+        tab.setAttribute("aria-controls", panel.getAttribute("id"));
+        panel.setAttribute("aria-labelledby", tab.getAttribute("id"));
+      }
+    });
+  }
+  repositionIndicator() {
+    const currentTab = this.getActiveTab();
+    if (!currentTab) {
+      return;
+    }
+    const width = currentTab.clientWidth;
+    const height = currentTab.clientHeight;
+    const isRTL = this.localize.dir() === "rtl";
+    const allTabs = this.getAllTabs();
+    const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
+    const offset = precedingTabs.reduce(
+      (previous, current) => ({
+        left: previous.left + current.clientWidth,
+        top: previous.top + current.clientHeight
+      }),
+      { left: 0, top: 0 }
+    );
+    switch (this.placement) {
+      case "top":
+      case "bottom":
+        this.indicator.style.inlineSize = `${width}px`;
+        this.indicator.style.blockSize = "auto";
+        this.indicator.style.translate = isRTL ? `${-1 * offset.left}px` : `${offset.left}px`;
+        break;
+      case "start":
+      case "end":
+        this.indicator.style.inlineSize = "auto";
+        this.indicator.style.blockSize = `${height}px`;
+        this.indicator.style.translate = `0 ${offset.top}px`;
+        break;
+    }
+  }
+  syncTabsAndPanels() {
+    this.tabs = this.getAllTabs();
+    this.focusableTabs = this.tabs.filter((el) => !el.disabled);
+    this.panels = this.getAllPanels();
+    this.syncIndicator();
+    this.updateComplete.then(() => this.updateScrollControls());
+  }
+  findNextFocusableTab(currentIndex, direction) {
+    let nextTab = null;
+    const iterator = direction === "forward" ? 1 : -1;
+    let nextIndex = currentIndex + iterator;
+    while (currentIndex < this.tabs.length) {
+      nextTab = this.tabs[nextIndex] || null;
+      if (nextTab === null) {
+        if (direction === "forward") {
+          nextTab = this.focusableTabs[0];
+        } else {
+          nextTab = this.focusableTabs[this.focusableTabs.length - 1];
+        }
+        break;
+      }
+      if (!nextTab.disabled) {
+        break;
+      }
+      nextIndex += iterator;
+    }
+    return nextTab;
+  }
+  updateScrollButtons() {
+    if (this.hasScrollControls && !this.fixedScrollControls) {
+      this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset;
+      this.shouldHideScrollEndButton = this.isScrolledToEnd();
+    }
+  }
+  isScrolledToEnd() {
+    return this.scrollFromStart() + this.navigation.clientWidth >= this.navigation.scrollWidth - this.scrollOffset;
+  }
+  scrollFromStart() {
+    return this.localize.dir() === "rtl" ? -this.navigation.scrollLeft : this.navigation.scrollLeft;
+  }
+  updateScrollControls() {
+    if (this.noScrollControls) {
+      this.hasScrollControls = false;
+    } else {
+      this.hasScrollControls = ["top", "bottom"].includes(this.placement) && this.navigation.scrollWidth > this.navigation.clientWidth + 1;
+    }
+    this.updateScrollButtons();
+  }
+  syncIndicator() {
+    const tab = this.getActiveTab();
+    if (tab) {
+      this.indicator.style.display = "block";
+      this.repositionIndicator();
+    } else {
+      this.indicator.style.display = "none";
+    }
+  }
+  /** Shows the specified tab panel. */
+  show(panel) {
+    const tab = this.tabs.find((element) => element.panel === panel);
+    if (tab) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  render() {
+    const isRTL = this.localize.dir() === "rtl";
+    return x`
+            <div
+                part="base"
+                class=${e7({
+      "tab-group": true,
+      "top": this.placement === "top",
+      "bottom": this.placement === "bottom",
+      "start": this.placement === "start",
+      "end": this.placement === "end",
+      "is-rtl": isRTL,
+      "has-scroll-controls": this.hasScrollControls
+    })}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <div class="navigation-container" part="navigation">
+                    ${this.hasScrollControls ? x`
+                              <pc-button
+                                  part="scroll-button scroll-button-start"
+                                  class=${e7({
+      "scroll-button": true,
+      "scroll-button-start": true,
+      "scroll-button-start-hidden": this.shouldHideScrollStartButton
+    })}
+                                  size="small"
+                                  variant="plain"
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  @click=${this.handleScrollToStart}
+                                  exportparts="base:scroll-button__base"
+                              >
+                                  <pc-icon
+                                      library="system"
+                                      icon-style="solid"
+                                      name=${isRTL ? "chevron-right" : "chevron-left"}
+                                      label=${this.localize.term(
+      "scrollToStart"
+    )}
+                                  ></pc-icon>
+                              </pc-button>
+                          ` : ""}
+
+                    <div
+                        class="navigation"
+                        @scrollend=${this.updateScrollButtons}
+                    >
+                        <div part="tabs" class="tabs" role="tablist">
+                            <div
+                                class="indicator"
+                                part="active-tab-indicator"
+                            ></div>
+                            <pc-resize-observer
+                                @pc-resize=${this.syncIndicator}
+                            >
+                                <slot
+                                    name="navigation"
+                                    @slotchange=${this.syncTabsAndPanels}
+                                ></slot>
+                            </pc-resize-observer>
+                        </div>
+                    </div>
+
+                    ${this.hasScrollControls ? x`
+                              <pc-button
+                                  part="scroll-button scroll-button-end"
+                                  class=${e7({
+      "scroll-button": true,
+      "scroll-button-end": true,
+      "scroll-button-end-hidden": this.shouldHideScrollEndButton
+    })}
+                                  size="small"
+                                  variant="plain"
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  @click=${this.handleScrollToEnd}
+                                  exportparts="base:scroll-button__base"
+                              >
+                                  <pc-icon
+                                      library="system"
+                                      icon-style="solid"
+                                      name=${isRTL ? "chevron-left" : "chevron-right"}
+                                      label=${this.localize.term("scrollToEnd")}
+                                  ></pc-icon>
+                              </pc-button>
+                          ` : ""}
+                </div>
+
+                <slot
+                    class="body"
+                    part="body"
+                    @slotchange=${this.syncTabsAndPanels}
+                ></slot>
+            </div>
+        `;
+  }
+};
+/** @internal This is an internal static property. */
+PcTabGroup.css = tab_group_default;
+/** @internal This is an internal static property. */
+PcTabGroup.dependencies = {
+  "pc-button": PcButton,
+  "pc-resize-observer": PcResizeObserver
+};
+__decorateClass([
+  e5(".tab-group")
+], PcTabGroup.prototype, "tabGroup", 2);
+__decorateClass([
+  e5(".body")
+], PcTabGroup.prototype, "body", 2);
+__decorateClass([
+  e5(".navigation")
+], PcTabGroup.prototype, "navigation", 2);
+__decorateClass([
+  e5(".indicator")
+], PcTabGroup.prototype, "indicator", 2);
+__decorateClass([
+  r5()
+], PcTabGroup.prototype, "hasScrollControls", 2);
+__decorateClass([
+  r5()
+], PcTabGroup.prototype, "shouldHideScrollStartButton", 2);
+__decorateClass([
+  r5()
+], PcTabGroup.prototype, "shouldHideScrollEndButton", 2);
+__decorateClass([
+  n4()
+], PcTabGroup.prototype, "placement", 2);
+__decorateClass([
+  n4()
+], PcTabGroup.prototype, "activation", 2);
+__decorateClass([
+  n4({ attribute: "no-scroll-controls", type: Boolean })
+], PcTabGroup.prototype, "noScrollControls", 2);
+__decorateClass([
+  n4({ attribute: "fixed-scroll-controls", type: Boolean })
+], PcTabGroup.prototype, "fixedScrollControls", 2);
+__decorateClass([
+  t4({ passive: true })
+], PcTabGroup.prototype, "updateScrollButtons", 1);
+__decorateClass([
+  watch("noScrollControls", { waitUntilFirstUpdate: true })
+], PcTabGroup.prototype, "updateScrollControls", 1);
+__decorateClass([
+  watch("placement", { waitUntilFirstUpdate: true })
+], PcTabGroup.prototype, "syncIndicator", 1);
+PcTabGroup = __decorateClass([
+  t3("pc-tab-group")
+], PcTabGroup);
+export {
+  PcTabGroup
+};
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+lit-html/lit-html.js:
+lit-element/lit-element.js:
+@lit/reactive-element/decorators/custom-element.js:
+@lit/reactive-element/decorators/property.js:
+@lit/reactive-element/decorators/state.js:
+@lit/reactive-element/decorators/event-options.js:
+@lit/reactive-element/decorators/base.js:
+@lit/reactive-element/decorators/query.js:
+@lit/reactive-element/decorators/query-all.js:
+@lit/reactive-element/decorators/query-async.js:
+@lit/reactive-element/decorators/query-assigned-nodes.js:
+lit-html/directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-elements.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/class-map.js:
+lit-html/directives/if-defined.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/