@coras-io/embed 0.1.0 → 0.1.2

package/dist/styles/tokens.d.ts

@@ -8,7 +8,7 @@
  * light-DOM container is enough for every nested Web Component to read them.
  * `mount()` adopts this sheet into the container's document exactly once.
  */
-export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs \u2014 do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
 /**
  * Ensure the token stylesheet is present in `root` (a `Document` or
  * `ShadowRoot`). Idempotent: adopting the same root twice is a no-op, and the

package/dist/styles/tokens.generated.d.ts

@@ -1 +1 @@
-export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs \u2014 do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/styles/tokens.generated.js

@@ -1,4 +1,4 @@
-/* GENERATED by scripts/generate-tokens.mjs — do not edit by hand. */
+/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */
 /* eslint-disable */
 // CSS-first token system as a string for runtime adoption (see tokens.ts).
-export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs — do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --coras-brand-footer {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/views/constants.d.ts

@@ -1,3 +1,3 @@
-import { SupportedCurrencies, SupportedLocales } from "../core/types/index.js";
+import type { SupportedCurrencies, SupportedLocales } from "../core/types/index.js";
 export declare const DEFAULT_LOCALE: SupportedLocales;
 export declare const DEFAULT_CURRENCY: SupportedCurrencies;

package/dist/views/details-page/details-page.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
 import { Task } from "@lit/task";
-import { SupportedLocales, SupportedCurrencies } from "../../core/types/index.js";
+import type { SupportedLocales, SupportedCurrencies } from "../../core/types/index.js";
 import "../../components/button/button.js";
 import "../../components/attraction-header/attraction-header.js";
 import "../../components/image-chip/image-chip.js";
@@ -33,8 +33,8 @@ import "../../components/breadcrumbs/breadcrumbs.js";
 import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
 import "./partials/theater-description/theater-description.js";
 import "./partials/tour-description/tour-description.js";
-import { DetailsPageParamsEvent } from "../../core/pages.js";
-import { PageName } from "../../core/types/shared.js";
+import type { DetailsPageParamsEvent } from "../../core/pages.js";
+import type { PageName } from "../../core/types/shared.js";
 declare const CorasDetailsPage_base: import("../../contexts/utils.js").Constructor<import("../../mixins/error-modal.mixin.js").ErrorModalMixinInterface> & import("../../mixins/points/types.js").Constructor<import("../../mixins/points/types.js").PointsMixinInterface> & import("../../contexts/utils.js").Constructor<{
     apiHost: string;
     distributorID: string;

package/dist/views/details-page/details-page.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from "lit";
+import { LitElement, html, nothing, } from "lit";
 import { state, property } from "lit/decorators.js";
 import { Task, TaskStatus } from "@lit/task";
 import { localized, msg, str } from "@lit/localize";
@@ -901,7 +901,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                         const seatedPerformance = this.findSeatedPerformance(filteredOptions);
                         // Only offer the time picker when there is an actual choice. A single
                         // performance time is auto-selected above, so showing one lone button
-                        // is noise — render straight to the seat/section options instead.
+                        // is noise - render straight to the seat/section options instead.
                         const showTimePicker = sortedTimes.length > 1;
                         return html `
             <div class="options">

package/dist/views/details-page/details-page.utilts.d.ts

@@ -1,5 +1,5 @@
-import { components } from "../../core/types/api-schema.js";
-import { SupportedCurrencies, SupportedLocales } from "../../core/types/index.js";
+import type { components } from "../../core/types/api-schema.js";
+import type { SupportedCurrencies, SupportedLocales } from "../../core/types/index.js";
 export declare const formatDateWithTimezone: ({ dateString, timezone, formatString, timeFormatString, includeTime, }: {
     dateString: string;
     timezone?: string;

package/dist/views/details-page/partials/theater-description/theater-description.component.d.ts

@@ -1,5 +1,5 @@
-import { CSSResultGroup, LitElement, nothing } from "lit";
-import { components } from "../../../../core/types/api-schema.js";
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { components } from "../../../../core/types/api-schema.js";
 import "../../../../components/text-section/text-section.js";
 type Attraction = components["schemas"]["AttractionEvent"];
 export declare class CorasTheaterDescription extends LitElement {
@@ -8,6 +8,6 @@ export declare class CorasTheaterDescription extends LitElement {
     private renderLocation;
     private renderDescription;
     private renderSeatMap;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/views/details-page/partials/tour-description/tour-description.component.d.ts

@@ -1,11 +1,11 @@
-import { CSSResultGroup, LitElement, nothing } from "lit";
-import { components } from "../../../../core/types/api-schema.js";
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { components } from "../../../../core/types/api-schema.js";
 import "../../../../components/text-section/text-section.js";
 import "../../../../components/icon-list/icon-list.js";
 import "../../../../components/icon-list/icon-list-item/icon-list-item.js";
 import "../../../../components/accordion/accordion.js";
 import "../../../../components/accordion/accordion-item/accordion-item.js";
-import { SupportedLocales } from "../../../../core/types/index.js";
+import type { SupportedLocales } from "../../../../core/types/index.js";
 type Attraction = components["schemas"]["AttractionTour"];
 export declare class CorasTourDescription extends LitElement {
     static styles: CSSResultGroup;
@@ -15,6 +15,6 @@ export declare class CorasTourDescription extends LitElement {
     private renderSections;
     private renderAboutItems;
     private renderAccordion;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/views/help-page/help-page.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
 import "../../components/tabs/tabs.js";
 import "../../components/tab/tab.js";
 import "../../components/tab-panel/tab-panel.js";
@@ -13,7 +13,7 @@ import "../../components/message-card/message-card.js";
 import "../../components/button/button.js";
 import "../../components/dialog/dialog.js";
 import "../../components/layout/layout.js";
-import { HelpPageParamsEvent } from "../../core/pages.js";
+import type { HelpPageParamsEvent } from "../../core/pages.js";
 declare const CorasHelpPage_base: import("../../contexts/utils.js").Constructor<{
     apiHost: string;
     distributorID: string;

package/dist/views/help-page/help-page.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from "lit";
+import { LitElement, html, nothing, } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";

package/dist/views/help-page/help-page.types.d.ts

@@ -1,4 +1,4 @@
-import { components } from "../../core/types/api-schema.js";
+import type { components } from "../../core/types/api-schema.js";
 export type Form = {
     name: string;
     email: string;

package/dist/views/help-page/help-page.utils.d.ts

@@ -1,3 +1,3 @@
-import { TemplateResult } from "lit";
-import { NumberedNode } from "./help-page.types.js";
+import { type TemplateResult } from "lit";
+import type { NumberedNode } from "./help-page.types.js";
 export declare function renderNumberedTree(nodes?: NumberedNode[]): TemplateResult;

package/dist/views/landing-page/landing-page.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-import { LandingPageParamsEvent } from "../../core/pages.js";
-import { PageName } from "../../core/types/shared.js";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
+import type { LandingPageParamsEvent } from "../../core/pages.js";
+import type { PageName } from "../../core/types/shared.js";
 import "../../components/location-image/location-image.js";
 import "../../components/dropdown/dropdown.js";
 import "../../components/locations-results/locations-results.js";
@@ -29,7 +29,7 @@ import "../../components/breadcrumbs/breadcrumbs.js";
 import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
 import "../../contexts/basket/basket.js";
 import "../../components/layout/layout.js";
-import { Sorting } from "../../core/types/index.js";
+import type { Sorting } from "../../core/types/index.js";
 declare const CorasLandingPage_base: import("../../contexts/utils.js").Constructor<import("../../mixins/error-modal.mixin.js").ErrorModalMixinInterface> & import("../../mixins/points/types.js").Constructor<import("../../mixins/points/types.js").PointsMixinInterface> & import("../../contexts/utils.js").Constructor<import("../../mixins/location-search/types.js").LocationSearchMixinInterface> & import("../../contexts/utils.js").Constructor<{
     apiHost: string;
     distributorID: string;

package/dist/views/landing-page/landing-page.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, } from "lit";
 import { when } from "lit/directives/when.js";
 import { property, state } from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";

package/dist/views/landing-page/landing-page.types.d.ts

@@ -1,4 +1,4 @@
-import { components } from "../../core/types/api-schema.js";
+import type { components } from "../../core/types/api-schema.js";
 export type CategoriesTree = Record<string, CategoriesTreeElement>;
 export type CategoriesTreeElement = {
     parent: string | null;

package/dist/views/payment-page/controllers/crypto-auth.controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-import { PhoneCodeSelection } from "../payment-page.types.js";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import type { PhoneCodeSelection } from "../payment-page.types.js";
 /**
  * Dependencies injected from the host component.
  * These map to CoinbaseMixin methods and state that the controller
@@ -16,7 +16,7 @@ export interface CryptoAuthDeps {
     onLoginSuccess(): Promise<void>;
     /** Callback to refresh balance after login */
     onBalanceRefresh(): void;
-    /** Callback after MFA enrollment completes — syncs phone to form */
+    /** Callback after MFA enrollment completes - syncs phone to form */
     onMfaEnrollmentComplete(): void;
 }
 /**

package/dist/views/payment-page/controllers/crypto-transfer.controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-import { TransferModalState } from "../../../components/transfer-modal/transfer-modal.component.js";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import type { TransferModalState } from "../../../components/transfer-modal/transfer-modal.component.js";
 import { type PendingTransferPayload } from "../payment-page.utils.js";
 /**
  * Result returned from the on-chain token transfer.
@@ -66,7 +66,7 @@ export declare class CryptoTransferController implements ReactiveController {
      */
     startTransfer(): Promise<TransferOutcome>;
     /**
-     * Handles successful on-chain transfer — confirms reservation with API.
+     * Handles successful on-chain transfer - confirms reservation with API.
      * Persists the transaction hash BEFORE calling the API for crash recovery.
      */
     handleTransferSuccess(transactionHash: string): Promise<TransferOutcome>;

package/dist/views/payment-page/controllers/crypto-transfer.controller.js

@@ -58,7 +58,7 @@ export class CryptoTransferController {
         }
     }
     /**
-     * Handles successful on-chain transfer — confirms reservation with API.
+     * Handles successful on-chain transfer - confirms reservation with API.
      * Persists the transaction hash BEFORE calling the API for crash recovery.
      */
     async handleTransferSuccess(transactionHash) {

package/dist/views/payment-page/controllers/form-validation.controller.d.ts

@@ -1,7 +1,7 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
-import { ValidatorContext } from "../payment-page.validators.js";
-import { FormValues, PhoneCodeSelection, FieldVisibility } from "../payment-page.types.js";
-import { components } from "../../../core/types/api-schema.js";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import { type ValidatorContext } from "../payment-page.validators.js";
+import type { FormValues, PhoneCodeSelection, FieldVisibility } from "../payment-page.types.js";
+import type { components } from "../../../core/types/api-schema.js";
 /**
  * FormValidationController manages form state, validation, and field visibility.
  *
@@ -40,7 +40,7 @@ export declare class FormValidationController implements ReactiveController {
     validate(checkData: components["schemas"]["CheckReservationsResponse"] | undefined, shouldValidateBillingAddress: boolean, paymentType: "stripe" | "crypto", hasCryptoEmail: boolean): boolean;
     /**
      * Get field visibility flags based on API requirements.
-     * Memoized — recomputes only when checkData reference changes.
+     * Memoized - recomputes only when checkData reference changes.
      */
     private _cachedCheckData;
     private _cachedVisibility;

package/dist/views/payment-page/controllers/layout.controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 /**
  * LayoutController manages responsive layout behavior for the payment page.
  * Tracks container width to determine basket visibility using ResizeObserver.

package/dist/views/payment-page/controllers/layout.controller.js

@@ -10,7 +10,7 @@ export class LayoutController {
         host.addController(this);
     }
     hostConnected() {
-        // No-op — observe() must be called with the target element
+        // No-op - observe() must be called with the target element
     }
     hostDisconnected() {
         this.disconnect();

package/dist/views/payment-page/controllers/payment-flow.controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 /**
  * Possible states of the payment submission lifecycle.
  *

package/dist/views/payment-page/controllers/stripe-payment.controller.d.ts

@@ -1,7 +1,7 @@
-import { ReactiveController, ReactiveControllerHost } from "lit";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 import type { PaymentMethod, PaymentRequestPaymentMethodEvent } from "@stripe/stripe-js";
-import { StripeComponent, CustomerData } from "../payment-page.types.js";
-import { PaymentFiatMethodType } from "../../../components/payment-fiat-method/payment-fiat-method.component.js";
+import type { StripeComponent, CustomerData } from "../payment-page.types.js";
+import type { PaymentFiatMethodType } from "../../../components/payment-fiat-method/payment-fiat-method.component.js";
 /**
  * StripePaymentController manages Stripe-specific payment processing:
  * - Card payment confirmation

package/dist/views/payment-page/partials/activity-details/activity-details.component.d.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, LitElement, nothing } from "lit";
-import { components } from "../../../../core/types/api-schema.js";
-import { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
-import { FormValues, FieldsConfig, PhoneCodeSelection } from "../../payment-page.types.js";
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { components } from "../../../../core/types/api-schema.js";
+import type { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
+import type { FormValues, FieldsConfig, PhoneCodeSelection } from "../../payment-page.types.js";
 import "../../../../components/input-field/input-field.js";
 import "../../../../components/phone-field/phone-field.js";
 import "../hotel-pickup-field/hotel-pickup-field.js";
@@ -42,6 +42,6 @@ export declare class CorasActivityDetails extends LitElement {
     private renderReservationRequirements;
     private renderTicketRequirements;
     private renderReservation;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
 }
 export {};

package/dist/views/payment-page/partials/billing-address/billing-address.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, LitElement, nothing } from "lit";
-import { components } from "../../../../core/types/api-schema.js";
-import { FormValues, FieldsConfig } from "../../payment-page.types.js";
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { components } from "../../../../core/types/api-schema.js";
+import type { FormValues, FieldsConfig } from "../../payment-page.types.js";
 import "../../../../components/input-field/input-field.js";
 import "../../../../components/joined-fields/joined-fields.js";
 import "../country-field/country-field.js";
@@ -30,5 +30,5 @@ export declare class CorasBillingAddress extends LitElement {
     private handleValueChanged;
     private renderField;
     private renderAddressFields;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
 }

package/dist/views/payment-page/partials/confirmation/confirmation.component.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import "../../../../components/icon/icon.js";
-import { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
-import { SupportedLocales } from "../../../../core/types/index.js";
+import type { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
+import type { SupportedLocales } from "../../../../core/types/index.js";
 export declare class CorasConfirmation extends LitElement {
     static styles: import("lit").CSSResult;
     referenceId: string;