@coras-io/embed 0.2.0 → 0.4.0

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

@@ -44,10 +44,8 @@ declare const CorasLandingPage_base: import("../../contexts/utils.js").Construct
     dispatchPageUpdate(params: import("../../contexts/events.context.js").PageDispatchInput): void;
 }> & typeof LitElement;
 /**
- * Landing page component for browsing attractions and experiences.
- *
- * @fires coras:navigate - Dispatched when navigating to another page (search result, page navigation)
- * @fires coras:state-change - Dispatched when in-page params change (filters, sorting, dates)
+ * @fires coras:navigate
+ * @fires coras:state-change
  */
 export declare class CorasLandingPage extends CorasLandingPage_base {
     static styles: CSSResultGroup;
@@ -121,6 +119,8 @@ export declare class CorasLandingPage extends CorasLandingPage_base {
     private renderPoints;
     private renderAttractionCards;
     private renderBreadcrumbs;
+    private renderAttractionsSkeleton;
+    private renderFiltersSkeleton;
     private renderAttractions;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -52,10 +52,8 @@ import "../../components/layout/layout.js";
 import { apiGet, withErrorHandling } from "../../core/api/queries.js";
 import { addRecentlySelectedSearches } from "../../containers/navbar/navbar.utils.js";
 /**
- * Landing page component for browsing attractions and experiences.
- *
- * @fires coras:navigate - Dispatched when navigating to another page (search result, page navigation)
- * @fires coras:state-change - Dispatched when in-page params change (filters, sorting, dates)
+ * @fires coras:navigate
+ * @fires coras:state-change
  */
 let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixin(LocationSearchMixin(BaseMixin(LitElement)))) {
     constructor() {
@@ -76,13 +74,14 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
             this.startDate,
             this.endDate,
         ];
+        // The filters drawer's working selection, reactive so clearing or re-syncing
+        // it from the applied params repaints the checkboxes.
         this.selectedPriceOptions = [];
         this.selectedDurationOptions = [];
         this._selectedCategories = "";
         this.activePriceOptions = null;
         this.activeDurationOptions = null;
         this.activeCategorySlugs = null;
-        // prevent duplicate writes within a single component lifecycle
         this.lastSavedRecentValue = null;
         this.geolocationTask = new Task(this, {
             autoRun: false,
@@ -201,14 +200,11 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         if (getLocale() !== this.locale) {
             setLocale(this.locale);
         }
-        // Record recently viewed location (country or city)
         if (this.locationsData && (this.country || this.city)) {
-            // Try to find the readable names
             const matchingCountry = this.locationsData
                 .flatMap((continent) => continent.countries ?? [])
                 .find((country) => country?.slug === this.country);
             const matchingCity = matchingCountry?.cities?.find((city) => city?.slug === this.city);
-            // Prefer city if present, otherwise country
             const item = this.city && matchingCity
                 ? { type: "city", value: this.city, name: matchingCity.name }
                 : this.country && matchingCountry
@@ -223,26 +219,16 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
                     addRecentlySelectedSearches(item);
                     this.lastSavedRecentValue = item.value;
                 }
-                catch {
-                    // noop
-                }
+                catch { }
             }
         }
         if (changedProperties.has("startDate") ||
             changedProperties.has("endDate")) {
             this.selectedDates = [this.startDate, this.endDate];
-            if (changedProperties.get("startDate") &&
-                changedProperties.get("startDate") !== "") {
-                const startDateISO = new Date(changedProperties.get("startDate")).toISOString();
-                this.selectedMonth = format(parseISO(startDateISO), "yyyy-MM");
+            if (this.startDate !== "") {
+                this.selectedMonth = format(parseISO(this.startDate), "yyyy-MM");
             }
         }
-        if (changedProperties.has("startDate") &&
-            changedProperties.get("startDate") &&
-            changedProperties.get("startDate") !== "") {
-            const startDateISO = new Date(changedProperties.get("startDate")).toISOString();
-            this.selectedMonth = format(parseISO(startDateISO), "yyyy-MM");
-        }
         if (changedProperties.has("duration")) {
             this.selectedDurationOptions = this.duration
                 ? this.duration.split(",").filter(Boolean)
@@ -258,6 +244,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
             }
         }
         if (changedProperties.has("categories")) {
+            this._selectedCategories = this.categories;
             this.updateActiveFilters();
         }
     }
@@ -303,7 +290,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         <div slot="trigger" @click=${this.toggleDateFilter}>
           <coras-button
             variant=${variant}
-            radius="chip"
+            radius="field"
             border-color="light"
             ?rotate-suffix=${this.isDateFilterOpen && !hasSelectedDates}
           >
@@ -381,7 +368,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         return html `
       <coras-button
         variant=${variant}
-        radius="chip"
+        radius="field"
         border-color="light"
         @click=${this.toggleDateFilter}
       >
@@ -405,21 +392,21 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
             @calendar-month-changed=${this.handleCalendarMonthChange}
             @date-selected=${this.setSelectedDates}
           ></coras-multi-month-calendar>
-          <div class="select-dates-actions">
-            <coras-button
-              variant="outlined"
-              border-color="medium"
-              @click=${this.handleDatesResetBtnClicked}
-            >
-              ${msg("Reset")}
-            </coras-button>
-            <coras-button
-              variant="primary"
-              @click=${this.handleDatesApplyBtnClicked}
-            >
-              ${msg("Done")}
-            </coras-button>
-          </div>
+        </div>
+        <div slot="footer" class="select-dates-actions">
+          <coras-button
+            variant="outlined"
+            border-color="medium"
+            @click=${this.handleDatesResetBtnClicked}
+          >
+            ${msg("Reset")}
+          </coras-button>
+          <coras-button
+            variant="primary"
+            @click=${this.handleDatesApplyBtnClicked}
+          >
+            ${msg("Done")}
+          </coras-button>
         </div>
       </coras-drawer>
     `;
@@ -456,7 +443,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         <coras-button
           slot="trigger"
           variant="outlined"
-          radius="chip"
+          radius="field"
           border-color="light"
           ?rotate-suffix=${this.isSortingSelectorOpen}
           @click=${this.toggleSortingSelector}
@@ -514,7 +501,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         return html `
       <coras-button
         variant=${variant}
-        radius="chip"
+        radius="field"
         border-color="light"
         @click=${this.toggleFiltersDrawer}
       >
@@ -599,12 +586,10 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
         if (!filters)
             return slug;
         const categoryFilters = filters.filter((filter) => filter.type === "category");
-        // Search in main categories first
         for (const categoryFilter of categoryFilters) {
             if (categoryFilter.value === slug) {
                 return categoryFilter.label;
             }
-            // Search in subcategories (options)
             const subcategory = categoryFilter.options.find((option) => option.value === slug);
             if (subcategory) {
                 return subcategory.label;
@@ -677,11 +662,9 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
     }
     updateSelectedPriceOptions(key) {
         if (this.selectedPriceOptions.includes(key)) {
-            // If clicking the same option, deselect it (clear all)
             this.selectedPriceOptions = [];
         }
         else {
-            // If clicking a different option, select only that one (single selection)
             this.selectedPriceOptions = [key];
         }
         this.requestUpdate();
@@ -708,7 +691,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
                 `category-${index}`,
             media: [],
             subcategories: categoryFilter.options.map((option, subIndex) => ({
-                id: subIndex + 1000, // Use higher IDs for subcategories to avoid conflicts
+                id: subIndex + 1000,
                 name: option.label,
                 slug: option.value,
                 media: [],
@@ -719,7 +702,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
     renderCategoriesTree() {
         return this.filtersTask.render({
             error: () => html `error`,
-            loading: () => html `loading`,
+            pending: () => this.renderFiltersSkeleton(),
             complete: (filters) => {
                 if (!filters.data)
                     return nothing;
@@ -727,7 +710,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
                 return html `
           <coras-categories-tree
             .categories=${transformedCategories}
-            selectedCategories=${this.categories}
+            .selectedCategories=${this._selectedCategories}
             @selection-changed=${(event) => {
                     this._selectedCategories = event.detail;
                     event.stopPropagation();
@@ -754,7 +737,7 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
     renderFiltersContent() {
         return this.filtersTask.render({
             error: () => html `error`,
-            loading: () => html `loading`,
+            pending: () => this.renderFiltersSkeleton(),
             complete: (filters) => {
                 if (!filters.data)
                     return nothing;
@@ -789,22 +772,6 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
     }
     renderShowMoreButton(_) {
         return html `<span class="show-more-button" aria-hidden="true"></span>`;
-        // return html`
-        //   <coras-button
-        //     class="show-more-button"
-        //     variant="text"
-        //     @click=${() =>
-        //       this.dispatchPageUpdate({
-        //         city: params.city || this.city || undefined,
-        //         country: params.country || this.country || undefined,
-        //         categories: params.category?.join(",") || undefined,
-        //         sorting: params.sorting || undefined,
-        //         startDate: params.date_start || undefined,
-        //       })}
-        //   >
-        //     ${msg("Show more")}
-        //   </coras-button>
-        // `;
     }
     renderPoints(price) {
         if (this.calculateRewardPoints) {
@@ -899,13 +866,37 @@ let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixi
       </div>
     `;
     }
+    renderAttractionsSkeleton() {
+        return html `
+      <section class="landing-skeleton" aria-hidden="true">
+        ${Array.from({ length: 2 }, () => html `
+            <div class="sk-section">
+              <div class="coras-skeleton sk-title"></div>
+              <div class="sk-cards">
+                ${Array.from({ length: 4 }, () => html `<div class="coras-skeleton sk-card"></div>`)}
+              </div>
+            </div>
+          `)}
+      </section>
+      <span class="coras-sr-only" role="status">${msg("Loading")}</span>
+    `;
+    }
+    renderFiltersSkeleton() {
+        return html `
+      <div class="filters-skeleton" aria-hidden="true">
+        ${Array.from({ length: 5 }, (_, index) => html `<div
+              class="coras-skeleton sk-line ${index % 2 ? "sk-short" : ""}"
+            ></div>`)}
+      </div>
+    `;
+    }
     renderAttractions() {
         return this.attractionsSearchTask.render({
             error: () => {
                 this.showErrorModalOnce();
                 return html ``;
             },
-            loading: () => html `loading`,
+            pending: () => this.renderAttractionsSkeleton(),
             complete: (result) => {
                 if (!result.data)
                     return nothing;
@@ -994,6 +985,15 @@ __decorate([
 __decorate([
     state()
 ], CorasLandingPage.prototype, "isFiltersDrawerOpened", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "selectedPriceOptions", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "selectedDurationOptions", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "_selectedCategories", void 0);
 __decorate([
     state()
 ], CorasLandingPage.prototype, "activeCategorySlugs", void 0);

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

@@ -1,12 +1,78 @@
 import { css } from "lit";
 import component from "../../styles/defaults/component.js";
+import { skeleton, visuallyHidden } from "../../styles/primitives.js";
 export default css `
   ${component}
+  ${skeleton}
+  ${visuallyHidden}
+
+  .landing-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+
+    .sk-section {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+
+    .sk-title {
+      margin-inline: 1rem;
+      width: 18rem;
+      max-width: 60%;
+      height: 1.75rem;
+    }
+
+    .sk-cards {
+      display: flex;
+      gap: 1.25rem;
+      padding-inline: 1rem;
+      overflow: hidden;
+    }
+
+    .sk-card {
+      flex-shrink: 0;
+      width: 250px;
+      height: 380px;
+    }
+  }
+
+  .filters-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+
+    .sk-line {
+      width: 100%;
+      height: 1.25rem;
+
+      &.sk-short {
+        width: 50%;
+      }
+    }
+  }
 
   .calendar {
     padding: 1rem;
   }
 
+  .select-dates-container {
+    padding: 1rem;
+  }
+
+  .select-dates-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--coras-color-divider);
+    background-color: var(--coras-color-menu);
+  }
+
   coras-layout {
     container-type: inline-size;
     container-name: coras-layout;
@@ -23,13 +89,14 @@ export default css `
         column-gap: 0.5rem;
         row-gap: 0.75rem;
         padding-block: 1rem;
-        border-top: 1px solid var(--coras-color-neutral-200);
-        border-bottom: 1px solid var(--coras-color-neutral-200);
+        border-top: 1px solid var(--coras-color-divider);
+        border-bottom: 1px solid var(--coras-color-divider);
       }
     }
 
     .attractions-sections {
       .popular-title {
+        font-family: var(--coras-font-family-sans);
         font-weight: var(--coras-font-weight-normal);
         font-size: var(--coras-font-size-sm);
         line-height: 16px;
@@ -43,7 +110,7 @@ export default css `
           align-items: center;
           gap: 1rem;
           font-weight: 600;
-          font-size: 22px;
+          font-size: calc(22px * var(--coras-brand-heading-scale));
           line-height: 30px;
           letter-spacing: 0.2px;
         }

package/dist/views/payment-page/partials/activity-details/activity-details.styles.js

@@ -5,50 +5,27 @@ export default css `
   }
 
   h2 {
-    font-size: var(
-      --payment-page-header-font-size,
-      var(--font-size-lg, 1.5rem)
-    );
-    line-height: var(
-      --payment-page-header-line-height,
-      var(--font-line-height-lg, 1.75rem)
-    );
+    font-family: var(--coras-font-family-heading);
+    font-size: var(--payment-page-header-font-size);
+    line-height: var(--payment-page-header-line-height);
     font-weight: 600;
     letter-spacing: 0.2px;
     margin: 0 0 1rem 0;
-    color: var(--payment-page-header-color, var(--color-text-primary, #161c44));
+    color: var(--payment-page-header-color);
   }
 
   h3 {
-    font-size: var(
-      --activities-details-label-font-size,
-      var(--font-size-2xl, 1.5rem)
-    );
-    font-weight: var(
-      --activities-details-label-font-weight,
-      var(--font-weight-semibold, 600)
-    );
+    font-size: var(--activities-details-label-font-size);
+    font-weight: var(--activities-details-label-font-weight);
     margin: 0 0 0.75rem 0;
-    color: var(
-      --activities-details-label-color,
-      var(--color-text-primary, #161c44)
-    );
+    color: var(--activities-details-label-color);
   }
 
   h4 {
-    font-size: var(
-      --activities-details-label-span-font-size,
-      var(--font-size-base, 1rem)
-    );
-    font-weight: var(
-      --activities-details-label-span-font-weight,
-      var(--font-weight-medium, 500)
-    );
+    font-size: var(--activities-details-label-span-font-size);
+    font-weight: var(--activities-details-label-span-font-weight);
     margin: 0 0 0.25rem 0;
-    color: var(
-      --activities-details-label-color,
-      var(--color-text-primary, #161c44)
-    );
+    color: var(--activities-details-label-color);
   }
 
   .fields-container {

package/dist/views/payment-page/partials/billing-address/billing-address.styles.js

@@ -5,18 +5,13 @@ export default css `
   }
 
   h2 {
-    font-size: var(
-      --payment-page-header-font-size,
-      var(--font-size-lg, 1.5rem)
-    );
-    line-height: var(
-      --payment-page-header-line-height,
-      var(--font-line-height-lg, 1.75rem)
-    );
+    font-family: var(--coras-font-family-heading);
+    font-size: var(--payment-page-header-font-size);
+    line-height: var(--payment-page-header-line-height);
     font-weight: 600;
     letter-spacing: 0.2px;
     margin: 0 0 1rem 0;
-    color: var(--payment-page-header-color, var(--color-text-primary, #161c44));
+    color: var(--payment-page-header-color);
   }
 
   .fields-container {

package/dist/views/payment-page/partials/confirmation/confirmation.styles.js

@@ -2,28 +2,28 @@ import { css } from "lit";
 export default css `
   :host {
     --confirmation-text-color: var(--coras-color-text);
-    --confirmation-container-border-color: var(--coras-color-neutral-200);
+    --confirmation-container-border-color: var(--coras-color-card-border);
     --confirmation-container-border-radius: var(--coras-radius-md);
-    --confirmation-divider-color: var(--coras-color-neutral-200);
+    --confirmation-divider-color: var(--coras-color-divider);
     --confirmation-success-icon-color: var(--coras-color-text);
     --confirmation-title-color: var(--coras-color-text);
     --confirmation-title-font-size: var(--coras-font-size-2xl);
     --confirmation-title-font-weight: var(--coras-font-weight-bold);
     --confirmation-order-reference-font-size: var(--coras-font-size-lg);
     --confirmation-email-font-size: var(--coras-font-size-base);
-    --confirmation-email-color: var(--coras-color-text-secondary);
+    --confirmation-email-color: var(--coras-color-text-muted);
     --confirmation-ticket-title-font-size: var(--coras-font-size-xl);
     --confirmation-ticket-title-font-weight: var(--coras-font-weight-bold);
     --confirmation-ticket-title-color: var(--coras-color-text);
     --confirmation-ticket-image-border-radius: var(--coras-radius-sm);
     --confirmation-info-label-font-size: var(--coras-font-size-base);
-    --confirmation-info-label-color: var(--coras-color-text-secondary);
+    --confirmation-info-label-color: var(--coras-color-text-muted);
     --confirmation-info-value-font-size: var(--coras-font-size-base);
     --confirmation-info-value-font-weight: var(--coras-font-weight-medium);
     --confirmation-info-value-color: var(--coras-color-text);
     --confirmation-help-text-font-size: var(--coras-font-size-base);
-    --confirmation-help-text-color: var(--coras-color-text-secondary);
-    --confirmation-help-link-color: var(--coras-color-primary-400);
+    --confirmation-help-text-color: var(--coras-color-text-muted);
+    --confirmation-help-link-color: var(--coras-color-link);
     --confirmation-help-link-font-weight: var(--coras-font-weight-medium);
 
     display: block;

package/dist/views/payment-page/partials/hotel-pickup-list/hotel-pickup-list.styles.js

@@ -15,8 +15,8 @@ export default css `
         display: none;
       }
 
-      -ms-overflow-style: none; /* IE and Edge */
-      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none;
+      scrollbar-width: none;
 
       .pickup-item {
         cursor: pointer;
@@ -30,7 +30,7 @@ export default css `
         &:hover {
           background-color: color-mix(
             in srgb,
-            var(--coras-color-error-500),
+            var(--coras-color-error),
             white 60%
           );
         }
@@ -38,7 +38,7 @@ export default css `
         &.selected {
           background-color: color-mix(
             in srgb,
-            var(--coras-color-error-500),
+            var(--coras-color-error),
             white 60%
           );
         }

package/dist/views/payment-page/partials/payment-type-selector/payment-type-selector.styles.js

@@ -12,6 +12,7 @@ export default css `
 
   .header {
     color: var(--coras-color-text);
+    font-family: var(--coras-font-family-heading);
     font-size: 24px;
     font-style: normal;
     font-weight: 600;

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

@@ -36,7 +36,7 @@ export declare class CorasStripe extends LitElement {
     private isCardNumberValid;
     private isCardExpiryValid;
     private isCardCvcValid;
-    private debouncedPortalUpdate;
+    private portalUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;

package/dist/views/payment-page/partials/stripe/stripe.component.js

@@ -15,9 +15,9 @@ import "../../../../components/joined-fields/joined-fields.js";
 import "../../../../components/input-field/input-field.js";
 import styles from "./stripe.styles.js";
 import { localized, msg } from "@lit/localize";
-import { CSS_CLASSES, PLACEHOLDERS, PORTAL_UPDATE_DEBOUNCE_MS, INITIAL_PORTAL_UPDATE_DELAY_MS, } from "./stripe.constants.js";
+import { CSS_CLASSES, PLACEHOLDERS, INITIAL_PORTAL_UPDATE_DELAY_MS, } from "./stripe.constants.js";
 import { fireInternalEvent, } from "../../../../core/events.js";
-import { validateStripeKey, extractThemeColors, createStripeElementStyle, buildStripeAppearance, createPortalElement, positionPortalElement, createDebouncedRAF, normalizeLocale, normalizeCountry, normalizeCurrency, } from "./stripe.utils.js";
+import { validateStripeKey, extractThemeColors, createStripeElementStyle, buildStripeAppearance, createPortalElement, positionPortalElement, createFrameThrottle, normalizeLocale, normalizeCountry, normalizeCurrency, } from "./stripe.utils.js";
 let CorasStripe = class CorasStripe extends LitElement {
     constructor() {
         super(...arguments);
@@ -52,9 +52,9 @@ let CorasStripe = class CorasStripe extends LitElement {
         this.isCardNumberValid = false;
         this.isCardExpiryValid = false;
         this.isCardCvcValid = false;
-        this.debouncedPortalUpdate = null;
+        this.portalUpdate = null;
         this.handleWindowEvent = () => {
-            this.debouncedPortalUpdate?.execute();
+            this.portalUpdate?.execute();
         };
         this.handleCardChange = (event) => {
             const errorMessage = event.error?.message ?? "";
@@ -113,11 +113,11 @@ let CorasStripe = class CorasStripe extends LitElement {
         document.body.appendChild(this.cardNumberPortal);
         document.body.appendChild(this.cardExpiryPortal);
         document.body.appendChild(this.cardCvcPortal);
-        this.debouncedPortalUpdate = createDebouncedRAF(() => this.positionAllPortals(), PORTAL_UPDATE_DEBOUNCE_MS);
+        this.portalUpdate = createFrameThrottle(() => this.positionAllPortals());
     }
     cleanupPortals() {
-        this.debouncedPortalUpdate?.cancel();
-        this.debouncedPortalUpdate = null;
+        this.portalUpdate?.cancel();
+        this.portalUpdate = null;
         this.cardNumberPortal?.remove();
         this.cardExpiryPortal?.remove();
         this.cardCvcPortal?.remove();
@@ -143,7 +143,7 @@ let CorasStripe = class CorasStripe extends LitElement {
         this.intersectionObserver = null;
     }
     updatePortals() {
-        this.debouncedPortalUpdate?.execute();
+        this.portalUpdate?.execute();
     }
     positionAllPortals() {
         const portals = [
@@ -190,7 +190,7 @@ let CorasStripe = class CorasStripe extends LitElement {
                 // Theme the hosted card iframe to match the embed's surface, brand, and
                 // colour scheme (light/dark) - the per-element style only sets text.
                 this.elements = this.stripe.elements({
-                    appearance: buildStripeAppearance(getComputedStyle(this)),
+                    appearance: buildStripeAppearance(this),
                 });
                 this.initializeCardElement();
                 this.initializePaymentRequest();
@@ -256,11 +256,10 @@ let CorasStripe = class CorasStripe extends LitElement {
             return;
         }
         this.destroyStripeElements();
-        const computed = getComputedStyle(this);
-        const colors = extractThemeColors(computed);
+        const colors = extractThemeColors(this);
         const baseStyle = createStripeElementStyle(colors);
         // Re-theme on re-init so a colour-scheme change is reflected in the iframe.
-        this.elements.update({ appearance: buildStripeAppearance(computed) });
+        this.elements.update({ appearance: buildStripeAppearance(this) });
         this.cardNumberElement = this.elements.create("cardNumber", {
             style: baseStyle,
             placeholder: PLACEHOLDERS.CARD_NUMBER,