@coras-io/embed 0.2.0 → 0.4.0

package/dist/styles/tokens.metadata.js

@@ -4,125 +4,350 @@ export const TOKEN_CONTROLS = [
         "key": "primary",
         "cssVar": "--coras-brand-primary",
         "type": "color",
-        "group": "Colours",
-        "label": "Primary",
+        "group": "Key colours",
+        "label": "Primary Brand Colour",
         "default": "#4657d4",
-        "description": "Main brand colour for solid buttons, links and accents"
+        "description": "Used on key brand identifiers: buttons, ratings stars, selected states"
     },
     {
         "key": "secondary",
         "cssVar": "--coras-brand-secondary",
         "type": "color",
-        "group": "Colours",
-        "label": "Secondary",
+        "group": "Key colours",
+        "label": "Secondary Brand Colour",
         "default": "#161c44",
-        "description": "Supporting brand colour for basket accents and highlights"
+        "description": "Used on supporting brand elements and secondary buttons"
     },
     {
-        "key": "background",
-        "cssVar": "--coras-brand-background",
+        "key": "pageBackground",
+        "cssVar": "--coras-brand-page-background",
         "type": "color",
-        "group": "Colours",
-        "label": "Background",
+        "group": "Key colours",
+        "label": "Page Background Colour",
         "default": "#ffffff",
         "description": "The main page background behind all content; transparent by default so the embed adopts the host page background"
     },
