@coras-io/embed 0.2.0 → 0.4.0

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

@@ -14,7 +14,7 @@ import { map } from "lit/directives/map.js";
 import { consume } from "@lit/context";
 import { SignalWatcher } from "@lit-labs/signals";
 import { isBasketDropdownOpen, isBasketMobileOpen, } from "../../core/signals.js";
-import { format, formatISO, getDate, isAfter, isBefore, parseISO, } from "date-fns";
+import { formatISO, getDate, isAfter, isBefore, parseISO } from "date-fns";
 import { capitalize } from "../../core/utils/text.js";
 import { apiGet, apiPost, withErrorHandling } from "../../core/api/queries.js";
 import "../../components/button/button.js";
@@ -65,21 +65,19 @@ import { loyaltyPointsContext } from "../../contexts/properties.context.js";
 import { addRecentlySelectedSearches } from "../../containers/navbar/navbar.utils.js";
 import { filterMediaForGallery } from "../../core/images/filters.js";
 import { readSeatsIoConfig } from "../../core/types/seats-config.js";
-// TODO: can it be dynamic/responsive?
+import { getApiLanguageCode } from "../../core/utils/locale.js";
 const IMAGE_CAROUSEL_WIDTH = 480;
 const IMAGE_CAROUSEL_HEIGHT = 320;
 /**
- * Details page component for viewing attraction details and creating reservations.
- *
- * @fires coras:navigate - Dispatched when navigating to another page
- * @fires coras:state-change - Dispatched when in-page params change (date selection)
- * @fires coras:reservation-created - Dispatched when a reservation is successfully created via the API
+ * @fires coras:navigate
+ * @fires coras:state-change
+ * @fires coras:reservation-created
  */
 let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixin(BaseMixin(SignalWatcher(LitElement)))) {
     constructor() {
         super(...arguments);
         this.attractionId = "";
-        this.date = formatISO(new Date(), { representation: "date" });
+        this.date = "";
         this.currentPage = "details";
         this.loyaltyPoints = false;
         this.currentMonth = undefined;
@@ -147,15 +145,24 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                         size: 0,
                     },
                 }));
+                // A failed or empty response has no attraction to render. Returning an
+                // empty object here would complete the task, so every render branch below
+                // would dereference `attraction` on it and throw. Fail the task instead so
+                // the error modal is shown.
                 if (!result.data) {
-                    return {};
+                    throw new Error("Attraction data not available");
                 }
                 this.verifyDate(result.data.first_instance_date, result.data.last_instance_date, result.data.attraction.timezone);
                 this.isSingleDayAvailability = isSingleDayAvailability(result.data.attraction.sale_periods ?? null);
                 this.availabilityDays = getAvailabilityDays({
                     timezone: result.data.attraction.timezone,
                     salePeriods: result.data.attraction.sale_periods ?? null,
-                    targetMonth: getCurrentMonth(this.date || result.data.first_instance_date, this.currentMonth),
+                    targetMonth: getCurrentMonth(this.date ||
+                        formatDateWithTimezone({
+                            dateString: result.data.first_instance_date,
+                            timezone: result.data.attraction.timezone,
+                            formatString: "yyyy-MM-dd",
+                        }), this.currentMonth),
                 });
                 this.checkDateAvailability(result.data.first_instance_date, result.data.attraction.timezone);
                 try {
@@ -165,9 +172,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                         name: result.data.attraction.attraction_name,
                     });
                 }
-                catch {
-                    // noop
-                }
+                catch { }
                 return result.data;
             },
             args: () => [this.locale, this.currency, this.attractionId],
