@coras-io/embed 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/seated-selector/seated-selector.component.d.ts +2 -1
  3. package/dist/components/seated-selector/seated-selector.component.js +44 -33
  4. package/dist/components/seated-selector/seated-selector.styles.js +17 -5
  5. package/dist/components/seats-io/seats-io.component.js +10 -0
  6. package/dist/components/seats-io/seats-io.constants.d.ts +4 -0
  7. package/dist/components/seats-io/seats-io.constants.js +7 -0
  8. package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.styles.js +4 -3
  9. package/dist/custom-elements.json +344 -325
  10. package/dist/styles/tokens.css +1 -1
  11. package/dist/styles/tokens.d.ts +1 -1
  12. package/dist/styles/tokens.generated.d.ts +1 -1
  13. package/dist/styles/tokens.generated.js +1 -1
  14. package/dist/views/details-page/details-page.component.js +36 -3
  15. package/dist/views/details-page/partials/theater-description/theater-description.component.js +5 -0
  16. package/package.json +3 -3
package/dist/styles/tokens.css CHANGED
@@ -232,7 +232,7 @@
232
232
  --coras-color-background: var(--coras-brand-background);
233
233
  --coras-color-surface: var(--coras-brand-surface);
234
234
  --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);
235
- --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));
235
+ --coras-color-surface-hover: var(--coras-color-primary-100);
236
236
  --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));
237
237
  --coras-color-text: var(--coras-brand-text);
238
238
  --coras-color-text-primary: var(--coras-brand-text);
package/dist/styles/tokens.d.ts CHANGED
@@ -8,7 +8,7 @@
8
8
  * light-DOM container is enough for every nested Web Component to read them.
9
9
  * `mount()` adopts this sheet into the container's document exactly once.
10
10
  */
11
- 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";
11
+ 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: var(--coras-color-primary-100);\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";
12
12
  /**
13
13
  * Ensure the token stylesheet is present in `root` (a `Document` or
14
14
  * `ShadowRoot`). Idempotent: adopting the same root twice is a no-op, and the
package/dist/styles/tokens.generated.d.ts CHANGED
@@ -1 +1 @@
1
- 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";
1
+ 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: var(--coras-color-primary-100);\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 CHANGED
@@ -1,4 +1,4 @@
1
1
  /* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */
2
2
  /* eslint-disable */
3
3
  // CSS-first token system as a string for runtime adoption (see tokens.ts).
4
- 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";
4
+ 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: var(--coras-color-primary-100);\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/details-page/details-page.component.js CHANGED
@@ -852,7 +852,18 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
852
852
  // Capture the selector now: currentTarget is nulled once dispatch ends, and
853
853
  // we only read it after awaiting the reservation.
854
854
  const selector = event.target;
855
- await this.reservationsTask.run(["", "", event.detail]);
855
+ // Show the confirm button's spinner while the basket call is in flight.
856
+ if (selector) {
857
+ selector.reserving = true;
858
+ }
859
+ try {
860
+ await this.reservationsTask.run(["", "", event.detail]);
861
+ }
862
+ finally {
863
+ if (selector) {
864
+ selector.reserving = false;
865
+ }
866
+ }
856
867
  if (this.reservationsTask.status !== TaskStatus.ERROR &&
857
868
  this.reservationsTask.value &&
858
869
  Object.keys(this.reservationsTask.value).length > 0) {
@@ -867,6 +878,15 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
867
878
  isBasketDropdownOpen.set(true);
868
879
  scrollToTop();
869
880
  }
881
+ // Return the page to a clean slate: collapse the seat map and reset the
882
+ // ticket selector to its default so the shopper starts fresh for any
883
+ // further booking. The just-added item lives in the basket now; the
884
+ // "Added to basket" summary reads the reservation, not this state.
885
+ this.shouldRenderOptions = false;
886
+ this.selectedPriceTypes = {};
887
+ this.selectedTime = null;
888
+ this.selectedTimeOptions = {};
889
+ this.seatsFallback = false;
870
890
  }
871
891
  };
872
892
  this.renderAvailabilityOptions = () => {
@@ -1099,7 +1119,15 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
1099
1119
  };