-    {
-        "key": "surface",
-        "cssVar": "--coras-brand-surface",
-        "type": "color",
-        "group": "Colours",
-        "label": "Surface",
-        "default": "#fcfcff",
-        "description": "Raised containers like cards, panels, dropdowns and sheets"
-    },
     {
         "key": "text",
         "cssVar": "--coras-brand-text",
         "type": "color",
-        "group": "Colours",
-        "label": "Text",
+        "group": "Key colours",
+        "label": "Body Text Colour",
         "default": "#161c44",
-        "description": "Default body text colour"
+        "description": "All body copy; auto-suggested to stay readable on the page background"
     },
     {
         "key": "textMuted",
         "cssVar": "--coras-brand-text-muted",
         "type": "color",
-        "group": "Colours",
-        "label": "Muted text",
+        "group": "Key colours",
+        "label": "Muted Text Colour",
         "default": "#888888",
-        "description": "Secondary text for captions, hints and placeholders"
+        "description": "Field labels, placeholders, captions and hints; auto-suggested as a softened blend of text and background"
     },
     {
-        "key": "radius",
-        "cssVar": "--coras-brand-radius",
-        "type": "length",
-        "group": "Shape & type",
-        "label": "Border radius",
-        "default": "1.5rem",
-        "description": "Default corner roundness; buttons and chips can override below"
+        "key": "link",
+        "cssVar": "--coras-brand-link",
+        "type": "color",
+        "group": "Key colours",
+        "label": "Link Text Colour",
+        "default": "#4657d4",
+        "description": "This follows the Text Button Colour, which itself defaults to the Primary Brand Colour. Adjust here if desired."
     },
     {
-        "key": "font",
-        "cssVar": "--coras-brand-font",
-        "type": "font",
-        "group": "Shape & type",
-        "label": "Font family",
-        "default": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
-        "description": "Font for all text (add hosted files under Web fonts)"
+        "key": "icon",
+        "cssVar": "--coras-brand-icon",
+        "type": "color",
+        "group": "Key colours",
+        "label": "Icon Colour (In Page)",
+        "default": "#161c44",
+        "description": "This defaults to the Body Text Colour but can be adjusted here if desired"
+    },
+    {
+        "key": "cardBackground",
+        "cssVar": "--coras-brand-card-background",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Card Fill Colour",
+        "default": "#fcfcff",
+        "description": "Cards, panels, and the price/options section backgrounds"
+    },
+    {
+        "key": "cardBorder",
+        "cssVar": "--coras-brand-card-border",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Card Border Colour",
+        "default": "#e6e6e6",
+        "description": "Borders around cards and panels"
+    },
+    {
+        "key": "fieldBackground",
+        "cssVar": "--coras-brand-field-background",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Field / Input Fill Colour",
+        "default": "#ffffff",
+        "description": "The inside of text fields, dropdown triggers, the card fields on the payment page, and the ticket, time and language selection controls"
+    },
+    {
+        "key": "fieldBorder",
+        "cssVar": "--coras-brand-field-border",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Field / Input Border Colour",
+        "default": "#cccccc",
+        "description": "Borders of text fields, dropdown triggers and other form inputs"
+    },
+    {
+        "key": "menuBackground",
+        "cssVar": "--coras-brand-menu-background",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Menu / Dropdown Fill Colour",
+        "default": "#ffffff",
+        "description": "The panel behind dropdown menus: the basket, currency, language, sort by, location results and the calendar"
+    },
+    {
+        "key": "menuBorder",
+        "cssVar": "--coras-brand-menu-border",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Menu / Dropdown Border Colour",
+        "default": "#e6e6e6",
+        "description": "The outline around a dropdown menu panel"
+    },
+    {
+        "key": "divider",
+        "cssVar": "--coras-brand-divider",
+        "type": "color",
+        "group": "Cards & panels",
+        "label": "Dividing Lines",
+        "default": "#e6e6e6",
+        "description": "Hairline rules between sections and list items, on the web and in emails"
+    },
+    {
+        "key": "cardShadow",
+        "cssVar": "--coras-brand-card-shadow",
+        "type": "shadow",
+        "group": "Cards & panels",
+        "label": "Card Shadow",
+        "default": "0px 24px 24px rgba(0, 0, 0, 0.04)",
+        "description": "The large soft shadow under cards (set to none for a flat look)"
+    },
+    {
+        "key": "softShadow",
+        "cssVar": "--coras-brand-soft-shadow",
+        "type": "shadow",
+        "group": "Cards & panels",
+        "label": "Container Shadow",
+        "default": "0px 4px 4px rgba(0, 0, 0, 0.04)",
+        "description": "The subtle shadow on smaller raised elements"
+    },
+    {
+        "key": "primaryButton",
+        "cssVar": "--coras-brand-primary-button",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Primary Button Fill Colour",
+        "default": "#4657d4",
+        "description": "This defaults to the Primary Brand Colour but can be adjusted here if required"
+    },
+    {
+        "key": "primaryButtonText",
+        "cssVar": "--coras-brand-primary-button-text",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Primary Button Text Colour",
+        "default": "#ffffff",
+        "description": "There is an auto suggested value here to maintain legibility and contrast. This can be adjusted if desired."
+    },
+    {
+        "key": "secondaryButton",
+        "cssVar": "--coras-brand-secondary-button",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Secondary Button Fill Colour",
+        "default": "#161c44",
+        "description": "This defaults to the Secondary Brand Colour but can be adjusted here if required"
+    },
+    {
+        "key": "secondaryButtonText",
+        "cssVar": "--coras-brand-secondary-button-text",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Secondary Button Text Colour",
+        "default": "#ffffff",
+        "description": "There is an auto suggested value here to maintain legibility and contrast. This can be adjusted if desired."
     },
     {
         "key": "textButton",
         "cssVar": "--coras-brand-text-button",
         "type": "color",
-        "group": "Colours",
-        "label": "Text button",
+        "group": "Buttons",
+        "label": "Text Button Colour",
         "default": "#4657d4",
-        "description": "Text and ghost buttons like “Add to basket” (not solid buttons)"
+        "description": "This defaults to the Primary Brand Colour. It can be adjusted here if required."
     },
     {
-        "key": "bodyIcon",
-        "cssVar": "--coras-brand-body-icon",
+        "key": "primaryButtonBorder",
+        "cssVar": "--coras-brand-primary-button-border",
         "type": "color",
-        "group": "Colours",
-        "label": "Body icon",
-        "default": "#161c44",
-        "description": "Icons within page content (navbar icons are set separately)"
+        "group": "Buttons",
+        "label": "Primary Button Border",
+        "default": "transparent",
+        "description": "This defaults to Transparent/No border. You can add a border colour here if desired."
+    },
+    {
+        "key": "secondaryButtonBorder",
+        "cssVar": "--coras-brand-secondary-button-border",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Secondary Button Border",
+        "default": "transparent",
+        "description": "This defaults to Transparent/No border. You can add a border colour here if desired."
+    },
+    {
+        "key": "disabled",
+        "cssVar": "--coras-brand-disabled",
+        "type": "color",
+        "group": "Buttons",
+        "label": "Disabled Buttons",
+        "default": "#aaaaaa",
+        "description": "Default values applied. You can adjust here if desired"
+    },
+    {
+        "key": "buttonShadow",
+        "cssVar": "--coras-brand-button-shadow",
+        "type": "shadow",
+        "group": "Buttons",
+        "label": "Button Shadow",
+        "default": "0px 4px 4px rgba(0, 0, 0, 0.1)",
+        "description": "Default values applied. Set values to 0 if not required"
+    },
+    {
+        "key": "buttonHoverOnLightFill",
+        "cssVar": "--coras-brand-button-hover-on-light-fill",
+        "type": "length",
+        "group": "Buttons",
+        "label": "On Hover - Light / Bright Fill Button",
+        "default": "20%",
+        "description": "Strength of the black overlay applied on hover when the button fill is light. Default values applied. Adjust if desired."
+    },
+    {
+        "key": "buttonHoverOnDarkFill",
+        "cssVar": "--coras-brand-button-hover-on-dark-fill",
+        "type": "length",
+        "group": "Buttons",
+        "label": "On Hover - Dark Fill Button",
+        "default": "20%",
+        "description": "Strength of the white overlay applied on hover when the button fill is dark. Default values applied. Adjust if desired."
+    },
+    {
+        "key": "radius",
+        "cssVar": "--coras-brand-radius",
+        "type": "length",
+        "group": "Shape",
+        "label": "Corner Radius",
+        "default": "1.5rem",
+        "description": "Defines the corner radius of Cards, Images and Containers. Buttons and chips default to this value but can be customised below if desired."
     },
     {
         "key": "buttonRadius",
         "cssVar": "--coras-brand-button-radius",
         "type": "length",
-        "group": "Shape & type",
-        "label": "Button radius",
+        "group": "Shape",
+        "label": "Button Corners",
         "default": "1.5rem",
-        "description": "Corner roundness for buttons (follows Border radius until set)"
+        "description": "Corner radius for buttons (follows Corner Radius until set)"
     },
     {
         "key": "chipRadius",
         "cssVar": "--coras-brand-chip-radius",
         "type": "length",
-        "group": "Shape & type",
-        "label": "Chip radius",
+        "group": "Shape",
+        "label": "Chip Corners",
         "default": "1.5rem",
-        "description": "Corner roundness for chips (follows Border radius until set)"
+        "description": "Corner radius for filter and option chips (follows Corner Radius until set)"
+    },
+    {
+        "key": "fieldRadius",
+        "cssVar": "--coras-brand-field-radius",
+        "type": "length",
+        "group": "Shape",
+        "label": "Field / Input Corners",
+        "default": "0.5rem",
+        "description": "Corner radius for text fields, form inputs, the landing selectors and the ticket selector. Deliberately independent of Corner Radius, so a very round brand keeps usable field shapes."
     },
     {
-        "key": "navbar",
-        "cssVar": "--coras-brand-navbar",
+        "key": "searchRadius",
+        "cssVar": "--coras-brand-search-radius",
+        "type": "length",
+        "group": "Shape",
+        "label": "Search Field Corners",
+        "default": "100px",
+        "description": "Corner radius for the nav search and the location search field"
+    },
+    {
+        "key": "font",
+        "cssVar": "--coras-brand-font",
+        "type": "font",
+        "group": "Typography",
+        "label": "Font",
+        "default": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+        "description": "Font for all text (add hosted files under the custom font option)"
+    },
+    {
+        "key": "headingFont",
+        "cssVar": "--coras-brand-heading-font",
+        "type": "font",
+        "group": "Typography",
+        "label": "Heading font",
+        "default": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+        "description": "Font for page, section and card headings (follows Font until set)"
+    },
+    {
+        "key": "headingScale",
+        "cssVar": "--coras-brand-heading-scale",
+        "type": "scale",
+        "group": "Typography",
+        "label": "Heading size",
+        "default": "1",
+        "description": "Scales every heading together: 1 is the standard size, 1.25 is 25% larger"
+    },
+    {
+        "key": "logoHeight",
+        "cssVar": "--coras-brand-logo-height",
+        "type": "length",
+        "group": "Logo",
+        "label": "Logo Height",
+        "default": "2rem",
+        "description": "How tall the logo renders in the navbar and email header"
+    },
+    {
+        "key": "navbarBackground",
+        "cssVar": "--coras-brand-navbar-background",
         "type": "color",
-        "group": "Navbar",
-        "label": "Background",
+        "group": "Navigation bar",
+        "label": "Background Colour",
         "default": "#ffffff",
         "description": "Navbar background (independent of the page background)"
     },
