@coras-io/embed 0.1.0 → 0.1.2

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

@@ -1,10 +1,10 @@
-import { CSSResultGroup, LitElement, TemplateResult } from "lit";
+import { type CSSResultGroup, LitElement, type TemplateResult } from "lit";
 import "../../../../components/dropdown/dropdown.js";
 import "../../../../components/input-field/input-field.js";
 import "../../../../components/icon/icon.js";
 import "../../../../components/select-list/select-list.js";
 import "../../../../components/select-list/select-option/select-option.js";
-import { components } from "../../../../core/types/api-schema.js";
+import type { components } from "../../../../core/types/api-schema.js";
 /**
  * @fires value-changed - Dispatched when a country is selected
  */

package/dist/views/payment-page/partials/country-field/country-field.component.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var CorasCountryField_1;
-import { LitElement, html } from "lit";
+import { LitElement, html, } from "lit";
 import { property, state } from "lit/decorators.js";
 import { localized, msg } from "@lit/localize";
 import "../../../../components/dropdown/dropdown.js";

package/dist/views/payment-page/partials/hotel-pickup-field/hotel-pickup-field.component.d.ts

@@ -1,5 +1,5 @@
-import { CSSResultGroup, LitElement, nothing } from "lit";
-import { components } from "../../../../core/types/api-schema.js";
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { components } from "../../../../core/types/api-schema.js";
 import "../../../../components/dropdown/dropdown.js";
 import "../../../../components/input-field/input-field.js";
 import "../../../../components/icon/icon.js";
@@ -15,5 +15,5 @@ export declare class CorasHotelPickupField extends LitElement {
     hasError: boolean;
     private dropdownOpen;
     private getSelectedPickupName;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
 }

package/dist/views/payment-page/partials/hotel-pickup-list/hotel-pickup-list.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, LitElement } from "lit";
+import { type CSSResultGroup, LitElement } from "lit";
 import "@lit-labs/virtualizer";