1100
1120
  this.renderBasketModal = () => {
1101
1121
  const apiResponse = this.attractionTask.value;
1102
- const ticketsNumber = getTotalTicketsCount(this.selectedPriceTypes);
1122
+ // Prefer the count actually reserved (seated bookings can differ from the
1123
+ // upfront selection, which is also reset once the item is in the basket);
1124
+ // fall back to the selection only before a reservation exists.
1125
+ const reservedTickets = this.reservationsTask.value && "tickets" in this.reservationsTask.value
1126
+ ? this.reservationsTask.value.tickets
1127
+ : null;
1128
+ const ticketsNumber = reservedTickets?.length
1129
+ ? reservedTickets.length
1130
+ : getTotalTicketsCount(this.selectedPriceTypes);
1103
1131
  const title = apiResponse?.attraction.attraction_name || "";
1104
1132
  let formattedDate = "";
1105
1133
  if (this.reservationsTask.value &&
@@ -1412,6 +1440,11 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
1412
1440
  }
1413
1441
  renderSeatedSelector(performance) {
1414
1442
  const seatsConfig = this.configTask.value;
1443
+ const event = this.attractionTask.value;
1444
+ // Cap seat selection at the venue's per-order maximum rather than the
1445
+ // upfront ticket count, so the shopper can revise how many seats they want
1446
+ // straight on the map. 0 tells the chart there is no cap.
1447
+ const maxSeats = event?.attraction.max_tickets_per_order ?? 0;
1415
1448
  return html `
1416
1449
  <coras-seated-selector
1417
1450
  attraction-id="${this.attractionId}"
@@ -1420,7 +1453,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
1420
1453
  workspace-key="${seatsConfig.workspaceKey}"
1421
1454
  region="${seatsConfig.region}"
1422
1455
  date-label="${formatDate(performance.startDatetime, this.locale, true)}"
1423
- ticket-count=${getTotalTicketsCount(this.selectedPriceTypes)}
1456
+ max-seats=${maxSeats}
1424
1457
  @seats-unavailable=${() => (this.seatsFallback = true)}
1425
1458
  @seats-confirmed=${this.handleSeatsConfirmed}
1426
1459
  ></coras-seated-selector>
package/dist/views/details-page/partials/theater-description/theater-description.component.js CHANGED
@@ -40,6 +40,11 @@ let CorasTheaterDescription = class CorasTheaterDescription extends LitElement {
40
40
  `;
41
41
  }
42
42
  renderSeatMap(attraction) {
43
+ // When the event sells seats through the live picker, that interactive map
44
+ // supersedes this static illustration - showing both is redundant.
45
+ if (attraction.attraction.seats_sales_enabled) {
46
+ return nothing;
47
+ }
43
48
  // The seat map URL comes from the API; gate its scheme (https/relative/
44
49
  // data:image) before using it as an `img` source so a malformed or
45
50
  // `javascript:` value can't reach the DOM.
package/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "node": ">=20"
18
18
  },
19
19
  "customElements": "dist/custom-elements.json",
20
- "version": "0.1.2",
20
+ "version": "0.2.0",
21
21
  "private": false,
22
22
  "homepage": "https://embed.coras.io",
23
23
  "bugs": {
@@ -117,7 +117,7 @@
117
117
  "vite": "7.3.6",
118
118
  "vite-plugin-istanbul": "6.0.2",
119
119
  "vitest": "3.2.6",
120
- "@coras-io/static": "0.0.1"
120
+ "@coras-io/static": "0.0.2"
121
121
  },
122
122
  "dependencies": {
123
123
  "@coinbase/cdp-core": "0.0.110",
@@ -135,7 +135,7 @@
135
135
  "lit": "^3.2.1",
136
136
  "openapi-fetch": "0.13.5",
137
137
  "viem": "2.52.2",
138
- "@coras-io/brand-tokens": "^0.1.0"
138
+ "@coras-io/brand-tokens": "^0.2.0"
139
139
  },
140
140
  "scripts": {
141
141
  "lint": "eslint \"src/**/*.ts*\"",