@coras-io/embed 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,147 @@
 # @coras-io/embed
 
+## 0.4.0
+
+### Minor Changes
+
+- 233f091: Add `navbarBackgroundImage` and `footerBackgroundImage` so a brand can paint a linear or radial gradient over the navbar and footer, with an optional dark counterpart under `dark`; the solid background colours stay the fallback for the mobile menu, borders, contrast checks and email
+- 233f091: Ship the `brand.json` contract: the file is grouped by surface (`navbar.background`), cites a published JSON Schema, and is read by every consumer in that shape or as flat keys. Rename `mainButton*` to `primaryButton*`, `bodyIcon` to `icon` and `buttonHoverLight` / `buttonHoverDark` to `buttonHoverOnLightFill` / `buttonHoverOnDarkFill`, with their CSS variables (`--coras-brand-primary-button*`, `--coras-brand-icon`, `--coras-color-primary-button*`). Logos are fields, shadows are validated by grammar, `publishBrand` fills in derived values, and `toDesignTokens` exports a brand as W3C Design Tokens
+
+### Patch Changes
+
+- e8377e1: Show ampersands and angle brackets in translated text instead of raw HTML entities
+- 030f19d: Show the details page error modal when an attraction request fails, instead of crashing while rendering an empty attraction
+- Updated dependencies [233f091]
+- Updated dependencies [233f091]
+  - @coras-io/brand-tokens@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- a70f740: Add the `link`, `focusRing` and `logoDark` brand fields
+- fa5220c: Add the `ar-SA` locale. Arabic copy, Arabic-Indic numerals and locale-correct dates render, but the layout is not mirrored for right-to-left
+- 378c4a5: Remove `coras-button`'s `background` property. It painted the primary tint over the variant's own fill, which no page asks for now that the details date picker and the help subject dropdown take the card surface like the selectors beside them
+- ee26876: Give `menuBackground` and `fieldBackground` a dark side, so a brand that sets either no longer paints white dropdowns and inputs on a dark page. In dark mode a menu (the calendar, sort, language and currency panels) now matches the card surface around it
+- 144db8e: Derive dark-scheme colours from each brand's own hues, so text buttons, links and alert text stay legible on dark surfaces
+- 37348a7: Give `primaryTint` and `secondaryTint` a dark side, so the fills they paint (selected chips, tags, the basket earn pill, focus states and the payment option chip) stop reading near-white on a dark page. The details date picker and the help subject dropdown now take the card surface like the selectors beside them, and the managed navbar accepts a `logoDark` from a brand that sets no light logo
+- 29ba254: Drop `colorScheme: "system"`. Use `"inherit"` to follow the host page, which is also how the visitor's OS preference reaches the embed: a page declaring `color-scheme: light dark` hands it on. `"system"` ignored the host page and could put a dark embed on a light one.
+- c3fc0a7: Extend Field / Input Fill Colour to the surfaces that still borrowed the card fill: the card fields on the payment page, the ticket and date selectors, the landing selectors, and the time and language selection chips. Setting a card colour no longer repaints the controls a customer types and chooses in
+- 244c509: Flatten and rename the brand schema (`schemaVersion` 1, the only version accepted): every colour is an explicit `brand.json` field named in the design vocabulary (`mainButton`, `pageBackground`, `cardBackground`, `textButton`, one `*Background` per status family), the colour engine moves to the author-only `@coras-io/brand-tokens/authoring` export, and new fields make dividers, input borders, greys, shadows, scrim, disabled states, logo height, and input corners brandable across web and email. Also drops the unused `sanitizeBrandValue` export
+- 331ab7b: Make `footerPaddingBottom` the footer's bottom padding itself rather than extra padding stacked on it, defaulting to the `2rem` the footer already rendered
+- aea19cf: Add `headingFont` and `headingScale`: a second typeface for page, section and card headings (following `font` until set), and one multiplier that resizes every heading together. A `fontFace` can now name its own `family`, so a brand's two typefaces both load
+- b6776b5: Add the `zh-HK` locale. Traditional Chinese copy and Hong Kong date formats render; the locale has no currency mapping yet, so currency detection leaves it on the site default
+- 35ed62d: Fold the `textSecondary` brand field into `textMuted` so labels, placeholders and captions share one colour, merge the `Brand colours` and `Page` field groups into `Key colours`, and drop `focusRing` and `scrim` from the editable control surface (both stay settable in `brand.json`)
+- e85b1b2: Guarantee legible text on branded buttons and links. Add a `secondaryText` brand field and auto-contrast the secondary button label against the secondary colour (fixing a pale secondary stranding a hardcoded white label), flip the CTA and secondary labels to black or white by true WCAG ratio, and nudge ghost/text button and link colours to a legible lightness on their surface while keeping the brand hue. Each auto-correction is opt-out: set the field explicitly to override it.
+- cd010ec: Support a dark-scheme navbar logo: a brand's `logoDark` is now shown by the managed navbar when the embed is in dark mode. Slotted `brand` content keeps its own semantics (it is no longer wrapped in the home-link button, which produced invalid nested interactive content), and no focusable button renders when there is no logo.
+- 1168614: Require Node 22 or later. Node 20 has reached end of life.
+- 06ff09f: Update bundled runtime dependencies to their latest releases, including `@stripe/stripe-js` 9, `@coinbase/cdp-core` 0.0.122, `viem` 2.55, `lit` 3.3 and `dompurify` 3.4.14. A host page that loads its own `@coinbase/cdp-core` must move to 0.0.122 to keep one instance per page
+- 15d4d06: Remove the Croatian kuna (HRK) from the supported currencies, since Croatia adopted the euro; passing `currency: "HRK"` now throws an `invalid_currency` validation error
+- b06bb1c: Add the `SAR` currency, and resolve Arabic visitors to it when currency detection is on
+- 74ecb66: Treat `apiUrl` and `distributorId` as fixed mount identity: `update()` now rejects changing them instead of silently ignoring the change, and clearing an optional config value takes effect
+- 932ddd6: Type-check every page param and config field, so invalid host input raises a typed `CorasValidationError` naming the field instead of a raw `TypeError` from inside the SDK. Dates must be `yyyy-MM-dd`, and `loyaltyPointsEnabled`, `allowedLocales`, `allowedCurrencies` and the param bag are checked for shape
+- 74ecb66: Trim the package to its supported public surface: the internal `createMountWith` and `getPageMeta` helpers, the `./types` and `./contrast` entry points, the `./tokens.css` stylesheet, and the custom-elements manifest are no longer exported. Import the public types from the package root, and the WCAG contrast helpers from `@coras-io/brand-tokens`
+- 74ecb66: Correlate page and params in `mount()` and `update()` so the wrong params for a page are a type error, narrow `CorasPaymentStatus` to the emitted `succeeded`/`failed` outcomes, and pair `page` with its own `params` in `CorasState` and the navigate/state-change details so narrowing on `page` narrows `params` with it
+- 932ddd6: Make the URL helpers total: `buildCorasUrl` now rejects a details state with no id, a details id that collides with a reserved route segment, a duplicate or malformed `reservedSegments` entry, and the non-routable `suggestion-widget`, rather than emitting a URL that parses back as a different page. `suggestion-widget` no longer has a default `/widget` route
+- 052564e: Show seat numbers and a per-ticket price breakdown in the basket, and split the base seat price from the booking fee in the seat-selection summary so it matches the price shown on the map. On small screens the summary is now a collapsible bottom sheet, and the seat map is capped to the summary width so the two line up.
+- 555ec1a: Add brand fields for the surfaces that previously borrowed another colour: `fieldBackground` and `menuBackground` (form fields and dropdown menus no longer follow the card colour), `menuBorder`, `secondaryButton` (the secondary button's own fill, previously painted straight from `secondary`), `mainButtonBorder` and `secondaryButtonBorder`, `searchRadius` so the nav and location search fields can be shaped independently of the general corner radius, and `footerBorder` with `footerPaddingBottom`
+- c04ebaf: Add `navbarLogo` and `footerLogo`, so a brand whose navbar or email footer is dark on an otherwise light page can supply the logo drawn for that surface. Both are optional and fall back to the existing logo, and the email renderer now resolves every logo to an absolute URL rather than only the main one
+- a70f740: Collapse the brand colour ramp to the design's two tones per family - the base and one light surface tint - removing the intermediate 100/200/300/400/700/900 steps. Components now use those two tones plus state-layer tokens (hover/pressed) and the fixed neutral scale, matching the Figma system exactly. The neutral grey scale keeps its full range.
+
+### Patch Changes
+
+- de40afc: Sync generated API types with the latest schema: `currency` query parameters are no longer a fixed enum and accept any string, and `fil` joins the translated language codes
+- 1073d07: Sync generated API types with the latest schema: attractions, events, and tours expose `ticket_delivery_method`, transaction `status` is now a typed enum, and ticket delivery types add `pickup` and `email`
+- 9f5a0b0: Fix reservation confirmation failing with "Field may not be null." by omitting attendee fields the customer left blank instead of sending them as null
+- 2c71b27: Make the basket footer corners follow the basket shell instead of a fixed 16px, so the whole basket reshapes together with the brand
+- 16a6abf: Keep the basket item remove button pinned to the trailing edge for every item, including general-admission tickets with no seat information, so it no longer jumps to the left
+- ad435cc: Stop the basket drawer forcing a horizontal scrollbar. It sized itself to the full window width, which counts the page's own vertical scrollbar and ignores any transformed ancestor that a fixed element is really contained by, so it hung past the right edge of the page it sits on
+- ebf7bca: Apply the brand font to buttons, text inputs, search fields and other native controls, which previously kept the browser's own interface font and left a page with mixed typefaces
+- a70f740: Make the checkout follow the brand: Stripe focus rings, field errors, and section headers no longer render fixed blue, red, and navy
+- 746c5a9: Apply the configured border colour to primary and secondary buttons instead of it being overridden to transparent
+- a70f740: Show a branded keyboard-focus ring on buttons (the focus-ring colour was defined but never painted)
+- e76ee2c: Fix timezone off-by-one errors when displaying calendar days. Selected-date labels, attraction card and range dates, the calendar month bounds, and the passport-expiry check now treat date-only values as timezone-agnostic calendar days, so they show the correct day for viewers in any timezone instead of the previous day west of UTC. Event and reservation times still render in the venue timezone.
+- 344c151: Stop the card fill painting outlined buttons and the unselected payment method chips, so the card colour reaches cards only
+- 993c7dd: Keep the details-page image carousel's previous arrow clickable: it no longer renders behind the photo, so you can navigate back from the last image
+- a70f740: Bring the embed to brand parity: dialogs, drawers and the mobile basket follow the brand surface colour, the neutral scale inverts in dark mode, loyalty accents follow the brand secondary instead of a fixed pink, and tokens adopt into a host shadow root
+- a70f740: Make the stock brand use the designer's curated palette tints exactly (alert and tag backgrounds are pixel-identical to the Figma design); a colour is only computed when a distributor overrides it
+- 21c53d8: Keep dropdown and calendar panels on the page background in dark mode, as they already were in light mode, so an inline calendar no longer reads as a lighter block
+- 555ec1a: Fix three defects found in the cross-distributor branding review: the location search drew a bright outline in dark mode (it used a raw grey that inverts), the four category tag backgrounds were near-identical greys in dark mode so tags could not be told apart, and the landing Date / Sort by / Filters selectors plus the Details date and ticket pickers now take the field corner radius, matching the form fields they behave like
+- e76ee2c: The details page now defaults to the venue's first available instance when no date is given in the URL, or when the given date is out of range or unavailable, instead of defaulting to the viewer's local today. The resolved day is computed in the venue timezone.
+- 742c807: Correct the button control label from "Disable Buttons" to "Disabled Buttons"
+- a70f740: Resolve unset brand fields through their default chains in email, restrict dark overrides to colour fields, and fix the dead radius @property registrations
+- 634fad3: Keep the filters drawer inside its container on a narrow screen. It sized its mobile panel to the window rather than the surrounding element, and because that width applied as a minimum it escaped the drawer's own cap, sliding the panel's contents out of view
+- a70f740: Make the landing Date, Sort and Filters trigger buttons less rounded (input-style radius) to match the design, instead of the fully rounded chip radius
+- cd010ec: Keep the keyboard focus ring visible on primary-filled buttons by drawing it off the control with a background-coloured band in the gap, so a primary-coloured ring on a primary button still meets the focus-appearance contrast requirement.
+- 1d78bb0: Stop a brand's `@font-face` rules showing as visible text on the page when the brand is applied through the inline theme (for example a hosted font set via `config.theme`, as the Studio preview does).
+- e1e67fa: Apply the brand heading font to the menu captions (language, currency, sort by), the filters drawer title, and the Billing address and Activity details titles on the payment page. The payment titles were rendering in the browser's default serif rather than any brand font
+- 6aab28a: Apply the brand heading font to section and card titles that previously fell back to the body font (the Payment heading, basket titles, the landing "Things to do in" title, and the event Location/About section labels), and keep the all-caps "Popular on our site" eyebrow on the body font
+- 64c0113: Fix landing-page filters: an update carrying cleared dates is no longer rejected (which silently dropped filter and location changes), and Clear all now unticks the filters drawer immediately
+- 546920c: Derive alert and category-tag backgrounds from the brand surface (web and email alike) so their text stays legible on dark brands, where the previous fixed light tints left light text on a light chip
+- 7e3d891: Show loading skeletons on the landing, search, details, help, and checkout pages so navigation no longer flashes an empty gap between the navbar and footer before content arrives
+- 4bb2a92: Stop over-cropping the destination banner so it fills its frame at full detail
+- 1d78bb0: Make the navbar logo a home link: clicking it navigates to the landing page (via the host's navigation handler), instead of doing nothing.
+- c35fd65: Keep the mobile date picker's close button and Reset/Done actions pinned while the calendar scrolls
+- 28ec36b: Apply the Nav Bar Icon Colour to the currency symbol and the search icons, so they match the basket icon instead of following the nav text colour
+- a70f740: Make hover and pressed states a neutral state layer over the element's own colour instead of a brand tint, so a strong brand hue no longer reads as a selection or error, and flip the overlay in dark mode
+- de40afc: Send Norwegian to the booking API as `no` rather than `nb`, which fixes the payment-page country list rendering every country with an empty name for `nb-NO` visitors
+- a70f740: Derive the tonal ramp in oklab toward the page background so tints keep the brand hue and match between web and email
+- 3966d2a: Use the official Apple Pay and Google Pay acceptance marks for the payment method chips, and give the card option a matching mark, so all three stay legible on dark backgrounds
+- b0e90e5: Keep emphasis markup and quoted expressions out of translatable messages, so a translation cannot drop or unbalance the placeholders around an order reference, email, phone number, token balance, or seat list. Seven messages get new ids and fall back to English until they are translated again
+- 85c4d17: Ship the refreshed translations for every locale. The seat map, empty basket, and verification screens are translated again, leaving four strings on the English fallback until the next round
+- 74ecb66: Reject a bare hostname for `config.assetsUrl` (require an absolute https URL or root-relative path, since it is concatenated into asset hrefs), accept the `logoDark` theme key, and bound the suggestion-widget `limit` to a whole number
+- 932ddd6: Roll back the whole patch when a page render fails, so a chunk or chrome that never loads can no longer leave `app.state` reporting a page that was never rendered
+- 932ddd6: Deliver a failing host callback as a `coras:error` DOM event as well as to `onError`, so hosts listening on the container see it like every other event
+- 74ecb66: Percent-encode the details id in the URL helpers so an id containing `/`, `?`, or `#` round-trips correctly
+- 74ecb66: Fix host callback contracts: `onError` fires once per error, `coras:ready` fires once on first render, a failed render no longer resolves ready as success, and a rejected `update()` can no longer leave page and state inconsistent
+- 74ecb66: Isolate multiple embeds on one page: booking sessions are scoped per distributor and a reservation in one mount no longer refreshes baskets in the others
+- 2c71b27: Make the Search Field Corners brand setting apply to the nav search and location search fields, which hardcoded a pill radius and ignored it. The default is now a pill, so those fields keep their current shape until the setting is changed
+- cd010ec: Detect the embed's dark colour scheme reliably for the seat map (reading the used `color-scheme` instead of parsing a token that never resolved to an RGB triplet) and rebuild the chart when the scheme, currency, locale, or seat limit changes.
+- 052564e: Match the seat map's colour scheme to a dark theme instead of rendering white, and keep the basket footer legible in dark theme. Reopening the seat map after reserving no longer restores seats that are no longer available. The ticket-quantity selector now shares the date selector's corner radius. The basket popover no longer closes when a control inside it removes itself on click.
+- 2317a69: Ship the translations that were stranded by a broken localization build. Around 77 strings per locale had been translated but were still rendering in English, and every Irish English string was rendering as an empty string
+- 8792015: Fade the star rating colour for the unearned part of a star instead of using a flat grey, so half stars read as the same mark on both light and dark surfaces
+- 03422c4: Take the field radius for the Stripe card element, so the expiry and CVC fields follow the same radius control as the other payment fields instead of the general radius
+- 67e506f: Keep the card fields aligned while a scroll is still in progress. The Stripe fields are positioned over the payment form from outside the shadow root, and the scheduler that tracked them restarted its timer on every scroll event, so inside a scrolling container they held a stale position for the whole gesture and only caught up once it stopped
+- ce66839: Apply the brand text colour, corner radius, and light/dark theme to the Stripe card fields (their token values are now resolved to values Stripe accepts, instead of being silently dropped)
+- 43ffce1: Make the structural brand colours reach the surfaces they name. Form inputs and the Stripe card fields now take `fieldBackground` instead of the card fill, the basket and its dropdown pointer take `menuBackground` and `menuBorder`, the filters drawer takes the page background, card borders follow `cardBorder`, and a half rating star paints its colour instead of rendering transparent
+- a70f740: Apply a custom colour's derived surface tint when a brand is set through the SDK `theme` option (and the Studio preview), not only through generated CSS - previously the base colour updated but its tint stayed the Coras palette
+- a70f740: Show the image loading skeleton, which previously rendered fully transparent
+- Updated dependencies [a70f740]
+- Updated dependencies [82367ad]
+- Updated dependencies [932ddd6]
+- Updated dependencies [555ec1a]
+- Updated dependencies [a70f740]
+- Updated dependencies [a70f740]
+- Updated dependencies [4518ed5]
+- Updated dependencies [ee26876]
+- Updated dependencies [21c53d8]
+- Updated dependencies [144db8e]
+- Updated dependencies [37348a7]
+- Updated dependencies [742c807]
+- Updated dependencies [0cbce67]
+- Updated dependencies [a70f740]
+- Updated dependencies [c3fc0a7]
+- Updated dependencies [244c509]
+- Updated dependencies [1d78bb0]
+- Updated dependencies [331ab7b]
+- Updated dependencies [aea19cf]
+- Updated dependencies [35ed62d]
+- Updated dependencies [e85b1b2]
+- Updated dependencies [546920c]
+- Updated dependencies [71e053e]
+- Updated dependencies [a70f740]
+- Updated dependencies [a70f740]
+- Updated dependencies [a70f740]
+- Updated dependencies [1168614]
+- Updated dependencies [2c71b27]
+- Updated dependencies [555ec1a]
+- Updated dependencies [c04ebaf]
+- Updated dependencies [a70f740]
+- Updated dependencies [a70f740]
+- Updated dependencies [a70f740]
+- Updated dependencies [cd010ec]
+  - @coras-io/brand-tokens@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -29,7 +29,7 @@ import { mount } from "@coras-io/embed";
 const app = mount({
   container,
   page: "landing",
-  config: { apiUrl, distributorId, locale, currency },
+  config: { apiUrl, distributorId, assetsUrl, locale, currency },
   onNavigate: (intent) => router.go(intent),
   onStateChange: (state) => router.replace(state),
 });
@@ -43,9 +43,10 @@ For the full guide and event reference, see the Coras docs at https://docs.coras
 
 ## Other entry points
 
-| Entry point                  | Purpose                                                                         |
-| ---------------------------- | ------------------------------------------------------------------------------- |
-| `@coras-io/embed/url`        | URL and state helpers: `parseCorasUrl`, `buildCorasUrl`, `createCorasUrlState`. |
-| `@coras-io/embed/tokens.css` | Design tokens as a CSS file for non-SDK consumers.                              |
-| `@coras-io/embed/errors`     | Typed error classes for host integration code.                                  |
-| `@coras-io/embed/types`      | Public TypeScript types.                                                        |
+| Entry point               | Purpose                                                                         |
+| ------------------------- | ------------------------------------------------------------------------------- |
+| `@coras-io/embed/url`     | URL and state helpers: `parseCorasUrl`, `buildCorasUrl`, `createCorasUrlState`. |
+| `@coras-io/embed/errors`  | Typed error classes for host integration code.                                  |
+| `@coras-io/embed/helpers` | Locale and currency helpers: `getLocale`, `getCurrency`.                        |
+
+Public TypeScript types come from the package root alongside `mount()`.

package/dist/components/accordion/accordion-item/accordion-item.styles.js

@@ -12,7 +12,7 @@ export default css `
 
     --accordion-label-color: var(--coras-color-text);
 
-    --accordion-arrow-color: var(--coras-color-primary-500);
+    --accordion-arrow-color: var(--coras-color-primary);
 
     --accordion-divider-color: var(--coras-color-neutral-300);
 

package/dist/components/alert/alert.styles.js

@@ -13,8 +13,8 @@ export default css `
       border-radius: 0;
       padding: 20px 30px;
       box-shadow: var(--coras-shadow-strong);
-      border-left: 2px solid var(--coras-color-error-500);
-      background-color: var(--coras-color-error-50);
+      border-left: 2px solid var(--coras-color-error);
+      background-color: var(--coras-color-error-background);
       display: flex;
       align-items: flex-start;
       gap: 20px;
@@ -28,7 +28,7 @@ export default css `
         coras-icon {
           width: 26px;
           height: 26px;
-          fill: var(--coras-color-error-500);
+          fill: var(--coras-color-error);
         }
       }
 
@@ -43,7 +43,7 @@ export default css `
           margin-bottom: 10px;
 
           .title {
-            font-family: Inter;
+            font-family: var(--coras-font-family-sans);
             font-weight: 600;
             font-size: 20px;
             line-height: 28px;
@@ -67,7 +67,7 @@ export default css `
         }
 
         .message {
-          font-family: Inter;
+          font-family: var(--coras-font-family-sans);
           font-weight: 400;
           font-size: 16px;
           line-height: 26px;
@@ -94,12 +94,12 @@ export default css `
 
   :host([variant="success"]) {
     .container {
-      border-left-color: var(--coras-color-success-500);
-      background-color: var(--coras-color-success-50);
+      border-left-color: var(--coras-color-success);
+      background-color: var(--coras-color-success-background);
 
       .icon {
         coras-icon {
-          fill: var(--coras-color-success-500);
+          fill: var(--coras-color-success);
         }
       }
     }
@@ -107,12 +107,12 @@ export default css `
 
   :host([variant="warning"]) {
     .container {
-      border-left-color: var(--coras-color-warning-500);
-      background-color: var(--coras-color-warning-50);
+      border-left-color: var(--coras-color-warning);
+      background-color: var(--coras-color-warning-background);
 
       .icon {
         coras-icon {
-          fill: var(--coras-color-warning-500);
+          fill: var(--coras-color-warning);
         }
       }
     }
@@ -120,12 +120,12 @@ export default css `
 
   :host([variant="error"]) {
     .container {
-      border-left-color: var(--coras-color-error-500);
-      background-color: var(--coras-color-error-50);
+      border-left-color: var(--coras-color-error);
+      background-color: var(--coras-color-error-background);
 
       .icon {
         coras-icon {
-          fill: var(--coras-color-error-500);
+          fill: var(--coras-color-error);
         }
       }
     }

package/dist/components/attraction-card/base/attraction-card.styles.js

@@ -4,9 +4,13 @@ export default css `
   ${component}
 
   :host {
-    --attraction-card-background: var(--coras-color-surface);
-    --attraction-card-border-color: var(--coras-color-neutral-50);
-    --attraction-card-border-hover-color: var(--coras-color-neutral-300);
+    --attraction-card-background: var(--coras-color-card);
+    --attraction-card-border-color: var(--coras-color-card-border);
+    --attraction-card-border-hover-color: color-mix(
+      in srgb,
+      var(--coras-color-card-border),
+      var(--coras-state-overlay) var(--coras-state-active)
+    );
     --attraction-card-border-radius: var(--coras-radius-sm);
     --attraction-card-shadow-box: var(--coras-shadow-lg);
     --attraction-card-hover-shadow-box: var(--coras-shadow-strong);

package/dist/components/attraction-discovery/attraction-discovery.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --attraction-discovery-text-column-width: 22.75rem;
 
-    --attraction-discovery-background: var(--coras-color-secondary-400);
+    --attraction-discovery-background: var(--coras-color-secondary);
     --attraction-discovery-color: var(--coras-palette-white);
     --attraction-discovery-image-border-radius: var(--coras-radius-sm);
     --attraction-discovery-image-box-shadow: var(--coras-shadow-strong);

package/dist/components/attraction-header/attraction-header.styles.js

@@ -4,7 +4,7 @@ export default css `
   ${component}
 
   :host {
-    --attraction-header-attraction-name-font-size: var(--coras-font-size-3xl);
+    --attraction-header-attraction-name-font-size: var(--coras-font-size-title);
     --attraction-header-attraction-name-font-weight: var(
       --coras-font-weight-semibold
     );

package/dist/components/attraction-option/attraction-option.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --padding-inline: 1.5rem;
 
-    --attraction-option-border-color: var(--coras-color-neutral-200);
+    --attraction-option-border-color: var(--coras-color-card-border);
     --attraction-option-border-radius: var(--coras-radius-md);
     --attraction-option-color-box-shadow: var(--coras-shadow-sm);
 
@@ -20,7 +20,7 @@ export default css `
     --attraction-option-header-line-height: 1.625rem;
     --attraction-option-header-color: var(--coras-color-text);
 
-    --attraction-option-divider-border-color: var(--coras-color-neutral-200);
+    --attraction-option-divider-border-color: var(--coras-color-divider);
 
     --attraction-option-details-font-size: var(--coras-font-size-sm);
     --attraction-option-details-font-weight: var(--coras-font-weight-normal);
@@ -40,7 +40,7 @@ export default css `
     --attraction-option-one-last-option-line-height: var(--coras-font-size-sm);
     --attraction-option-one-last-option-color: var(--coras-color-text);
     --attraction-option-one-last-option-background-color: var(
-      --coras-color-error-50
+      --coras-color-error-background
     );
 
     --attraction-option-options-border-color: var(--coras-color-neutral-200);
@@ -100,7 +100,7 @@ export default css `
       padding-inline: var(--padding-inline);
       padding-top: 1rem;
       padding-bottom: 1rem;
-      background-color: var(--coras-color-surface-muted);
+      background-color: var(--coras-color-card-muted);
 
       .details {
         font-size: var(--attraction-option-details-font-size);

package/dist/components/basket/basket.styles.js

@@ -4,34 +4,36 @@ export default css `
   ${component}
 
   :host {
-    --basket-items-divider-color: var(--coras-color-neutral-200);
-    --basket-items-actions-background-color: var(--coras-color-surface-muted);
-    --basket-items-background-color: var(--coras-color-surface);
+    --basket-items-divider-color: var(--coras-color-divider);
+    --basket-items-actions-background-color: color-mix(
+      in oklab,
+      var(--coras-color-menu) 92%,
+      var(--coras-color-text) 8%
+    );
+    --basket-items-background-color: var(--coras-color-menu);
+    --basket-items-border-color: var(--coras-color-menu-border);
     --basket-items-shadow: var(--coras-shadow-md);
     --basket-items-border-radius: var(--coras-radius-sm);
 
-    /* Accent color required by design (var(--coras-color-text)), expose as overrideable var */
     --basket-accent-color: var(
       --coras-basket-accent-color,
       var(--coras-color-text)
     );
 
-    /* Totals styling (labels and values use the accent color) */
-    --basket-total-label-color: var(--basket-accent-color);
-    --basket-total-value-color: var(--basket-accent-color);
-    --basket-total-label-font-size: var(--coras-font-size-lg); /* 18px */
-    --basket-total-value-font-size: var(--coras-font-size-xl); /* 20px */
-    --basket-total-font-weight: var(--coras-font-weight-semibold); /* 600 */
+    --basket-total-label-color: var(--coras-color-text);
+    --basket-total-value-color: var(--coras-color-text);
+    --basket-total-label-font-size: var(--coras-font-size-lg);
+    --basket-total-value-font-size: var(--coras-font-size-xl);
+    --basket-total-font-weight: var(--coras-font-weight-semibold);
     --basket-total-value-column-min-width: 7.5rem;
     --basket-total-value-column-gap: 1rem;
     --basket-earn-pill-offset: 0.75rem;
 
-    /* Earn pill background to primary.30 (#EEF0FF) and text to accent */
-    --basket-earn-pill-bg: var(--coras-color-primary-200);
+    --basket-earn-pill-bg: var(--coras-color-primary-tint);
     --basket-earn-pill-text: var(--basket-accent-color);
-    --basket-earn-pill-radius: var(--coras-radius-lg); /* 24px */
-    --basket-earn-pill-font-size: var(--coras-font-size-xs); /* 12px */
-    --basket-earn-pill-font-weight: var(--coras-font-weight-bold); /* 700 */
+    --basket-earn-pill-radius: var(--coras-radius-lg);
+    --basket-earn-pill-font-size: var(--coras-font-size-xs);
+    --basket-earn-pill-font-weight: var(--coras-font-weight-bold);
   }
 
   :host([expanded]) .basket {
@@ -55,11 +57,11 @@ export default css `
   }
 
   .basket {
-    width: 25.875rem; /* 414px */
+    width: 25.875rem;
     background-color: var(--basket-items-background-color);
-    border-radius: 16px;
+    border-radius: var(--basket-items-border-radius);
     box-shadow: 0px 4px 4px 0px color-mix(in srgb, black, transparent 90%);
-    border: 1px solid var(--basket-items-divider-color);
+    border: 1px solid var(--basket-items-border-color);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -71,6 +73,7 @@ export default css `
       border-bottom: 0.0625rem solid var(--basket-items-divider-color);
 
       .basket-title {
+        font-family: var(--coras-font-family-heading);
         font-size: var(--coras-font-size-xl);
         font-weight: 600;
         line-height: 1.75rem;
@@ -87,15 +90,13 @@ export default css `
     .basket-content {
       max-height: 29.25rem;
       overflow-y: auto;
-      /* The header's border-bottom is the single divider above the content; a
-         border-top here would double it. The footer carries the lower divider. */
     }
 
     .footer {
       border-top: 0.0625rem solid var(--basket-items-divider-color);
       background-color: var(--basket-items-actions-background-color);
-      border-bottom-right-radius: 16px;
-      border-bottom-left-radius: 16px;
+      border-bottom-right-radius: var(--basket-items-border-radius);
+      border-bottom-left-radius: var(--basket-items-border-radius);
 
       .price {
         display: flex;
@@ -104,8 +105,8 @@ export default css `
         padding: 1.25rem;
         font-size: 1.2rem;
         font-weight: 600;
-        border-bottom-right-radius: 16px;
-        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: var(--basket-items-border-radius);
+        border-bottom-left-radius: var(--basket-items-border-radius);
       }
 
       .totals .total-row {
@@ -183,8 +184,8 @@ export default css `
       .actions {
         padding: 0 1.25rem 1.25rem;
         background-color: var(--basket-items-actions-background-color);
-        border-bottom-right-radius: 16px;
-        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: var(--basket-items-border-radius);
+        border-bottom-left-radius: var(--basket-items-border-radius);
 
         ::slotted(coras-button) {
           width: 100%;

package/dist/components/basket-empty/basket-empty.styles.js

@@ -21,6 +21,7 @@ export default css `
       padding: 0;
 
       &:first-of-type {
+        font-family: var(--coras-font-family-heading);
         font-weight: var(--basket-empty-caption-font-weight);
         font-size: var(--basket-empty-caption-font-size);
         line-height: var(--basket-empty-caption-line-height);

package/dist/components/basket-item/basket-item.component.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
-import { localized } from "@lit/localize";
+import { localized, msg } from "@lit/localize";
 import styles from "./basket-item.styles.js";
 import "../icon/icon.js";
 import "../image/image.js";
@@ -40,10 +40,13 @@ let CorasBasketItem = class CorasBasketItem extends LitElement {
     `;
     }
     renderSeatsInfo() {
+        if (!this.section && !this.seats) {
+            return nothing;
+        }
         return html `
       <div class="seats-info">
-        <span>${this.section}</span>
-        <span>${this.seats}</span>
+        ${this.section ? html `<span>${this.section}</span>` : nothing}
+        ${this.seats ? html `<span>${this.seats}</span>` : nothing}
       </div>
     `;
     }
@@ -64,6 +67,9 @@ let CorasBasketItem = class CorasBasketItem extends LitElement {
         return html `
       <div class="price-info">
         <span class="total-price">${this.totalPrice}</span>
+        ${this.price
+            ? html `<span class="unit-price">${this.price} ${msg("ea")}</span>`
+            : nothing}
       </div>
     `;
     }

package/dist/components/basket-item/basket-item.styles.js

@@ -10,8 +10,8 @@ export default css `
     --basket-item-title-font-weight: var(--coras-font-weight-medium);
     --basket-item-info-font-size: var(--coras-font-size-sm);
     --basket-item-info-font-weight: var(--coras-font-weight-normal);
-    --basket-item-info-color: var(--coras-color-text-secondary);
-    --basket-item-border-color: var(--coras-color-neutral-200);
+    --basket-item-info-color: var(--coras-color-text-muted);
+    --basket-item-border-color: var(--coras-color-divider);
     --basket-item-price-font-size: var(--coras-font-size-base);
     --basket-item-price-font-weight: var(--coras-font-weight-semibold);
     --basket-item-price-color: var(--coras-color-text);
@@ -98,6 +98,12 @@ export default css `
         font-weight: var(--basket-item-price-font-weight);
         color: var(--basket-item-price-color);
       }
+
+      .unit-price {
+        font-size: var(--basket-item-info-font-size);
+        font-weight: var(--basket-item-info-font-weight);
+        color: var(--basket-item-info-color);
+      }
     }
 
     .ticket-types {
@@ -144,7 +150,6 @@ export default css `
 
     .bottom {
       display: flex;
-      justify-content: space-between;
       align-items: flex-end;
       width: 100%;
       font-size: var(--basket-item-info-font-size);
@@ -163,6 +168,7 @@ export default css `
         display: flex;
         justify-content: flex-end;
         align-self: flex-end;
+        margin-inline-start: auto;
       }
     }
   }

package/dist/components/basket-item-ticket/basket-item-ticket.styles.js

@@ -11,9 +11,7 @@ export default css `
     --basket-item-ticket-total-price-font-weight: var(
       --coras-font-weight-semibold
     );
-    --basket-item-ticket-price-per-ticket-color: var(
-      --coras-color-text-secondary
-    );
+    --basket-item-ticket-price-per-ticket-color: var(--coras-color-text-muted);
     --basket-item-ticket-price-per-ticket-font-size: var(--coras-font-size-xs);
     --basket-item-ticket-price-per-ticket-font-weight: var(
       --coras-font-weight-normal

package/dist/components/basket-mobile/basket-mobile.styles.js

@@ -4,13 +4,13 @@ export default css `
   ${component}
 
   :host {
-    --basket-mobile-navbar-height: 80px; /* Approximate navbar height */
+    --basket-mobile-navbar-height: 80px;
     --basket-mobile-overlay-bg-color: color-mix(
       in srgb,
-      black,
-      transparent 50%
+      var(--coras-color-scrim) 50%,
+      transparent
     );
-    --basket-mobile-bg-color: var(--coras-palette-white);
+    --basket-mobile-bg-color: var(--coras-color-menu);
     --basket-mobile-border-radius: var(--coras-radius-lg) var(--coras-radius-lg)
       0 0;
     --basket-mobile-box-shadow: var(--coras-shadow-lg);
@@ -60,7 +60,7 @@ export default css `
 
   @media (max-width: 768px) {
     :host {
-      --basket-mobile-navbar-height: 60px; /* Smaller navbar on mobile */
+      --basket-mobile-navbar-height: 60px;
       --basket-mobile-border-radius: 0;
     }
 

package/dist/components/better-carousel/better-carousel.styles.js

@@ -19,6 +19,8 @@ export default css `
   .nav-btn {
     position: absolute;
     top: 50%;
+    z-index: 1; /* Paint above the relatively-positioned coras-image, which
+                   otherwise covers the earlier-in-DOM prev button. */
     opacity: 80%;
 
     transition: opacity 0.1s linear;