-import { components } from "../../../../core/types/api-schema.js";
+import type { components } from "../../../../core/types/api-schema.js";
 export declare class CorasHotelPickupList extends LitElement {
     static styles: CSSResultGroup;
     options: components["schemas"]["OptionPickupPoint"][];

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

@@ -1,9 +1,9 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
 import "../../../../components/payment-option/payment-option.js";
 import "../../../../components/payment-fiat-method/payment-fiat-method.js";
 import "../../../../components/message-card/message-card.js";
-import { SupportedCurrencies } from "../../../../core/types/index.js";
-import { PaymentFiatMethodType } from "../../../../components/payment-fiat-method/payment-fiat-method.component.js";
+import type { SupportedCurrencies } from "../../../../core/types/index.js";
+import type { PaymentFiatMethodType } from "../../../../components/payment-fiat-method/payment-fiat-method.component.js";
 /**
  * A payment type selector component that displays payment options for Stripe and crypto.
  *

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

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

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement } from "lit";
+import { type CSSResultGroup, LitElement } from "lit";
 import type { Stripe, StripeCardNumberElement, StripeElements, PaymentRequest } from "@stripe/stripe-js";
 import "../../../../components/joined-fields/joined-fields.js";
 import "../../../../components/input-field/input-field.js";

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

@@ -188,7 +188,7 @@ let CorasStripe = class CorasStripe extends LitElement {
             this.stripe = await loadStripe(this.stripeKey, options);
             if (this.stripe) {
                 // Theme the hosted card iframe to match the embed's surface, brand, and
-                // colour scheme (light/dark) — the per-element style only sets text.
+                // colour scheme (light/dark) - the per-element style only sets text.
                 this.elements = this.stripe.elements({
                     appearance: buildStripeAppearance(getComputedStyle(this)),
                 });

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement } from "lit";
+import { type CSSResultGroup, LitElement } from "lit";
 import "../../../../components/checkbox/checkbox.js";
 /**
  * Terms and conditions checkbox component.

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
 import "../../components/alert/alert.js";
 import "../../components/button/button.js";
 import "../../components/checkbox/checkbox.js";
@@ -16,7 +16,7 @@ import "../../components/select-list/select-list.js";
 import "../../components/select-list/select-option/select-option.js";
 import "../../components/transfer-modal/transfer-modal.js";
 import "../../components/crypto-auth-modal/crypto-auth-modal.js";
-import { PaymentPageParamsEvent } from "../../core/pages.js";
+import type { PaymentPageParamsEvent } from "../../core/pages.js";
 import "../../components/bottom-drawer/bottom-drawer.js";
 import "../../components/expiration-timer/expiration-timer.js";
 import "./partials/stripe/stripe.js";
@@ -26,7 +26,7 @@ import "./partials/confirmation/confirmation.js";
 import "./partials/payment-type-selector/payment-type-selector.js";
 import "./partials/activity-details/activity-details.js";
 import "./partials/billing-address/billing-address.js";
-import { PageName } from "../../core/types/shared.js";
+import type { PageName } from "../../core/types/shared.js";
 declare const CorasPaymentPage_base: import("../../contexts/utils.js").Constructor<import("../../mixins/coinbase.mixin.js").CoinbaseMixinInterface> & import("../../contexts/utils.js").Constructor<import("../../mixins/error-modal.mixin.js").ErrorModalMixinInterface> & import("../../contexts/utils.js").Constructor<{
     apiHost: string;
     distributorID: string;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { localized, msg } from "@lit/localize";
 import { fireEvent } from "../../core/events.js";
@@ -227,7 +227,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
                         return null;
                     }
                     const balance = await this.getTokenBalance(smartAccountAddress);
-                    // Success — reset backoff
+                    // Success - reset backoff
                     this.balanceBackoffMs = BALANCE_BACKOFF_INITIAL_MS;
                     this.clearBalanceBackoff();
                     return balance;
@@ -686,7 +686,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
     getFieldVisibility() {
         const data = this.reservationsCheckTask.value;
         // In preview with no booking session there are no requirements to drive the
-        // form, so show every general field — the studio brands the full form.
+        // form, so show every general field - the studio brands the full form.
         if (this.preview && !data?.general?.requirements?.length) {
             return {
                 hasNameField: true,
@@ -853,7 +853,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
         this._resetMfaPhoneState();
         // Only switch away from crypto if user hasn't logged in yet.
         // If they're logged in but closed the MFA modal, keep them on crypto
-        // — the pay button will remain disabled until MFA is enrolled.
+        // - the pay button will remain disabled until MFA is enrolled.
         if (!this.coinbaseSession) {
             this.paymentType = "stripe";
         }
@@ -875,7 +875,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
             this.formController.selectedPhoneCode;
         const mfaLocalNumber = this.cryptoAuthController.localPhoneNumber;
         if (mfaPhoneCode && mfaLocalNumber) {
-            // Phone from MFA modal — sync back to the main form
+            // Phone from MFA modal - sync back to the main form
             this.formController.selectedPhoneCode = { ...mfaPhoneCode };
             this.handleFormValueChange("phone", mfaLocalNumber);
         }
@@ -1084,7 +1084,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
             });
         }
         catch {
-            // Fire-and-forget — consent failure should not block the login flow
+            // Fire-and-forget - consent failure should not block the login flow
         }
     }
     /**
@@ -1510,7 +1510,7 @@ let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMi
     renderReservationsTask() {
         // The check task gates the form: it surfaces API failures and supplies the
         // field requirements. Basket emptiness, though, is decided by the actual
-        // reservations below — the check response only carries requirements, and a
+        // reservations below - the check response only carries requirements, and a
         // basket of plain tickets returns no per-reservation entries.
         return this.reservationsCheckTask.render({
             pending: () => html `<div class="loading">${msg("Loading...")}</div>`,

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

@@ -1,4 +1,4 @@
-import { components } from "../../core/types/api-schema.js";
+import type { components } from "../../core/types/api-schema.js";
 import type { Stripe, StripeCardNumberElement, StripeElements, PaymentRequest } from "@stripe/stripe-js";
 export type PaymentOption = "fida" | "card" | "google" | "apple";
 export type { PhoneCodeSelection } from "../../components/phone-field/phone-field.types.js";
@@ -24,8 +24,8 @@ export interface StripeComponent extends HTMLElement {
     getCardNumberElement: () => StripeCardNumberElement | null;
     updatePortals: () => void;
 }
-export type InputFieldType = "text" | "search" | "tel" | "email" | "date" | "number";
-export type InputFieldAutocomplete = "on" | "off" | "email" | "name" | "given-name" | "family-name" | "tel" | "tel-national" | "country" | "bday" | "address-line1" | "address-line2" | "address-level2" | "postal-code" | "one-time-code";
+export type { InputFieldType, InputFieldAutocomplete, } from "../../components/input-field/input-field.types.js";
+import type { InputFieldType, InputFieldAutocomplete } from "../../components/input-field/input-field.types.js";
 export interface FieldConfig {
     label: () => string;
     placeholder?: () => string;

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

@@ -1,9 +1,9 @@
-import { components, paths } from "../../core/types/api-schema.js";
-import { ReservationSummary } from "../../contexts/basket/basket.types.js";
-import { FormValues, PhoneCodeSelection, FieldsConfig, ApiError, InputFieldType, InputFieldAutocomplete } from "./payment-page.types.js";
-import { Client } from "openapi-fetch";
-import { SupportedLocales } from "../../core/types/index.js";
-import { ValidatorContext } from "./payment-page.validators.js";
+import type { components, paths } from "../../core/types/api-schema.js";
+import type { ReservationSummary } from "../../contexts/basket/basket.types.js";
+import type { FormValues, PhoneCodeSelection, FieldsConfig, ApiError, InputFieldType, InputFieldAutocomplete } from "./payment-page.types.js";
+import type { Client } from "openapi-fetch";
+import type { SupportedLocales } from "../../core/types/index.js";
+import type { ValidatorContext } from "./payment-page.validators.js";
 /**
  * Capitalizes the first letter of a string and replaces underscores with spaces
  */
@@ -163,7 +163,7 @@ export declare const isValidEmail: (email: string) => boolean;
 export declare const validateWalletEmail: (email: string) => string;
 /**
  * Finds a country code for a country name.
- * PP-007: Returns a strict ISO alpha-2 code — never a raw country name.
+ * PP-007: Returns a strict ISO alpha-2 code - never a raw country name.
  * Falls back to DEFAULT_COUNTRY_CODE when no match is found.
  */
 export declare const findCountryCode: (countryName: string, countries?: components["schemas"]["Country"][]) => string;
@@ -232,7 +232,7 @@ export declare function isValidPendingTransferPayload(data: unknown): data is Pe
 export declare function computeTransferChecksum(transactionHash: string, amount: string, timestamp: number): Promise<string>;
 /**
  * Verifies the integrity checksum of a pending transfer payload.
- * PP-006: Hardened — legacy entries without checksums are no longer trusted
+ * PP-006: Hardened - legacy entries without checksums are no longer trusted
  * when crypto.subtle is available. Returns true only if checksums match
  * or crypto.subtle is completely unavailable (cannot verify at all).
  */

package/dist/views/payment-page/payment-page.utils.js

@@ -693,7 +693,7 @@ const ISO_ALPHA2_REGEX = /^[A-Z]{2}$/;
 const DEFAULT_COUNTRY_CODE = "US";
 /**
  * Finds a country code for a country name.
- * PP-007: Returns a strict ISO alpha-2 code — never a raw country name.
+ * PP-007: Returns a strict ISO alpha-2 code - never a raw country name.
  * Falls back to DEFAULT_COUNTRY_CODE when no match is found.
  */
 export const findCountryCode = (countryName, countries = []) => {
@@ -824,7 +824,7 @@ export function formatPhoneWithPlus(phone) {
     return `+${cleaned}`;
 }
 // ────────────────────────────────────────────────────────────────────────────
-// Pending crypto transfer recovery — validation & integrity
+// Pending crypto transfer recovery - validation & integrity
 // ────────────────────────────────────────────────────────────────────────────
 /**
  * Ethereum transaction hash format: 0x followed by exactly 64 hex characters.
@@ -884,19 +884,19 @@ export async function computeTransferChecksum(transactionHash, amount, timestamp
         return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
     }
     catch {
-        // crypto.subtle unavailable (e.g., non-HTTPS, older browser) — skip checksum
+        // crypto.subtle unavailable (e.g., non-HTTPS, older browser) - skip checksum
         return "";
     }
 }
 /**
  * Verifies the integrity checksum of a pending transfer payload.
- * PP-006: Hardened — legacy entries without checksums are no longer trusted
+ * PP-006: Hardened - legacy entries without checksums are no longer trusted
  * when crypto.subtle is available. Returns true only if checksums match
  * or crypto.subtle is completely unavailable (cannot verify at all).
  */
 export async function verifyTransferChecksum(payload) {
     const computed = await computeTransferChecksum(payload.transactionHash, payload.amount, payload.timestamp);
-    // If crypto.subtle is unavailable, we cannot verify at all — accept cautiously
+    // If crypto.subtle is unavailable, we cannot verify at all - accept cautiously
     if (!computed)
         return true;
     // PP-006: Reject entries without a checksum when we can verify

package/dist/views/payment-page/payment-page.validation-schema.d.ts

@@ -1,4 +1,4 @@
-import { ValidatorFn } from "./payment-page.validators.js";
+import { type ValidatorFn } from "./payment-page.validators.js";
 /**
  * Validation schema for payment page form fields.
  *

package/dist/views/payment-page/services/payment-api.service.d.ts

@@ -1,11 +1,11 @@
 /**
- * Payment API Service — wraps API calls specific to the payment domain.
+ * Payment API Service - wraps API calls specific to the payment domain.
  *
  * Provides a stable interface for payment-related API operations,
  * decoupling controllers from the raw API query functions.
  * Currently delegates to apiGet/apiPut/apiPatch from core/api/queries.
  */
-import { SupportedLocales } from "../../../core/types/index.js";
+import type { SupportedLocales } from "../../../core/types/index.js";
 import type { paths, components } from "../../../core/types/api-schema.js";
 import type { Client } from "openapi-fetch";
 export interface PaymentApiConfig {

package/dist/views/payment-page/services/payment-api.service.js

@@ -1,5 +1,5 @@
 /**
- * Payment API Service — wraps API calls specific to the payment domain.
+ * Payment API Service - wraps API calls specific to the payment domain.
  *
  * Provides a stable interface for payment-related API operations,
  * decoupling controllers from the raw API query functions.

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

@@ -1,13 +1,13 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
 import "../../components/attraction-card/long/attraction-long-card.js";
 import "../../components/button/button.js";
 import "../../components/loading-spinner/loading-spinner.js";
 import "../../components/layout/layout.js";
 import "../../components/breadcrumbs/breadcrumbs.js";
 import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
-import { Client } from "openapi-fetch";
-import { paths } from "../../core/types/api-schema.js";
-import { SearchPageParamsEvent } from "../../core/pages.js";
+import type { Client } from "openapi-fetch";
+import type { paths } from "../../core/types/api-schema.js";
+import type { SearchPageParamsEvent } from "../../core/pages.js";
 export type AttractionsApiResponse = paths["/{api_version}/attractions"]["get"]["responses"]["200"]["content"]["application/json"];
 declare const CorasSearchPage_base: import("../../contexts/utils.js").Constructor<import("../../mixins/error-modal.mixin.js").ErrorModalMixinInterface> & import("../../contexts/utils.js").Constructor<import("../../mixins/location-search/types.js").LocationSearchMixinInterface> & import("../../contexts/utils.js").Constructor<{
     apiHost: string;

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

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

package/dist/views/suggestion-widget/suggestion-widget.component.d.ts

@@ -1,8 +1,9 @@
-import { CSSResultGroup, LitElement } from "lit";
+import { type CSSResultGroup, LitElement } from "lit";
 import "../../components/explore-card/explore-card.js";
 import "../../components/button/button.js";
 import "../../components/carousel/carousel.js";
-import { PageParamsEvent } from "../../core/pages.js";
+import "../../components/attraction-card/short/attraction-short-card.js";
+import type { PageParamsEvent } from "../../core/pages.js";
 declare const CorasSuggestionWidget_base: import("../../contexts/utils.js").Constructor<{
     apiHost: string;
     distributorID: string;
@@ -23,11 +24,15 @@ export declare class CorasSuggestionWidget extends CorasSuggestionWidget_base {
     showExploreCard: boolean;
     country: string;
     city: string;
-    private locationName;
+    /** Turn a location slug ("gran-canaria") into a display name ("Gran Canaria"). */
+    private humanize;
+    private suggestionsTask;
     private handleCardClick;
     private handleExploreCardClick;
-    private renderAttractions;
+    private renderCard;
     private renderExploreCard;
-    render(): import("lit").TemplateResult<1>;
+    private renderContent;
+    private renderSkeleton;
+    render(): symbol | import("lit").TemplateResult<1> | undefined;
 }
 export {};

package/dist/views/suggestion-widget/suggestion-widget.component.js

@@ -4,25 +4,41 @@ 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, msg, str } from "@lit/localize";
+import { Task } from "@lit/task";
+import { formatISO, parseISO } from "date-fns";
 import { ExploreCardVariants } from "../../components/explore-card/explore-card.constants.js";
 import styles from "./suggestion-widget.styles.js";
 import "../../components/explore-card/explore-card.js";
 import "../../components/button/button.js";
 import "../../components/carousel/carousel.js";
+import "../../components/attraction-card/short/attraction-short-card.js";
 import { getLocationImageURL } from "../../core/images/helpers.js";
 import { IMAGE_BASE_URL } from "../../core/images/constants.js";
 import { BaseMixin } from "../../mixins/base.mixin.js";
+import { apiGet, withErrorHandling } from "../../core/api/queries.js";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
 let CorasSuggestionWidget = class CorasSuggestionWidget extends BaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.limit = 4;
-        this.showExploreCard = false;
+        this.showExploreCard = true;
         this.country = "";
         this.city = "";
-        this.locationName = this.country || this.city;
+        this.suggestionsTask = new Task(this, {
+            task: async ([locale, country, city, currency]) => {
+                return withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale,
+                    endpoint: "/{api_version}/landing",
+                    query: { country, city, currency },
+                }));
+            },
+            args: () => [this.locale, this.country, this.city, this.currency],
+        });
     }
     static { this.styles = styles; }
     getPageProperties() {
@@ -34,64 +50,124 @@ let CorasSuggestionWidget = class CorasSuggestionWidget extends BaseMixin(LitEle
             city: this.city,
         };
     }
