@startnext/chrome 0.1.2 → 0.1.4

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 (7) hide show
  1. package/dist/components/header/header.css.d.ts +1 -1
  2. package/dist/components/header/header.css.d.ts.map +1 -1
  3. package/dist/index.d.ts +35 -25
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +2 -2
  6. package/dist/index.umd.js +2 -2
  7. package/package.json +1 -1
package/dist/components/header/header.css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const headerCSS = "\n \n @font-face {\n font-family: \"PFDin\";\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinRegularData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinMediumData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinBoldData}) format(\"woff2\");\n }\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, \"PFDin\", -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 height: 110px;\n }\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: 38px;\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: 40px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n top: 43px;\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 top: 39px;\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: 160px;\n transform: translateY(-175px) 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: 292px;\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: 14px;\n font-weight: 600;\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 }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\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: 13px;\n font-weight: 600;\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 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";
1
+ export declare const headerCSS = "\n \n @font-face {\n font-family: \"PFDin\";\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinRegularData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinMediumData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinBoldData}) format(\"woff2\");\n }\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, \"PFDin\", -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: 12px;\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: 160px;\n transform: translateY(-180px) 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: 292px;\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-weight: 600;\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 }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\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 font-weight: 600;\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 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";
2
2
  //# sourceMappingURL=header.css.d.ts.map
package/dist/components/header/header.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,2kpBA+sBrB,CAAC"}
1
+ {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,0/oBA0sBrB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,34 +1,44 @@
1
1
  export { StartnextHeader } from './components/header/StartnextHeader.js';
2
2
  export { StartnextFooter } from './components/footer/StartnextFooter.js';
3
3
  export type { NavigationItem, HeaderData, FooterData, FooterColumn, SocialLink, UserInfo, UserMenu, LogoConfig, CtaButton, LanguageOption, ThemeVariables, } from './types/index.js';
4
+ interface StartnextHeaderAttributes {
5
+ lang?: string;
6
+ light?: boolean | string;
7
+ 'large-animation'?: boolean | string;
8
+ authenticated?: boolean | string;
9
+ 'user-name'?: string;
10
+ 'user-avatar'?: string;
11
+ children?: unknown;
12
+ ref?: unknown;
13
+ class?: string;
14
+ className?: string;
15
+ style?: string | Record<string, string>;
16
+ id?: string;
17
+ slot?: string;
18
+ }
19
+ interface StartnextFooterAttributes {
20
+ lang?: string;
21
+ children?: unknown;
22
+ ref?: unknown;
23
+ class?: string;
24
+ className?: string;
25
+ style?: string | Record<string, string>;
26
+ id?: string;
27
+ slot?: string;
28
+ }
29
+ declare module 'react' {
30
+ namespace JSX {
31
+ interface IntrinsicElements {
32
+ 'startnext-header': StartnextHeaderAttributes;
33
+ 'startnext-footer': StartnextFooterAttributes;
34
+ }
35
+ }
36
+ }
4
37
  declare global {
5
38
  namespace JSX {
6
39
  interface IntrinsicElements {
7
- 'startnext-header': HTMLElement & {
8
- lang?: string;
9
- light?: boolean | string;
10
- 'large-animation'?: boolean | string;
11
- authenticated?: boolean | string;
12
- 'user-name'?: string;
13
- 'user-avatar'?: string;
14
- children?: unknown;
15
- ref?: unknown;
16
- class?: string;
17
- className?: string;
18
- style?: string | Record<string, string>;
19
- id?: string;
20
- slot?: string;
21
- };
22
- 'startnext-footer': HTMLElement & {
23
- lang?: string;
24
- children?: unknown;
25
- ref?: unknown;
26
- class?: string;
27
- className?: string;
28
- style?: string | Record<string, string>;
29
- id?: string;
30
- slot?: string;
31
- };
40
+ 'startnext-header': StartnextHeaderAttributes;
41
+ 'startnext-footer': StartnextFooterAttributes;
32
42
  }
33
43
  }
34
44
  }
package/dist/index.d.ts.map CHANGED
@@ -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,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,WAAW,GAAG;gBAChC,IAAI,CAAC,EAAE,MAAM,CAAC;gBACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;gBACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;gBACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;gBACjC,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,aAAa,CAAC,EAAE,MAAM,CAAC;gBACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;gBACnB,GAAG,CAAC,EAAE,OAAO,CAAC;gBACd,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,SAAS,CAAC,EAAE,MAAM,CAAC;gBACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBACxC,EAAE,CAAC,EAAE,MAAM,CAAC;gBACZ,IAAI,CAAC,EAAE,MAAM,CAAC;aACf,CAAC;YACF,kBAAkB,EAAE,WAAW,GAAG;gBAChC,IAAI,CAAC,EAAE,MAAM,CAAC;gBACd,QAAQ,CAAC,EAAE,OAAO,CAAC;gBACnB,GAAG,CAAC,EAAE,OAAO,CAAC;gBACd,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,SAAS,CAAC,EAAE,MAAM,CAAC;gBACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;gBACxC,EAAE,CAAC,EAAE,MAAM,CAAC;gBACZ,IAAI,CAAC,EAAE,MAAM,CAAC;aACf,CAAC;SACH;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,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"}