@@ -175,7 +180,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
         this.bookingSessionTask = new Task(this, {
             autoRun: false,
             task: async () => {
-                const bookingSession = getBookingSession();
+                const bookingSession = getBookingSession(this.distributorID);
                 if (bookingSession) {
                     return bookingSession;
                 }
@@ -185,7 +190,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     locale: this.locale,
                     endpoint: "/{api_version}/booking-session",
                     body: {
-                        language: this.locale.split("-")[0],
+                        language: getApiLanguageCode(this.locale),
                         user_id: null,
                         analytics_id: null,
                         distributor_session_id: null,
@@ -198,22 +203,22 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                         try {
                             const expirationDate = new Date(expiresHeader);
                             if (!isNaN(expirationDate.getTime())) {
-                                storeBookingSession(newBookingSession, expirationDate);
+                                storeBookingSession(this.distributorID, newBookingSession, expirationDate);
                             }
                             else {
-                                const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
-                                storeBookingSession(newBookingSession, defaultExpiration);
+                                const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000);
+                                storeBookingSession(this.distributorID, newBookingSession, defaultExpiration);
                             }
                         }
                         catch (error) {
                             console.warn("Failed to parse booking session expiration date:", error);
-                            const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
-                            storeBookingSession(newBookingSession, defaultExpiration);
+                            const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000);
+                            storeBookingSession(this.distributorID, newBookingSession, defaultExpiration);
                         }
                     }
                     else {
-                        const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
-                        storeBookingSession(newBookingSession, defaultExpiration);
+                        const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000);
+                        storeBookingSession(this.distributorID, newBookingSession, defaultExpiration);
                     }
                     return newBookingSession;
                 }
