npm - @startnext/chrome - Versions diffs - 0.1.12 → 0.3.0 - Mend

@startnext/chrome 0.1.12 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +102 -18
package/dist/components/base/BaseComponent.d.ts +2 -0
package/dist/components/base/BaseComponent.d.ts.map +1 -1
package/dist/components/base/icons.d.ts.map +1 -1
package/dist/components/footer/StartnextFooter.d.ts +12 -1
package/dist/components/footer/StartnextFooter.d.ts.map +1 -1
package/dist/components/header/StartnextHeader.d.ts +7 -1
package/dist/components/header/StartnextHeader.d.ts.map +1 -1
package/dist/components/header/header.css.d.ts +1 -1
package/dist/components/header/header.css.d.ts.map +1 -1
package/dist/components/header/header.template.d.ts +4 -0
package/dist/components/header/header.template.d.ts.map +1 -1
package/dist/data/defaults.d.ts +12 -0
package/dist/data/defaults.d.ts.map +1 -0
package/dist/data/uiStrings.d.ts +4 -0
package/dist/data/uiStrings.d.ts.map +1 -0
package/dist/index.d.ts +5 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2 -2
package/dist/index.umd.js +2 -2
package/dist/render.d.ts +52 -0
package/dist/render.d.ts.map +1 -0
package/dist/render.js +7 -0
package/dist/types/index.d.ts +4 -0
package/dist/types/index.d.ts.map +1 -1
package/package.json +18 -9

package/README.md CHANGED Viewed

@@ -49,6 +49,11 @@ import '@startnext/chrome';
 | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkle Seite, heller Header). Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
 | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
 | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher |
+| `hide-login` | `boolean` | `false` | Versteckt den Login/Avatar-Button |
+| `show-back-link` | `boolean` | `false` | Zeigt einen "Zurueck zu Startnext"-Link (Text kommt von der API) |
+| `back-url` | `string` | - | Ueberschreibt die Back-Link-URL |
+| `back-label` | `string` | - | Ueberschreibt den Back-Link-Text |
+| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten aus Notion |
 **Events:**
@@ -94,6 +99,17 @@ import '@startnext/chrome';
 </html>
 ```
+```html
+<!-- Embedded / Microservice-Modus: Login ausblenden, Back-Link anzeigen -->
+<startnext-header
+  hide-login
+  show-back-link
+  back-url="https://www.startnext.com"
+  back-label="Zurueck zu Startnext"
+  api-url="https://scs-api.vercel.app"
+></startnext-header>
+```
 ```javascript
 const header = document.querySelector('startnext-header');