+    {
+        "key": "navbarBackgroundImage",
+        "cssVar": "--coras-brand-navbar-background-image",
+        "type": "gradient",
+        "group": "Navigation bar",
+        "label": "Background Gradient",
+        "default": "none",
+        "description": "Optional gradient painted over the Background Colour on the web. The mobile menu, the border and emails keep the solid colour"
+    },
     {
         "key": "navbarText",
         "cssVar": "--coras-brand-navbar-text",
         "type": "color",
-        "group": "Navbar",
-        "label": "Text",
+        "group": "Navigation bar",
+        "label": "Text Colour",
         "default": "#000000",
         "description": "Navbar labels and menu text"
     },
@@ -130,81 +355,144 @@ export const TOKEN_CONTROLS = [
         "key": "navbarIcon",
         "cssVar": "--coras-brand-navbar-icon",
         "type": "color",
-        "group": "Navbar",
-        "label": "Icon",
+        "group": "Navigation bar",
+        "label": "Nav Bar Icon Colour",
         "default": "#000000",
-        "description": "Navbar icons (follows Navbar text until set)"
+        "description": "This defaults to the Text Colour selected for the Navigation Bar but can be adjusted here if required"
     },
     {
         "key": "navbarBorder",
         "cssVar": "--coras-brand-navbar-border",
         "type": "color",
-        "group": "Navbar",
-        "label": "Border",
-        "default": "transparent",
-        "description": "Bottom border under the navbar (transparent by default)"
+        "group": "Navigation bar",
+        "label": "Bottom Border",
+        "default": "#ffffff",
+        "description": "This defaults to the Background Colour but can be adjusted here if a trim is required"
+    },
+    {
+        "key": "navbarShadow",
+        "cssVar": "--coras-brand-navbar-shadow",
+        "type": "shadow",
+        "group": "Navigation bar",
+        "label": "Drop Shadow",
+        "default": "0 4px 4px 0 rgba(0, 0, 0, 0.04)",
+        "description": "Default values applied. Set values to 0 if not required"
     },
     {
-        "key": "footer",
-        "cssVar": "--coras-brand-footer",
+        "key": "footerBackground",
+        "cssVar": "--coras-brand-footer-background",
         "type": "color",
         "group": "Footer",
-        "label": "Background",
+        "label": "Background Colour",
         "default": "#e6e6e6",
-        "description": "Footer background"
+        "description": "Footer background, on the web and in emails"
+    },
+    {
+        "key": "footerBackgroundImage",
+        "cssVar": "--coras-brand-footer-background-image",
+        "type": "gradient",
+        "group": "Footer",
+        "label": "Background Gradient",
+        "default": "none",
+        "description": "Optional gradient painted over the Background Colour on the web. The border and emails keep the solid colour"
     },
     {
         "key": "footerText",
         "cssVar": "--coras-brand-footer-text",
         "type": "color",
         "group": "Footer",
-        "label": "Text",
+        "label": "Text Colour",
         "default": "#000000",
-        "description": "Footer text"
+        "description": "Footer text, on the web and in emails"
     },
     {
-        "key": "footerLink",
-        "cssVar": "--coras-brand-footer-link",
+        "key": "footerBorder",
+        "cssVar": "--coras-brand-footer-border",
         "type": "color",
         "group": "Footer",
-        "label": "Link",
-        "default": "#000000",
-        "description": "Footer links (follows Footer text until set)"
+        "label": "Top Border",
+        "default": "#e6e6e6",
+        "description": "This defaults to the Background Colour but can be adjusted here if a trim is required"
+    },
+    {
+        "key": "footerPaddingBottom",
+        "cssVar": "--coras-brand-footer-padding-bottom",
+        "type": "length",
+        "group": "Footer",
+        "label": "Footer Padding Bottom",
+        "default": "2rem",
+        "description": "The space under the footer content, for a taller footer"
     },
     {
         "key": "error",
         "cssVar": "--coras-brand-error",
         "type": "color",
-        "group": "Status",
-        "label": "Error",
+        "group": "Alerts & status",
+        "label": "Error colour",
         "default": "#c9224a",
-        "description": "Errors and destructive actions"
+        "description": "Errors, destructive actions and the Music category tag"
+    },
+    {
+        "key": "errorBackground",
+        "cssVar": "--coras-brand-error-background",
+        "type": "color",
+        "group": "Alerts & status",
+        "label": "Error background",
+        "default": "#fae9ed",
+        "description": "The pale fill behind error alerts and tags"
     },
     {
         "key": "success",
         "cssVar": "--coras-brand-success",
         "type": "color",
-        "group": "Status",
-        "label": "Success",
+        "group": "Alerts & status",
+        "label": "Success colour",
         "default": "#00ad8f",
-        "description": "Success messages and confirmations"
+        "description": "Success messages and the Sport category tag"
+    },
+    {
+        "key": "successBackground",
+        "cssVar": "--coras-brand-success-background",
+        "type": "color",
+        "group": "Alerts & status",
+        "label": "Success background",
+        "default": "#e6f7f4",
+        "description": "The pale fill behind success alerts and tags"
     },
     {
         "key": "warning",
         "cssVar": "--coras-brand-warning",
         "type": "color",
-        "group": "Status",
-        "label": "Warning",
+        "group": "Alerts & status",
+        "label": "Warning colour",
         "default": "#ed8f1c",
-        "description": "Warnings and cautions"
+        "description": "Warnings and the Theatre category tag"
+    },
+    {
+        "key": "warningBackground",
+        "cssVar": "--coras-brand-warning-background",
+        "type": "color",
+        "group": "Alerts & status",
+        "label": "Warning background",
+        "default": "#fdf4e8",
+        "description": "The pale fill behind warning alerts and tags"
     },
     {
         "key": "info",
         "cssVar": "--coras-brand-info",
         "type": "color",
-        "group": "Status",
-        "label": "Info",
+        "group": "Alerts & status",
+        "label": "Info colour",
         "default": "#670c93",
-        "description": "Informational messages"
+        "description": "Info messages, reservation timers, Activity tags and marketing tags"
+    },
+    {
+        "key": "infoBackground",
+        "cssVar": "--coras-brand-info-background",
+        "type": "color",
+        "group": "Alerts & status",
+        "label": "Info background",
+        "default": "#f0e7f4",
+        "description": "The pale fill behind info alerts and Activity tags"
     }
 ];

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

@@ -49,11 +49,9 @@ declare const CorasDetailsPage_base: import("../../contexts/utils.js").Construct
     dispatchPageUpdate(params: import("../../contexts/events.context.js").PageDispatchInput): void;
 }> & typeof LitElement;
 /**
- * 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
  */
 export declare class CorasDetailsPage extends CorasDetailsPage_base {
     static styles: CSSResultGroup;
@@ -85,6 +83,7 @@ export declare class CorasDetailsPage extends CorasDetailsPage_base {
     private resetAvailabilityState;
     private updateDateParam;
     private handleBasketModalToggle;
+    private get resolvedDate();
     verifyDate: (firstInstanceDay: string, lastInstanceDay: string, timezone: string) => void;
     private checkDateAvailability;
     private attractionTask;
@@ -124,6 +123,7 @@ export declare class CorasDetailsPage extends CorasDetailsPage_base {
     private renderDescription;
     private renderBasketModal;
     private renderAvailabilityAlert;
+    private renderSkeleton;
     render(): import("lit").TemplateResult<1>;
 }
 export {};