@@ -239,9 +244,9 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     bookingSession,
                     body: {
                         currency: this.currency,
-                        language_code: this.locale.split("-")[0],
+                        language_code: getApiLanguageCode(this.locale),
                         attraction_id: this.attractionId,
-                        date: this.date,
+                        date: this.resolvedDate,
                         tickets: Object.entries(this.selectedPriceTypes).map(([key, value]) => ({
                             price_type_id: key,
                             number_of_tickets: value,
@@ -261,8 +266,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     this.hasAvailabilityError = true;
                 }
                 const availableItems = result.data.filter((item) => item.available) || [];
-                // Auto-select the first performance time once the availability resolves,
-                // keeping this state out of the render path.
                 const sortedTimes = sortTimes(Array.from(groupAvailabilityByTime(availableItems, this.locale).keys()));
                 this.selectedTime = sortedTimes[0] ?? null;
                 availableItems.forEach((item) => {
@@ -301,8 +304,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     throw new Error("Attraction data not available");
                 }
                 const seatedPayload = seated;
-                // Seated selection books a specific performance instance with the chosen
-                // seats; the section flow books a selection_id with ticket-type counts.
                 const reservationFields = seatedPayload
                     ? {
                         selection_id: null,
@@ -323,8 +324,8 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     body: {
                         attraction_id: this.attractionId,
                         currency: this.currency,
-                        date: this.date,
-                        language_code: this.locale.split("-")[0],
+                        date: this.resolvedDate,
+                        language_code: getApiLanguageCode(this.locale),
                         tour_language: language,
                         to_basket: true,
                         pickup_id: null,
@@ -338,8 +339,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     return {};
                 }
                 if (result.data) {
-                    // Emit only a minimal, redacted public payload; never the raw
-                    // reservation API response (P-038 data minimization).
                     const reservation = result.data;
                     fireEvent(this, "coras:reservation-created", {
                         ...(reservation.reservation_id != null
@@ -392,7 +391,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             this.seatsFallback = false;
             await this.bookingSessionTask.run();
             await this.availabilityTask.run();
-            this.shouldRenderOptions = true; // TODO: move to request?
+            this.shouldRenderOptions = true;
         };
         this.renderAttractionHeader = () => {
             const apiResponse = this.attractionTask.value;
@@ -600,20 +599,16 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             if (!apiResponse) {
                 return nothing;
             }
-            const date = this.date ||
-                formatISO(parseISO(apiResponse.first_instance_date), {
-                    representation: "date",
-                });
+            const date = this.resolvedDate;
             if (this.isSingleDayAvailability) {
                 return html `
         <div id="calendar-dropdown">
           <coras-button
             variant="outlined"
-            radius="small"
+            radius="field"
             height="md"
             .shadow=${false}
             .clickable=${false}
-            background
             expanded
           >
             <coras-icon
@@ -636,10 +631,9 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
           <coras-button
             slot="trigger"
             variant="outlined"
-            radius="small"
+            radius="field"
             height="md"
             border-color="light"
-            background
             expanded
             @click=${this.toggleCalendarDropdown}
             ?error=${this.hasAvailabilityError}
@@ -664,8 +658,16 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             <coras-month-calendar
               assets-url="${this.assetsURL}"
               locale=${this.locale}
-              min-date=${format(parseISO(apiResponse.first_instance_date), "yyyy-MM")}
-              max-date=${format(parseISO(apiResponse.last_instance_date), "yyyy-MM")}
+              min-date=${formatDateWithTimezone({
+                dateString: apiResponse.first_instance_date,
+                timezone: apiResponse.attraction.timezone,
+                formatString: "yyyy-MM",
+            })}
+              max-date=${formatDateWithTimezone({
+                dateString: apiResponse.last_instance_date,
+                timezone: apiResponse.attraction.timezone,
+                formatString: "yyyy-MM",
+            })}
               .selectedDates=${[date]}
               .availableDays=${this.availabilityDays}
               selected-month=${getCurrentMonth(date, this.currentMonth)}
@@ -785,12 +787,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
         };
         this.renderTourOptions = (items) => {
             return html `${map(items, ({ name, languages_spoken, selection_id, prices, start_datetime, timezone, max_full_price, }) => {
-                // The availability API returns one `start_datetime` per item, so each
-                // tour option is a single timed slot (a tour offered at several times
-                // arrives as several items). There is thus one time per option: the
-                // per-option time picker stays collapsed and the slot shows as a badge.
-                // Grouping items into a single multi-time option is a separate feature
-                // that also needs the selection_id<->time basket mapping reworked.
                 const hasOnlyOneTimeOption = true;
                 const hasMultipleLanguages = Object.keys(languages_spoken || {}).length > 1;
                 return html `
@@ -849,10 +845,7 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             })}`;
         };
         this.handleSeatsConfirmed = async (event) => {
-            // Capture the selector now: currentTarget is nulled once dispatch ends, and
-            // we only read it after awaiting the reservation.
             const selector = event.target;
-            // Show the confirm button's spinner while the basket call is in flight.
             if (selector) {
                 selector.reserving = true;
             }
@@ -867,7 +860,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             if (this.reservationsTask.status !== TaskStatus.ERROR &&
                 this.reservationsTask.value &&
                 Object.keys(this.reservationsTask.value).length > 0) {
-                // Close the fixed seat-summary bar so it doesn't sit over the basket.
                 selector?.reservationCreated();
                 const isMobile = window.matchMedia("(max-width: 800px)").matches;
                 if (isMobile) {
@@ -878,10 +870,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                     isBasketDropdownOpen.set(true);
                     scrollToTop();
                 }
-                // Return the page to a clean slate: collapse the seat map and reset the
-                // ticket selector to its default so the shopper starts fresh for any
-                // further booking. The just-added item lives in the basket now; the
-                // "Added to basket" summary reads the reservation, not this state.
                 this.shouldRenderOptions = false;
                 this.selectedPriceTypes = {};
                 this.selectedTime = null;
@@ -919,9 +907,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                             ? Array.from(timeGroups.get(this.selectedTime) || [])
                             : [];
                         const seatedPerformance = this.findSeatedPerformance(filteredOptions);
-                        // Only offer the time picker when there is an actual choice. A single
-                        // performance time is auto-selected above, so showing one lone button
-                        // is noise - render straight to the seat/section options instead.
                         const showTimePicker = sortedTimes.length > 1;
                         return html `
             <div class="options">
@@ -1023,7 +1008,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                 };
             })
                 .filter((item) => item !== null);
-            // Calculate booking fee
             const bookingFee = convertToLocaleCurrency({
                 value: summary.bookingFeePerTicket,
                 locale: this.locale,
@@ -1073,7 +1057,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             @click="${async () => {
                 await this.handleBasketModalToggle(this.selectedSectionId);
                 this.isReservationPreviewModalOpened = false;
-                // Defer scroll past the dialog's scroll-lock restore (rAF-deferred)
                 setTimeout(() => scrollToTop(), 0);
             }}"
           >
@@ -1119,9 +1102,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
         };
         this.renderBasketModal = () => {
             const apiResponse = this.attractionTask.value;
-            // Prefer the count actually reserved (seated bookings can differ from the
-            // upfront selection, which is also reset once the item is in the basket);
-            // fall back to the selection only before a reservation exists.
             const reservedTickets = this.reservationsTask.value && "tickets" in this.reservationsTask.value
                 ? this.reservationsTask.value.tickets
                 : null;
@@ -1271,8 +1251,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
         });
     }
     async handleBasketModalToggle(selection_id) {
-        // TODO: check if success, if not show error message
-        // TODO: it calls the task once again when modal is closed
         if (selection_id) {
             this.loadingSelectionIds = new Set([
                 ...this.loadingSelectionIds,
@@ -1285,7 +1263,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                 if (this.reservationsTask.status !== TaskStatus.ERROR &&
                     this.reservationsTask.value &&
                     Object.keys(this.reservationsTask.value).length > 0) {
-                    // TODO: make reusable
                     const isMobile = window.matchMedia("(max-width: 800px)").matches;
                     if (isMobile) {
                         this.isBasketModalOpened = !this.isBasketModalOpened;
@@ -1310,6 +1287,18 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             return true;
         }
     }
+    get resolvedDate() {
+        if (this.date)
+            return this.date;
+        const apiResponse = this.attractionTask.value;
+        if (!apiResponse)
+            return "";
+        return formatDateWithTimezone({
+            dateString: apiResponse.first_instance_date,
+            timezone: apiResponse.attraction.timezone,
+            formatString: "yyyy-MM-dd",
+        });
+    }
     buildSectionTickets(selection_id) {
         const apiResponse = this.attractionTask.value;
         const availabilityItems = this.availabilityTask
@@ -1410,12 +1399,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
       </coras-breadcrumbs>
     `;
     }
-    // Resolves the selected performance to the seat map's one prerequisite: the
-    // instance_id (the seats.io event key and the seats endpoint path param).
-    // Price bands and per-seat data come from the seats endpoint itself, so the
-    // availability item only has to supply the instance. Returns null to fall
-    // back to the section picker. All section items of a performance share the
-    // same instance_id, so the first option resolves it.
     findSeatedPerformance(options) {
         const apiResponse = this.attractionTask.value;
         if (this.seatsFallback ||
@@ -1423,8 +1406,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             apiResponse?.attraction_type !== "THEATER") {
             return null;
         }
-        // attraction_type is "THEATER" | "TOUR" on both variants, so it cannot
-        // narrow the union structurally; the runtime check above is the guard.
         const event = apiResponse;
         if (!event.attraction.seats_sales_enabled) {
             return null;
@@ -1441,9 +1422,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
     renderSeatedSelector(performance) {
         const seatsConfig = this.configTask.value;
         const event = this.attractionTask.value;
-        // Cap seat selection at the venue's per-order maximum rather than the
-        // upfront ticket count, so the shopper can revise how many seats they want
-        // straight on the map. 0 tells the chart there is no cap.
         const maxSeats = event?.attraction.max_tickets_per_order ?? 0;
         return html `
       <coras-seated-selector
@@ -1486,7 +1464,6 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
     }
     handleGoToBasketButtonClicked() {
         this.handleBasketModalToggle();
-        // TODO: make reusable
         const isMobile = window.matchMedia("(max-width: 800px)").matches;
         if (isMobile) {
             isBasketMobileOpen.set(true);
@@ -1497,11 +1474,31 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
             scrollToTop();
         }
     }
+    renderSkeleton() {
+        return html `
+      <div class="details-skeleton" aria-hidden="true">
+        <div class="coras-skeleton sk-breadcrumb"></div>
+        <div class="coras-skeleton sk-title"></div>
+        <div class="sk-header">
+          <div class="coras-skeleton sk-image"></div>
+          <div class="coras-skeleton sk-panel"></div>
+        </div>
+        <div class="sk-description">
+          <div class="coras-skeleton sk-line"></div>
+          <div class="coras-skeleton sk-line"></div>
+          <div class="coras-skeleton sk-line sk-short"></div>
+        </div>
+      </div>
+      <span class="coras-sr-only" role="status">${msg("Loading")}</span>
+    `;
+    }
     render() {
         return html `
       <coras-layout with-basket>
         <slot name="navbar" slot="navbar"></slot>
         ${this.attractionTask.render({
+            initial: () => this.renderSkeleton(),
+            pending: () => this.renderSkeleton(),
             error: () => {
                 this.showErrorModalOnce();
                 return html ``;

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

@@ -1,11 +1,70 @@
 import { css } from "lit";
 import component from "../../styles/defaults/component.js";
+import { skeleton, visuallyHidden } from "../../styles/primitives.js";
 export default css `
   ${component}
+  ${skeleton}
+  ${visuallyHidden}
+
+  .details-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+
+    .sk-breadcrumb {
+      width: 14rem;
+      max-width: 60%;
+      height: 1rem;
+    }
+
+    .sk-title {
+      width: 26rem;
+      max-width: 80%;
+      height: 2.25rem;
+    }
+
+    .sk-header {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2.5rem;
+      width: 100%;
+
+      @container --coras-layout (max-width: 800px) {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .sk-image {
+      width: 100%;
+      max-width: 480px;
+      aspect-ratio: 4 / 3;
+    }
+
+    .sk-panel {
+      width: 100%;
+      max-width: 280px;
+      height: 20rem;
+    }
+
+    .sk-description {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .sk-line {
+      width: 100%;
+      height: 1rem;
+
+      &.sk-short {
+        width: 60%;
+      }
+    }
+  }
 
   :host {
     --details-page-ticket-availability-border-color: var(
-      --coras-color-neutral-200
+      --coras-color-card-border
     );
     --details-page-ticket-availability-border-radius: var(--coras-radius-md);
     --details-page-ticket-availability-caption-font-size: var(
@@ -16,9 +75,7 @@ export default css `
     );
     --details-page-ticket-availability-caption-color: var(--coras-color-text);
 
-    --details-page-date-field-open-chevron-color: var(
-      --coras-color-primary-500
-    );
+    --details-page-date-field-open-chevron-color: var(--coras-color-primary);
     --details-page-ticket-availability-caption-font-size-mobile: var(
       --coras-font-size-sm
     );
@@ -55,7 +112,7 @@ export default css `
 
     --details-page-reviews-footer-font-size: var(--coras-font-size-sm);
     --details-page-reviews-footer-font-weight: var(--coras-font-weight-normal);
-    --details-page-reviews-footer-color: var(--coras-color-text-secondary);
+    --details-page-reviews-footer-color: var(--coras-color-text-muted);
 
     --details-page-top-panel-max-width: 820px;
     --details-page-details-max-width: 562px;
@@ -375,8 +432,6 @@ export default css `
     }
   }
 
-  /* Basket modal */
-
   .basket-modal-header {
     display: flex;
     align-items: center;
@@ -391,7 +446,7 @@ export default css `
     height: 28px;
 
     &::part(svg) {
-      fill: var(--coras-color-success-500);
+      fill: var(--coras-color-success);
       width: 28px;
       height: 28px;
     }
@@ -430,7 +485,7 @@ export default css `
 
   .basket-modal-date {
     margin-bottom: 1.125rem;
-    color: var(--coras-color-text-secondary);
+    color: var(--coras-color-text-muted);
     font-size: var(--coras-font-size-sm);
     font-weight: var(--coras-font-weight-normal);
     line-height: 1.25rem;

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

@@ -59,6 +59,7 @@ export declare class CorasHelpPage extends CorasHelpPage_base {
     private closeSubjectDropdown;
     private handleModalClose;
     private handleTabChange;
+    private renderHelpSkeleton;
     private renderFaqAccordion;
     private renderAttractionsTicketsTab;
     private renderMusicTicketsTab;

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

@@ -226,13 +226,21 @@ let CorasHelpPage = class CorasHelpPage extends BaseMixin(LitElement) {
             content: event.detail.tab,
         });
     }
+    renderHelpSkeleton() {
+        return html `
+      <div class="help-skeleton" aria-hidden="true">
+        ${Array.from({ length: 5 }, () => html `<div class="coras-skeleton sk-row"></div>`)}
+      </div>
+      <span class="coras-sr-only" role="status">${msg("Loading")}</span>
+    `;
+    }
     renderFaqAccordion() {
         return this.helpTabTask.render({
             error: () => {
                 // this.showErrorModalOnce();
                 return html ``;
             },
-            loading: () => html `loading`,
+            pending: () => this.renderHelpSkeleton(),
             complete: (result) => {
                 if (!result?.data)
                     return nothing;
@@ -358,7 +366,6 @@ let CorasHelpPage = class CorasHelpPage extends BaseMixin(LitElement) {
           height="md"
           border-color="light"
           expanded
-          background
           @click=${this.toggleSubjectDropdown}
           ?error=${hasError}
           aria-label=${label}
@@ -375,7 +382,7 @@ let CorasHelpPage = class CorasHelpPage extends BaseMixin(LitElement) {
         <coras-select-list spacious>
           ${this.content === "contact"
             ? this.subjectsTask.render({
-                loading: () => html `
+                pending: () => html `
                   <coras-select-option></coras-select-option>
                 `,
                 error: () => html `
@@ -409,7 +416,7 @@ let CorasHelpPage = class CorasHelpPage extends BaseMixin(LitElement) {
     renderInfoContent() {
         return this.helpTabTask.render({
             error: () => html ``,
-            loading: () => html `loading`,
+            pending: () => this.renderHelpSkeleton(),
             complete: (result) => {
                 if (!result?.data) {
                     return nothing;

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

@@ -1,10 +1,25 @@
 import { css } from "lit";
 import component from "../../styles/defaults/component.js";
+import { skeleton, visuallyHidden } from "../../styles/primitives.js";
 export default css `
   ${component}
+  ${skeleton}
+  ${visuallyHidden}
+
+  .help-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+
+    .sk-row {
+      width: 100%;
+      height: 3.5rem;
+    }
+  }
 
   :host {
-    --help-center-header-font-size: var(--coras-font-size-2xl);
+    --help-center-header-font-size: var(--coras-font-size-heading);
     --help-center-header-font-weight: var(--coras-font-weight-semibold);
     --help-center-header-line-height: var(--coras-font-size-3xl);
     --help-center-header-color: var(--coras-color-text);
@@ -17,7 +32,7 @@ export default css `
     --help-center-modal-message-line-height: var(--coras-font-size-xl);
     --help-center-modal-message-font-weight: var(--coras-font-weight-normal);
     --help-center-modal-message-color: var(--coras-color-text);
-    --help-center-modal-icon-color: var(--coras-color-success-500);
+    --help-center-modal-icon-color: var(--coras-color-success);
     --help-center-modal-icon-size: 32px;
 
     display: grid;
@@ -91,14 +106,12 @@ export default css `
     margin-block: 2rem;
   }
 
-  /* Add spacing between numbered info items */
   .info-numbered {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  /* Numbering style for nested ordered lists within info content */
   .info-numbered ol {
     counter-reset: section;
     padding-left: 1.25rem;
@@ -107,10 +120,10 @@ export default css `
 
   .info-numbered ol > li {
     counter-increment: section;
-    list-style: none; /* hide default numbering to use CSS counters */
+    list-style: none;
     position: relative;
-    padding-left: 1rem; /* 1rem gap between number and content */
-    margin: 1rem 0; /* ensure 1rem between items */
+    padding-left: 1rem;
+    margin: 1rem 0;
   }
 
   .info-numbered ol > li::before {
@@ -171,7 +184,7 @@ export default css `
       align-items: center;
       justify-content: center;
       padding: 3rem 1rem;
-      border-top: 1px solid var(--coras-color-neutral-200);
+      border-top: 1px solid var(--coras-color-divider);
     }
 
     .container {