@@ -103,8 +119,9 @@ header.addEventListener('navigation-click', (e) => {
 });
 header.addEventListener('language-change', (e) => {
-  // Sprache auch im Footer synchronisieren
-  document.querySelector('startnext-footer').setAttribute('lang', e.detail.language);
+  // Footer synchronisiert Sprache automatisch (lang-sync ist default true).
+  // Manuelle Synchronisation nur noetig wenn lang-sync="false" gesetzt ist:
+  // document.querySelector('startnext-footer').setAttribute('lang', e.detail.language);
 });
 header.addEventListener('logout', () => {
@@ -124,6 +141,8 @@ header.addEventListener('color-mode-change', (e) => {
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `lang` | `string` | `'de'` | Sprache (`'de'`, `'en'`) |
+| `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten |
+| `lang-sync` | `boolean` | `true` | Synchronisiert Sprache automatisch wenn der Header ein `language-change` Event emittiert. Mit `lang-sync="false"` deaktivieren |
 **Events:**
@@ -166,11 +185,70 @@ startnext-header, startnext-footer {
 }
 ```
+## Server-Side Rendering (SSR)
+Das Paket exportiert einen server-sicheren Subpath `@startnext/chrome/render` mit reinen String-Funktionen (keine Browser-Abhaengigkeiten). Damit kann der API-Server fertig gerendertes HTML per Declarative Shadow DOM erzeugen.
+### Render Entry Point
+```javascript
+import {
+  renderHeader, renderBurgerItems, renderUserItems,
+  renderFooter,
+  headerCSS, footerCSS,
+  renderHeaderCrawlerNav, renderFooterCrawlerNav,
+  toHeaderRenderData, toFooterRenderData,
+  getUiString, getIcon,
+} from '@startnext/chrome/render';
+```
+### Exports
+| Export | Beschreibung |
+|--------|-------------|
+| `renderHeader(props)` | Header Shadow DOM HTML |
+| `renderBurgerItems(data, expandedSections)` | Burger-Menue Items HTML |
+| `renderUserItems(data, expandedSections)` | User-Menue Items HTML |
+| `renderFooter(data)` | Footer Shadow DOM HTML |
+| `headerCSS`, `footerCSS`, `resetCSS` | CSS als Strings |
+| `getIcon(name, size?)` | SVG-Icon als String |
+| `getUiString(key, lang)` | UI-String (ARIA Labels etc.) |
+| `toHeaderRenderData(apiData)` | API-Daten → HeaderData (fuegt stub `theme` hinzu) |
+| `toFooterRenderData(apiData)` | API-Daten → FooterData (fuegt stub `theme` hinzu) |
+| `renderHeaderCrawlerNav(data)` | Crawler-`<nav>` fuer Header (Light DOM, SEO) |
+| `renderFooterCrawlerNav(data)` | Crawler-`<nav>` fuer Footer (Light DOM, SEO) |
+### Hydration
+Wenn der Server HTML mit Declarative Shadow DOM (`<template shadowrootmode="open">`) liefert, erkennt die Web Component den bestehenden `shadowRoot` und **hydriert** statt neu zu rendern:
+1. Browser parst DSD → `shadowRoot` existiert vor dem Custom-Element-Constructor
+2. `BaseComponent` erkennt bestehenden `shadowRoot`, setzt `isHydrating = true`
+3. `render()` ueberspringt `innerHTML`, ruft nur `attachEvents()` auf
+4. `connectedCallback()` erkennt bestehenden `[data-crawler-nav]`, ueberspringt `renderLightDomNav()`
+5. `loadApiData()` holt frische Daten → loest danach ein vollstaendiges Re-Render aus
+```html
+<!-- Server liefert fertiges HTML -->
+<startnext-header lang="de" light large-animation>
+  <template shadowrootmode="open">
+    <style>/* headerCSS */</style>
+    <div><!-- Shadow DOM HTML --></div>
+  </template>
+  <nav data-crawler-nav aria-hidden="true" style="display:none">
+    <!-- SEO-Links -->
+  </nav>
+</startnext-header>
+<!-- JS hydriert automatisch -->
+<script type="module" src="@startnext/chrome"></script>
+```
 ## Browser Support
-- Chrome/Edge 90+
-- Firefox 88+
-- Safari 14+
+- Chrome/Edge 90+ (Declarative Shadow DOM: Chrome 90+, Firefox 123+, Safari 16.4+)
+- Firefox 88+ (123+ fuer SSR/Hydration)
+- Safari 14+ (16.4+ fuer SSR/Hydration)
 ## Development
@@ -188,7 +266,7 @@ pnpm --filter @startnext/chrome build
 pnpm --filter @startnext/chrome lint
 ```
-Demo-Seite öffnen: `packages/sn-chrome-web-component/examples/vanilla/index.html`
+Demo-Seite oeffnen: `demo/index.html`
 ## Architecture
@@ -198,36 +276,42 @@ Jede Component ist modular in drei Dateien aufgeteilt:
 src/
 ├── components/
 │   ├── base/
-│   │   ├── BaseComponent.ts    # Abstrakte Basis (Shadow DOM, Events, Theming)
+│   │   ├── BaseComponent.ts    # Abstrakte Basis (Shadow DOM, DSD-Hydration, Events, Theming)
 │   │   ├── icons.ts            # SVG-Icon-Registry
 │   │   └── styles.ts           # Shared Reset-CSS
 │   ├── header/
-│   │   ├── StartnextHeader.ts  # Logik (Scroll, Drawers, Lottie, Events)
+│   │   ├── StartnextHeader.ts  # Logik (Scroll, Drawers, Lottie, Events, Hydration)
 │   │   ├── header.css.ts       # CSS als Template-Literal-Export
 │   │   └── header.template.ts  # Render-Funktionen (HTML-Strings)
 │   └── footer/
-│       ├── StartnextFooter.ts  # Logik (Render, Events)
+│       ├── StartnextFooter.ts  # Logik (Render, Events, Hydration)
 │       ├── footer.css.ts       # CSS als Template-Literal-Export
 │       └── footer.template.ts  # Render-Funktion (HTML-String)
 ├── data/
-│   └── mockData.ts             # Mock-Daten
+│   ├── mockData.ts             # Mock-Daten
+│   └── uiStrings.ts            # UI-Strings (ARIA Labels, de/en)
 ├── types/
 │   └── index.ts                # Alle TypeScript-Interfaces
-└── index.ts                    # Barrel-Export
+├── index.ts                    # Browser-Entry (Custom Elements registrieren)
+└── render.ts                   # Server-Entry (reine String-Funktionen, kein Browser)
 ```
 **Konventionen:**
-- CSS in `*.css.ts` als exportierter Template-Literal-String (kein extra Build-Plugin nötig)
-- Templates in `*.template.ts` als reine Funktionen die HTML-Strings zurückgeben
-- Logik in der Hauptdatei: Event-Handling, State, Lifecycle
-- BEM-Naming für CSS-Klassen (`headbar__left`, `drawer__item--highlighted`)
-- Shadow DOM (open mode), kein Virtual DOM
+- CSS in `*.css.ts` als exportierter Template-Literal-String (kein extra Build-Plugin noetig)
+- Templates in `*.template.ts` als reine Funktionen die HTML-Strings zurueckgeben (server-safe)
+- Logik in der Hauptdatei: Event-Handling, State, Lifecycle, Hydration
+- BEM-Naming fuer CSS-Klassen (`headbar__left`, `drawer__item--highlighted`)
+- Shadow DOM (open mode), kein Virtual DOM, Declarative Shadow DOM fuer SSR
+**Zwei Entry Points:**
+- `src/index.ts` → `dist/index.js` (ESM) + `dist/index.umd.js` (UMD) — Browser, registriert Custom Elements
+- `src/render.ts` → `dist/render.js` (ESM) — Server, reine String-Funktionen ohne Browser-Abhaengigkeiten
 ## Monorepo Structure
 ```
 packages/
-  scs-web-component/   ← this package
-  scs-api/             ← Express API service
+  scs-web-component/   ← dieses Paket
+  scs-api/             ← Express API Service (nutzt @startnext/chrome/render fuer SSR)
 ```

package/dist/components/base/BaseComponent.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import type { ThemeVariables } from '../../types/index.js';
  */
 export declare abstract class BaseComponent extends HTMLElement {
     protected shadow: ShadowRoot;
+    /** True when Declarative Shadow DOM was present — first render should hydrate, not replace. */
+    protected isHydrating: boolean;
     constructor();
     /** Emit a typed CustomEvent that bubbles and is composed (crosses shadow DOM). */
     protected emit<T>(name: string, detail: T): boolean;

package/dist/components/base/BaseComponent.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;;~~IAO7B~~,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAM9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;CAKrD"}
1	+ {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;IAE7B,+FAA+F;IAC/F,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC;;IAU/B,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAM9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;CAKrD"}

package/dist/components/base/icons.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/base/icons.ts"],"names":[],"mappings":"~~AA4CA~~,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,~~CAgCxC~~,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAM3D"}
1	+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/base/icons.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkCxC,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAM3D"}

package/dist/components/footer/StartnextFooter.d.ts CHANGED Viewed

@@ -2,10 +2,21 @@ import { BaseComponent } from '../base/BaseComponent.js';
 export declare class StartnextFooter extends BaseComponent {
     static observedAttributes: string[];
     private data;
+    /** Cached API data per language. */
+    private apiCache;
+    /** Bound handler for document-level language-change events. */
+    private _langSyncHandler;
     private get currentLang();
+    private get langSyncEnabled();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private setupLangSync;
+    private teardownLangSync;
+    /** Return cached API data if available, otherwise defaults (theme only). */
+    private getFooterData;
+    /** If api-url is set, fetch footer data from API and re-render. */
+    private loadApiData;
     private renderLightDomNav;
     private render;
     private attachEvents;

package/dist/components/footer/StartnextFooter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,~~WAAY~~;~~IAErC~~,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,KAAK,WAAW,GAEtB;IAED,iBAAiB,IAAI,IAAI;~~IAOzB~~,oBAAoB,IAAI,IAAI;~~IAI5B~~,wBAAwB,IAAI,IAAI;~~IAQhC~~,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;~~IAWd~~,OAAO,CAAC,YAAY;CAUrB"}
1	+ {"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAc5C,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,gBAAgB;IAOxB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAuBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,YAAY;CAUrB"}

package/dist/components/header/StartnextHeader.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export declare class StartnextHeader extends BaseComponent {
     private expandedSections;
     private lottieAnim;
     private pendingRaf;
+    /** Cached API data per language, so we don't re-fetch on every re-render. */
+    private apiCache;
     private handleScrollBound;
     private handleKeydownBound;
     private handleResizeBound;
@@ -21,8 +23,12 @@ export declare class StartnextHeader extends BaseComponent {
     private get isLightHeader();
     private ui;
     connectedCallback(): void;
+    /** Return cached API data if available, otherwise defaults (theme only). */
+    private getHeaderData;
+    /** If api-url is set, fetch header data from API and re-render. */
+    private loadApiData;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
     /** Re-apply scroll-dependent classes after a full re-render. */
     private restoreScrollState;
     private schedulePostRender;

package/dist/components/header/StartnextHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;~~AAUzD~~,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;~~IAEzC~~,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;~~IAezB~~,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,IAAI,IAAI;~~IAWhC~~,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;~~IAI5B~~,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;~~IA0Bd~~,OAAO,CAAC,YAAY;~~CA4DrB~~"}
1	+ {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAoBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IA6BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,YAAY;CAkErB"}

package/dist/components/header/header.css.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const headerCSS = "\n  \n  *, *::before, *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  :host {\n    display: block;\n    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n    font-size: var(--font-size-base, 16px);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  button {\n    font: inherit;\n    cursor: pointer;\n    border: none;\n    background: none;\n    color: inherit;\n  }\n\n  ul, ol {\n    list-style: none;\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n\n  :host {\n    display: block;\n  }\n\n  /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    z-index: var(--header-z-index, 12);\n    transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n    will-change: transform, opacity, backdrop-filter;\n  }\n\n  .headbar::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-color: #FFFFFF;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s linear;\n  }\n\n  @media (min-width: 768px) {\n    .headbar > * {\n      transition: transform 0.3s ease, opacity 0.3s ease;\n    }\n  }\n\n  /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar--light .headbar__icon {\n    fill: #FFFFFF;\n    color: #FFFFFF;\n  }\n\n  .headbar--light a,\n  .headbar--light button {\n    color: #FFFFFF;\n  }\n\n  .headbar--tight::after {\n    opacity: 0.8;\n  }\n\n  .headbar--tight {\n    backdrop-filter: blur(2px);\n  }\n\n  .headbar--tight .headbar__action--hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .headbar--slide-up {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__left {\n    position: absolute;\n    left: 16px;\n    top: 34px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__left {\n      left: 24px;\n    }\n  }\n\n  /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__right {\n    position: absolute;\n    right: 16px;\n    top: 38px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__right {\n      right: 24px;\n      gap: 24px;\n    }\n  }\n\n  /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__icon {\n    fill: var(--text-primary, #304b50);\n    color: var(--text-primary, #304b50);\n    transition: fill 0.3s linear, color 0.3s linear;\n    will-change: fill, color;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__icon svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .headbar__icon--clickable {\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 4px;\n  }\n\n  .headbar__icon--clickable:hover {\n    opacity: 0.7;\n  }\n\n  /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headerbar__btn {\n    position: absolute;\n    left: 54px;\n    top: 34px;\n    background-color: var(--btn-primary-bg, #06E481);\n    height: 32px;\n    border-radius: 16px;\n    padding: 0 15px;\n    font-size: 16px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    opacity: 0;\n    transition: all 300ms ease-out;\n    will-change: transform, opacity, max-width;\n    z-index: 2;\n    overflow: hidden;\n  }\n\n  .headerbar__btn--loaded {\n    opacity: 1;\n  }\n\n  .headerbar__btn a {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .headerbar__btn:hover {\n    background-color: var(--btn-primary-hover, #00B86F);\n  }\n\n  .headerbar__btn--text {\n    fill: var(--text-primary, #304b50);\n    transition: all 300ms ease-out;\n  }\n\n  .headerbar__btn--icon {\n    opacity: 0;\n    width: 0;\n    transition: all 300ms ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  @media (max-width: 767px) {\n    .headbar--tight .headerbar__btn--text {\n      width: 0;\n      overflow: hidden;\n    }\n    .headbar--tight .headerbar__btn--icon {\n      width: 24px;\n      opacity: 1;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .headerbar__btn {\n      left: 80px;\n    }\n  }\n\n  /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__menu {\n    display: none;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__menu {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      height: 100%;\n      display: flex;\n      align-items: center;\n      transition: all 300ms ease-out;\n      max-width: fit-content;\n      will-change: transform, opacity, max-width;\n    }\n\n    .headbar__menu--faded {\n      transform: translateX(calc(-50% - 60px));\n      max-width: 0;\n      opacity: 0;\n    }\n  }\n\n  .headbar__menu-item {\n    list-style: none;\n  }\n\n  .headbar__menu-link {\n    display: inline-block;\n    padding: 8px 15px;\n    position: relative;\n    font-size: 16px;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    transition: color 0.3s;\n  }\n\n  .headbar--light .headbar__menu-link {\n    color: #FFFFFF;\n  }\n\n  .headbar__menu-link::after {\n    content: \"\";\n    position: absolute;\n    left: 15px;\n    right: 15px;\n    bottom: 2px;\n    height: 2px;\n    background-color: var(--text-primary, #304b50);\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__menu-link::after {\n    background-color: #FFFFFF;\n  }\n\n  .headbar__menu-link:hover::after {\n    opacity: 1;\n  }\n\n  /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__pageLogo--animation {\n    width: 100%;\n    max-width: 200px;\n    margin: 0 auto;\n    display: block;\n    position: relative;\n    top: 110px;\n    transform: translateY(-110px) scale(0.65);\n    z-index: 1;\n    text-decoration: none;\n  }\n\n  .headbar__pageLogo--animation svg {\n    transform: unset !important;\n  }\n\n  .headbar__pageLogo--animation svg path[fill] {\n    fill: var(--text-primary, #304b50);\n  }\n  .headbar__pageLogo--animation svg path[stroke] {\n    stroke: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__pageLogo--animation svg path[fill] {\n    fill: #FFFFFF;\n  }\n  .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n    stroke: #FFFFFF;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__pageLogo--animation {\n      max-width: 300px;\n      transform: translateY(-115px) scale(0.5);\n      top: 100px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__pageLogo--animation {\n      top: 120px;\n      transform: translateY(-140px) scale(0.5);\n    }\n  }\n\n  .headbar__pageLogo--animation-large {\n    transform: translateY(0) scale(1);\n  }\n\n  /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__claim {\n    font-size: 14px;\n    transition: all 0.3s;\n    width: 100%;\n    text-align: center;\n    color: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__claim {\n    color: #FFFFFF;\n  }\n\n  .headbar__claim--large {\n    position: absolute;\n    top: 201px;\n    left: 50%;\n    transform: translate(-50%);\n    white-space: nowrap;\n    z-index: 1;\n  }\n\n  .headbar--tight .headbar__claim--large {\n    pointer-events: none;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__claim--large {\n      top: 232px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__claim--large {\n      top: 252px;\n    }\n  }\n\n  /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    object-fit: cover;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: border-color 0.3s;\n  }\n\n  .headbar--light .headbar__avatar {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  .headbar__avatar:hover {\n    opacity: 0.85;\n  }\n\n  /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__login {\n    padding: 4px 6px;\n    font-size: 16px;\n    font-family: inherit;\n    white-space: nowrap;\n    border: none;\n    cursor: pointer;\n    background: none;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar--light .headbar__login {\n    color: #FFFFFF;\n  }\n\n  .headbar__login:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__login-text {\n    display: none;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__login-text {\n      display: inline;\n    }\n    .headbar__login-icon {\n      display: none;\n    }\n  }\n\n  /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__lang {\n    position: relative;\n  }\n\n  .headbar__lang-toggle {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-family: inherit;\n    font-size: 16px;\n    padding: 4px 6px;\n    border: none;\n    background: none;\n    color: var(--text-primary, #304b50);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__lang-toggle {\n    color: #FFFFFF;\n  }\n\n  .headbar__lang-toggle:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__lang-arrow {\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -1px;\n    left: 2px;\n    transition: transform 0.25s ease;\n  }\n\n  .headbar__lang-arrow.open {\n    transform: rotate(180deg);\n  }\n\n  .headbar__lang-menu {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 50%;\n    min-width: 120px;\n    background: #FFFFFF;\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    padding: 4px 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(-50%) translateY(-8px);\n    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n    z-index: 10;\n  }\n\n  .headbar__lang-menu.open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .headbar__lang-option {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 14px;\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 500;\n    color: #304b50;\n    background: none;\n    border: none;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n    text-align: left;\n  }\n\n  .headbar__lang-option:hover {\n    color: var(--btn-primary-bg, #06E481);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .headbar__lang-option--active {\n    font-weight: 700;\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  .headbar--light .headbar__lang-option {\n    color: #304b50;\n  }\n\n  .headbar--light .headbar__lang-option:hover,\n  .headbar--light .headbar__lang-option--active {\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  /* \u2500\u2500 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__color-mode {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-radius: 50%;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s, color 0.3s;\n  }\n\n  .headbar--light .headbar__color-mode {\n    color: #FFFFFF;\n  }\n\n  .headbar__color-mode:hover {\n    opacity: 0.7;\n  }\n\n  .headbar__color-mode-sun,\n  .headbar__color-mode-moon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__color-mode-moon {\n    display: none;\n  }\n\n  :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n    display: none;\n  }\n\n  :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n    display: flex;\n  }\n\n  /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: var(--overlay-z-index, 1050);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .overlay.open {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .drawer {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    width: 320px;\n    max-width: 85vw;\n    background: #FFFFFF;\n    z-index: var(--drawer-z-index, 1100);\n    overflow-y: auto;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    color: var(--text-primary, #304b50);\n  }\n\n  .drawer--left {\n    left: 0;\n    transform: translateX(-100%);\n    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer--right {\n    right: 0;\n    transform: translateX(100%);\n    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer.open {\n    transform: translateX(0);\n  }\n\n  .drawer__user {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #E5E7EB);\n  }\n\n  .drawer__user-avatar {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .drawer__user-name {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .drawer__nav {\n    padding: 8px 0;\n  }\n\n  .drawer__item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    font-size: 16px;\n    font-weight: 500;\n    transition: background-color 0.15s;\n    cursor: pointer;\n    width: 100%;\n    text-align: left;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    border: none;\n    background: none;\n    font-family: inherit;\n  }\n\n  .drawer__item:hover {\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item--highlighted {\n    color: #FFFFFF;\n    background: var(--btn-primary-bg, #06E481);\n    margin: 8px 16px;\n    border-radius: 8px;\n    justify-content: center;\n    font-weight: 600;\n    width: auto;\n  }\n\n  .drawer__item--highlighted:hover {\n    background: var(--btn-primary-hover, #00B86F);\n  }\n\n  .drawer__item--small {\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    padding: 8px 20px;\n    font-weight: 400;\n  }\n\n  .drawer__item--disabled {\n    color: var(--text-disabled, #D1D5DB);\n    pointer-events: none;\n  }\n\n  .drawer__item--outline {\n    margin: 8px 16px;\n    border: 1.5px solid var(--border-color, #E5E7EB);\n    border-radius: 8px;\n    justify-content: center;\n    width: auto;\n    background: none;\n  }\n\n  .drawer__item--outline:hover {\n    border-color: var(--text-secondary, #6B7280);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  .drawer__item-badge {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: var(--btn-primary-bg, #06E481);\n    color: #FFFFFF;\n    font-size: 12px;\n    font-weight: 700;\n  }\n\n  .drawer__item-expand {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(0deg);\n    transition: transform 0.3s ease;\n  }\n\n  .drawer__item-expand.expanded {\n    transform: rotate(180deg);\n  }\n\n  .drawer__item-nav-arrow {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(-90deg);\n  }\n\n  .drawer__divider {\n    height: 1px;\n    background: var(--border-color, #E5E7EB);\n    margin: 8px 20px;\n  }\n\n  .drawer__children {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n  }\n\n  .drawer__children.expanded {\n    max-height: 500px;\n  }\n\n  .drawer__child {\n    display: block;\n    padding: 10px 20px 10px 52px;\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    transition: background-color 0.15s, color 0.15s;\n    text-decoration: none;\n  }\n\n  .drawer__child:hover {\n    background: var(--hover-bg, #F3F4F6);\n    color: var(--text-primary, #304b50);\n  }\n\n  /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__icon--clickable:focus-visible,\n  .headerbar__btn:focus-visible,\n  .headbar__login:focus-visible,\n  .headbar__menu-link:focus-visible,\n  .drawer__item:focus-visible,\n  .drawer__child:focus-visible {\n    outline: 2px solid var(--btn-primary-bg, #06E481);\n    outline-offset: 2px;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n";
+export declare const headerCSS = "\n  \n  *, *::before, *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  :host {\n    display: block;\n    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n    font-size: var(--font-size-base, 16px);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  button {\n    font: inherit;\n    cursor: pointer;\n    border: none;\n    background: none;\n    color: inherit;\n  }\n\n  ul, ol {\n    list-style: none;\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n\n  :host {\n    display: block;\n  }\n\n  /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    z-index: var(--header-z-index, 12);\n    transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n    will-change: transform, opacity, backdrop-filter;\n  }\n\n  .headbar::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-color: #FFFFFF;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s linear;\n  }\n\n  @media (min-width: 768px) {\n    .headbar > * {\n      transition: transform 0.3s ease, opacity 0.3s ease;\n    }\n  }\n\n  /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar--light .headbar__icon {\n    fill: #FFFFFF;\n    color: #FFFFFF;\n  }\n\n  .headbar--light a,\n  .headbar--light button {\n    color: #FFFFFF;\n  }\n\n  .headbar--tight::after {\n    opacity: 0.8;\n  }\n\n  .headbar--tight {\n    backdrop-filter: blur(2px);\n  }\n\n  .headbar--tight .headbar__action--hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .headbar--slide-up {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__left {\n    position: absolute;\n    left: 16px;\n    top: 34px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__left {\n      left: 24px;\n    }\n  }\n\n  /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__right {\n    position: absolute;\n    right: 16px;\n    top: 38px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__right {\n      right: 24px;\n      gap: 12px;\n    }\n  }\n\n  /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__icon {\n    fill: var(--text-primary, #304b50);\n    color: var(--text-primary, #304b50);\n    transition: fill 0.3s linear, color 0.3s linear;\n    will-change: fill, color;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__icon svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .headbar__icon--clickable {\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 4px;\n  }\n\n  .headbar__icon--clickable:hover {\n    opacity: 0.7;\n  }\n\n  /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headerbar__btn {\n    position: absolute;\n    left: 54px;\n    top: 34px;\n    background-color: var(--btn-primary-bg, #06E481);\n    height: 32px;\n    border-radius: 16px;\n    padding: 0 15px;\n    font-size: 16px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    opacity: 0;\n    transition: all 300ms ease-out;\n    will-change: transform, opacity, max-width;\n    z-index: 2;\n    overflow: hidden;\n  }\n\n  .headerbar__btn--loaded {\n    opacity: 1;\n  }\n\n  .headerbar__btn a {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .headerbar__btn:hover {\n    background-color: var(--btn-primary-hover, #00B86F);\n  }\n\n  .headerbar__btn--text {\n    fill: var(--text-primary, #304b50);\n    transition: all 300ms ease-out;\n  }\n\n  .headerbar__btn--icon {\n    opacity: 0;\n    width: 0;\n    transition: all 300ms ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  @media (max-width: 767px) {\n    .headbar--tight .headerbar__btn--text {\n      width: 0;\n      overflow: hidden;\n    }\n    .headbar--tight .headerbar__btn--icon {\n      width: 24px;\n      opacity: 1;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .headerbar__btn {\n      left: 80px;\n    }\n  }\n\n  /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__menu {\n    display: none;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__menu {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      height: 100%;\n      display: flex;\n      align-items: center;\n      transition: all 300ms ease-out;\n      max-width: fit-content;\n      will-change: transform, opacity, max-width;\n    }\n\n    .headbar__menu--faded {\n      transform: translateX(calc(-50% - 60px));\n      max-width: 0;\n      opacity: 0;\n    }\n  }\n\n  .headbar__menu-item {\n    list-style: none;\n  }\n\n  .headbar__menu-link {\n    display: inline-block;\n    padding: 8px 15px;\n    position: relative;\n    font-size: 16px;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    transition: color 0.3s;\n  }\n\n  .headbar--light .headbar__menu-link {\n    color: #FFFFFF;\n  }\n\n  .headbar__menu-link::after {\n    content: \"\";\n    position: absolute;\n    left: 15px;\n    right: 15px;\n    bottom: 2px;\n    height: 2px;\n    background-color: var(--text-primary, #304b50);\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__menu-link::after {\n    background-color: #FFFFFF;\n  }\n\n  .headbar__menu-link:hover::after {\n    opacity: 1;\n  }\n\n  /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__pageLogo--animation {\n    width: 100%;\n    max-width: 200px;\n    margin: 0 auto;\n    display: block;\n    position: relative;\n    top: 110px;\n    transform: translateY(-110px) scale(0.65);\n    z-index: 1;\n    text-decoration: none;\n  }\n\n  .headbar__pageLogo--animation svg {\n    transform: unset !important;\n  }\n\n  .headbar__pageLogo--animation svg path[fill] {\n    fill: var(--text-primary, #304b50);\n  }\n  .headbar__pageLogo--animation svg path[stroke] {\n    stroke: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__pageLogo--animation svg path[fill] {\n    fill: #FFFFFF;\n  }\n  .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n    stroke: #FFFFFF;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__pageLogo--animation {\n      max-width: 300px;\n      transform: translateY(-115px) scale(0.5);\n      top: 100px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__pageLogo--animation {\n      top: 120px;\n      transform: translateY(-140px) scale(0.5);\n    }\n  }\n\n  .headbar__pageLogo--animation-large {\n    transform: translateY(0) scale(1);\n  }\n\n  /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__claim {\n    font-size: 14px;\n    transition: all 0.3s;\n    width: 100%;\n    text-align: center;\n    color: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__claim {\n    color: #FFFFFF;\n  }\n\n  .headbar__claim--large {\n    position: absolute;\n    top: 201px;\n    left: 50%;\n    transform: translate(-50%);\n    white-space: nowrap;\n    z-index: 1;\n  }\n\n  .headbar--tight .headbar__claim--large {\n    pointer-events: none;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__claim--large {\n      top: 232px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__claim--large {\n      top: 252px;\n    }\n  }\n\n  /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    object-fit: cover;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: border-color 0.3s;\n  }\n\n  .headbar--light .headbar__avatar {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  .headbar__avatar:hover {\n    opacity: 0.85;\n  }\n\n  /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__login {\n    padding: 4px 6px;\n    font-size: 16px;\n    font-family: inherit;\n    white-space: nowrap;\n    border: none;\n    cursor: pointer;\n    background: none;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar--light .headbar__login {\n    color: #FFFFFF;\n  }\n\n  .headbar__login:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__login-text {\n    display: none;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__login-text {\n      display: inline;\n    }\n    .headbar__login-icon {\n      display: none;\n    }\n  }\n\n  /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__lang {\n    position: relative;\n  }\n\n  .headbar__lang-toggle {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-family: inherit;\n    font-size: 16px;\n    padding: 4px 6px;\n    border: none;\n    background: none;\n    color: var(--text-primary, #304b50);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__lang-toggle {\n    color: #FFFFFF;\n  }\n\n  .headbar__lang-toggle:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__lang-arrow {\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -1px;\n    left: 2px;\n    transition: transform 0.25s ease;\n  }\n\n  .headbar__lang-arrow.open {\n    transform: rotate(180deg);\n  }\n\n  .headbar__lang-menu {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 50%;\n    min-width: 120px;\n    background: #FFFFFF;\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    padding: 4px 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(-50%) translateY(-8px);\n    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n    z-index: 10;\n  }\n\n  .headbar__lang-menu.open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .headbar__lang-option {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 14px;\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 500;\n    color: #304b50;\n    background: none;\n    border: none;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n    text-align: left;\n  }\n\n  .headbar__lang-option:hover {\n    color: var(--btn-primary-bg, #06E481);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .headbar__lang-option--active {\n    font-weight: 700;\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  .headbar--light .headbar__lang-option {\n    color: #304b50;\n  }\n\n  .headbar--light .headbar__lang-option:hover,\n  .headbar--light .headbar__lang-option--active {\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  /* \u2500\u2500 Back Link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__back-link {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-decoration: none;\n    color: var(--text-primary, #304b50);\n    font-size: 16px;\n    white-space: nowrap;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__back-link {\n    color: #FFFFFF;\n  }\n\n  .headbar__back-link:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__back-arrow {\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -1px;\n  }\n\n  @media (max-width: 768px) {\n    .headbar__back-text { display: none; }\n  }\n\n  /* \u2500\u2500 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__color-mode {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-radius: 50%;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s, color 0.3s;\n  }\n\n  .headbar--light .headbar__color-mode {\n    color: #FFFFFF;\n  }\n\n  .headbar__color-mode:hover {\n    opacity: 0.7;\n  }\n\n  .headbar__color-mode-sun,\n  .headbar__color-mode-moon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__color-mode-moon {\n    display: none;\n  }\n\n  :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n    display: none;\n  }\n\n  :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n    display: flex;\n  }\n\n  /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: var(--overlay-z-index, 1050);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .overlay.open {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .drawer {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    width: 320px;\n    max-width: 85vw;\n    background: #FFFFFF;\n    z-index: var(--drawer-z-index, 1100);\n    overflow-y: auto;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    color: var(--text-primary, #304b50);\n  }\n\n  .drawer--left {\n    left: 0;\n    transform: translateX(-100%);\n    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer--right {\n    right: 0;\n    transform: translateX(100%);\n    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer.open {\n    transform: translateX(0);\n  }\n\n  .drawer__user {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #E5E7EB);\n  }\n\n  .drawer__user-avatar {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .drawer__user-name {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .drawer__nav {\n    padding: 8px 0;\n  }\n\n  .drawer__item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    font-size: 16px;\n    font-weight: 500;\n    transition: background-color 0.15s;\n    cursor: pointer;\n    width: 100%;\n    text-align: left;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    border: none;\n    background: none;\n    font-family: inherit;\n  }\n\n  .drawer__item:hover {\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item--highlighted {\n    color: #FFFFFF;\n    background: var(--btn-primary-bg, #06E481);\n    margin: 8px 16px;\n    border-radius: 8px;\n    justify-content: center;\n    font-weight: 600;\n    width: auto;\n  }\n\n  .drawer__item--highlighted:hover {\n    background: var(--btn-primary-hover, #00B86F);\n  }\n\n  .drawer__item--small {\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    padding: 8px 20px;\n    font-weight: 400;\n  }\n\n  .drawer__item--disabled {\n    color: var(--text-disabled, #D1D5DB);\n    pointer-events: none;\n  }\n\n  .drawer__item--outline {\n    margin: 8px 16px;\n    border: 1.5px solid var(--border-color, #E5E7EB);\n    border-radius: 8px;\n    justify-content: center;\n    width: auto;\n    background: none;\n  }\n\n  .drawer__item--outline:hover {\n    border-color: var(--text-secondary, #6B7280);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  .drawer__item-badge {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: var(--btn-primary-bg, #06E481);\n    color: #FFFFFF;\n    font-size: 12px;\n    font-weight: 700;\n  }\n\n  .drawer__item-expand {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(0deg);\n    transition: transform 0.3s ease;\n  }\n\n  .drawer__item-expand.expanded {\n    transform: rotate(180deg);\n  }\n\n  .drawer__item-nav-arrow {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(-90deg);\n  }\n\n  .drawer__divider {\n    height: 1px;\n    background: var(--border-color, #E5E7EB);\n    margin: 8px 20px;\n  }\n\n  .drawer__children {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n  }\n\n  .drawer__children.expanded {\n    max-height: 500px;\n  }\n\n  .drawer__child {\n    display: block;\n    padding: 10px 20px 10px 52px;\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    transition: background-color 0.15s, color 0.15s;\n    text-decoration: none;\n  }\n\n  .drawer__child:hover {\n    background: var(--hover-bg, #F3F4F6);\n    color: var(--text-primary, #304b50);\n  }\n\n  /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .headbar__icon--clickable:focus-visible,\n  .headerbar__btn:focus-visible,\n  .headbar__login:focus-visible,\n  .headbar__menu-link:focus-visible,\n  .drawer__item:focus-visible,\n  .drawer__child:focus-visible {\n    outline: 2px solid var(--btn-primary-bg, #06E481);\n    outline-offset: 2px;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n";
 //# sourceMappingURL=header.css.d.ts.map

package/dist/components/header/header.css.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS~~,+5qBA0wBrB~~,CAAC"}
1	+ {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,u1sBAyyBrB,CAAC"}

package/dist/components/header/header.template.d.ts CHANGED Viewed

@@ -5,6 +5,10 @@ export interface HeaderRenderProps {
     isLarge: boolean;
     hideColorMode: boolean;
     hideLang: boolean;
+    hideLogin: boolean;
+    showBackLink: boolean;
+    backUrl: string;
+    backLabel: string;
     userName: string;
     userAvatar: string;
     data: HeaderData;

package/dist/components/header/header.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.template.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,~~CA6EzD~~;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAwBzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CA4BvF"}
1	+ {"version":3,"file":"header.template.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAiFzD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAwBzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CA4BvF"}

package/dist/data/defaults.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { HeaderData, FooterData } from '../types/index.js';
+/**
+ * Default header data — provides theme CSS variables and a valid empty structure.
+ * Navigation content comes from the API; this is just the shell for instant first render.
+ */
+export declare function getDefaultHeaderData(lang?: string): HeaderData;
+/**
+ * Default footer data — provides theme CSS variables and a valid empty structure.
+ * Content comes from the API; this is just the shell for instant first render.
+ */
+export declare function getDefaultFooterData(_lang?: string): FooterData;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/data/defaults.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/data/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEhE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,SAAO,GAAG,UAAU,CA4C5D;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,SAAO,GAAG,UAAU,CAoB7D"}

package/dist/data/uiStrings.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/** Component ARIA labels and button strings (never from API). */
+export declare const uiStrings: Record<string, Record<string, string>>;
+export declare function getUiString(key: string, lang: string): string;
+//# sourceMappingURL=uiStrings.d.ts.map

package/dist/data/uiStrings.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"uiStrings.d.ts","sourceRoot":"","sources":["../../src/data/uiStrings.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAY5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7D"}

package/dist/index.d.ts CHANGED Viewed

@@ -11,6 +11,10 @@ interface StartnextHeaderAttributes {
     'color-mode'?: 'light' | 'dark' | string;
     'hide-color-mode'?: boolean | string;
     'hide-lang'?: boolean | string;
+    'hide-login'?: boolean | string;
+    'show-back-link'?: boolean | string;
+    'back-url'?: string;
+    'back-label'?: string;
     children?: unknown;
     ref?: unknown;
     class?: string;
@@ -21,6 +25,7 @@ interface StartnextHeaderAttributes {
 }
 interface StartnextFooterAttributes {
     lang?: string;
+    'lang-sync'?: boolean | string;
     children?: unknown;
     ref?: unknown;
     class?: string;

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}