-    handleCardClick(attractionId) {
+    /** Turn a location slug ("gran-canaria") into a display name ("Gran Canaria"). */
+    humanize(slug) {
+        return slug
+            .split(/[-_]/)
+            .filter(Boolean)
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ");
+    }
+    handleCardClick(card) {
         this.dispatchPageUpdate({
             page: "details",
-            id: attractionId,
+            id: card.id,
+            date: formatISO(parseISO(card.date), { representation: "date" }),
             locale: this.locale,
             currency: this.currency,
         });
     }
-    handleExploreCardClick(city) {
+    handleExploreCardClick(country, city) {
         this.dispatchPageUpdate({
             page: "landing",
+            country,
             city,
             locale: this.locale,
             currency: this.currency,
         });
     }
-    renderAttractions() {
-        return html ``;
+    renderCard(card) {
+        const price = card.price[this.currency];
+        return html `
+      <coras-attraction-short-card
+        .images=${card.images}
+        ?label=${false}
+        name=${card.title}
+        rating=${card.rating || 0}
+        price=${price !== undefined
+            ? convertToLocaleCurrency({
+                value: price,
+                locale: this.locale,
+                currency: this.currency,
+            })
+            : ""}
+        category=${card.category.slug}
+        date=${card.date}
+        timezone=${card.timezone}
+        locale=${this.locale}
+        @click=${() => this.handleCardClick(card)}
+      ></coras-attraction-short-card>
+    `;
     }
-    renderExploreCard() {
-        const locationName = this.locationName;
-        if (this.showExploreCard) {
-            const imageUrl = getLocationImageURL({
-                baseURL: IMAGE_BASE_URL,
-                country: this.country,
-                city: this.city,
-                imageExtension: "png",
-                params: {
-                    auto: "compress,format",
-                    ar: "2:3",
-                    fit: "crop",
-                },
-            });
-            return html `
-        <coras-explore-card
-          image=${imageUrl}
-          label=${msg(str `Explore ${locationName}`)}
-          variant=${ExploreCardVariants.FULL_SIZE_BG}
-        >
-          <coras-button
-            slot="button"
-            variant="outlined"
-            @click=${() => this.handleExploreCardClick(this.locationName)}
-          >
-            ${msg("See all activities")}
-          </coras-button>
-        </coras-explore-card>
-      `;
+    renderExploreCard(country, city) {
+        if (!this.showExploreCard) {
+            return nothing;
         }
-        return html ``;
+        const name = this.humanize(city || country);
+        const imageUrl = getLocationImageURL({
+            baseURL: IMAGE_BASE_URL,
+            country,
+            city,
+            imageExtension: "png",
+            params: { auto: "compress,format", ar: "2:3", fit: "crop" },
+        });
+        return html `
+      <coras-explore-card
+        image=${imageUrl}
+        label=${name ? msg(str `Explore ${name}`) : msg("Tickets & Tours")}
+        variant=${ExploreCardVariants.FULL_SIZE_BG}
+      >
+        <coras-button
+          slot="button"
+          variant="outlined"
+          @click=${() => this.handleExploreCardClick(country, city)}
+        >
+          ${msg("See all activities")}
+        </coras-button>
+      </coras-explore-card>
+    `;
     }
-    render() {
-        const locationName = this.locationName;
+    renderContent() {
+        return this.suggestionsTask.render({
+            pending: () => this.renderSkeleton(),
+            error: () => nothing,
+            complete: (result) => {
+                const section = result.data?.find((candidate) => candidate.type === "short-card");
+                const cards = (section?.items ?? []);
+                if (!cards.length) {
+                    return nothing;
+                }
+                // Prefer the host-provided location; fall back to the location the feed
+                // itself is about so the explore card and title stay meaningful even
+                // when the widget is mounted without country/city params.
+                const country = this.country || String(section?.params.country ?? "");
+                const city = this.city || String(section?.params.city ?? "");
+                return html `
+          <h3>
+            ${section?.title ??
+                    msg(str `Book top-rated activities for ${this.humanize(city || country)}`)}
+          </h3>
+          <coras-carousel assets-url=${this.assetsURL}>
+            ${cards.slice(0, this.limit).map((card) => this.renderCard(card))}
+            ${this.renderExploreCard(country, city)}
+          </coras-carousel>
+        `;
+            },
+        });
+    }
+    renderSkeleton() {
         return html `
-      <h3>${msg(str `Book top rated activities for ${locationName}`)}</h3>
-      <coras-carousel> ${this.renderAttractions()} </coras-carousel>
+      <div class="skeleton" aria-hidden="true">
+        <div class="skeleton-title"></div>
+        <div class="skeleton-cards">
+          ${Array.from({ length: this.limit }, () => html `<div class="skeleton-card"></div>`)}
+        </div>
+      </div>
     `;
     }
+    render() {
+        return this.renderContent();
+    }
 };
 __decorate([
     property({ type: Number })