@coras-io/embed 0.2.0 → 0.4.0

package/dist/components/bottom-drawer/bottom-drawer.styles.js

@@ -4,7 +4,7 @@ export default css `
   ${component}
 
   :host {
-    --bottom-drawer-bg-color: var(--coras-palette-white);
+    --bottom-drawer-bg-color: var(--coras-color-card);
     --bottom-drawer-border-color: var(--coras-color-neutral-300);
     --bottom-drawer-shadow: var(--coras-shadow-top);
     --bottom-drawer-z-index: var(--coras-z-index-overlay, 1000);
@@ -12,12 +12,14 @@ export default css `
     --bottom-drawer-transition: 0.2s ease;
     --bottom-drawer-transform-y: 0px;
 
+    /* Sized by left/right against the containing block, never 100vw: that is
+       the window width, which ignores both a host page's scrollbar and any
+       transformed ancestor that a fixed element is actually contained by. */
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     display: block;
-    width: 100vw;
     animation: slideOut 0.3s both;
     z-index: var(--bottom-drawer-z-index);
   }
@@ -40,11 +42,11 @@ export default css `
     width: 40px;
     height: 4px;
     background-color: var(--coras-color-neutral-200);
-    border-radius: 999px;
+    border-radius: var(--coras-radius-full);
   }
 
   .content {
-    width: 100vw;
+    width: 100%;
     background-color: var(--bottom-drawer-bg-color);
     border-top: 1px solid var(--bottom-drawer-border-color);
     box-shadow: var(--bottom-drawer-shadow);

package/dist/components/button/button.component.d.ts

@@ -15,7 +15,6 @@ export declare class CorasButton extends LitElement {
     borderColor: (typeof borderColor)[number];
     expanded: boolean;
     shadow: boolean;
-    background: boolean;
     clickable: boolean;
     error: boolean;
     loading: boolean;

package/dist/components/button/button.component.js

@@ -24,11 +24,9 @@ export class CorasButton extends LitElement {
         this.borderColor = "none";
         this.expanded = false;
         this.shadow = true;
-        this.background = false;
         this.clickable = true;
         this.error = false;
         this.loading = false;
-        // TODO: Skip if not required
         this.internals = this.attachInternals();
     }
     connectedCallback() {
@@ -43,7 +41,6 @@ export class CorasButton extends LitElement {
         }
         super.disconnectedCallback();
     }
-    // TODO: Do we need it? When is it used?
     click() {
         if (!this.disabled && this.clickable && !this.loading) {
             this.button.click();
@@ -74,7 +71,7 @@ export class CorasButton extends LitElement {
             "radius-small": this.radius === "small",
             "radius-large": this.radius === "large",
             "radius-circle": this.radius === "circle",
-            "radius-chip": this.radius === "chip",
+            "radius-field": this.radius === "field",
             "height-xs": this.height === "xs",
             "height-sm": this.height === "sm",
             "height-md": this.height === "md",
@@ -88,7 +85,6 @@ export class CorasButton extends LitElement {
             "has-prefix": hasPrefix,
             "has-suffix": hasSuffix,
             "no-shadow": !this.shadow,
-            "with-background": this.background,
             "not-clickable": !this.clickable,
             error: this.error,
             loading: this.loading,
@@ -142,9 +138,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CorasButton.prototype, "shadow", void 0);
-__decorate([
-    property({ type: Boolean })
-], CorasButton.prototype, "background", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CorasButton.prototype, "clickable", void 0);

package/dist/components/button/button.constants.d.ts

@@ -1,5 +1,5 @@
 export declare const variants: string[];
-export declare const radius: readonly ["small", "large", "circle", "chip"];
+export declare const radius: readonly ["small", "large", "circle", "field"];
 export declare const height: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const borderColor: readonly ["none", "light", "medium"];
 export declare const expanded: readonly [true, false];

package/dist/components/button/button.constants.js

@@ -5,7 +5,7 @@ export const variants = [
     "text",
     "transparent",
 ];
-export const radius = ["small", "large", "circle", "chip"];
+export const radius = ["small", "large", "circle", "field"];
 export const height = ["xs", "sm", "md", "lg", "xl"];
 export const borderColor = ["none", "light", "medium"];
 export const expanded = [true, false];

package/dist/components/button/button.styles.js

@@ -7,12 +7,12 @@ export default css `
     --button-border-radius: var(--coras-radius-button);
     --button-border-radius-small: var(--coras-radius-sm);
     --button-border-radius-large: var(--coras-radius-button);
-    --button-border-radius-chip: var(--coras-radius-chip);
+    --button-border-radius-field: var(--coras-radius-field);
     --button-box-shadow: var(--coras-shadow-md);
     --button-font-weight: var(--coras-font-weight-normal);
 
     --button-primary-text-color: var(--coras-button-primary-text-color);
-    --button-primary-text-color-disabled: var(--coras-color-neutral-500);
+    --button-primary-text-color-disabled: var(--coras-color-text-disabled);
     --button-primary-background: var(--coras-button-primary-background);
     --button-primary-background-hover: var(
       --coras-button-primary-background-hover
@@ -21,56 +21,65 @@ export default css `
       --coras-button-primary-background-active
     );
     --button-primary-background-disabled: var(--coras-color-neutral-200);
-
-    --button-secondary-color: var(--coras-palette-white);
-    --button-secondary-color-disabled: var(--coras-color-neutral-500);
-    --button-secondary-background-color: var(--coras-color-secondary-500);
-    --button-secondary-background-color-hover: var(--coras-color-secondary-400);
+    --button-primary-border-color: var(--coras-button-primary-border-color);
+
+    --button-secondary-color: var(--coras-color-secondary-button-text);
+    --button-secondary-color-disabled: var(--coras-color-text-disabled);
+    --button-secondary-background-color: var(--coras-color-secondary-button);
+    --button-secondary-border-color: var(--coras-button-secondary-border-color);
+    --button-secondary-background-color-hover: var(
+      --coras-color-secondary-button-hover
+    );
     --button-secondary-background-color-active: var(
-      --coras-color-secondary-500
+      --coras-color-secondary-button-pressed
     );
     --button-secondary-background-color-disabled: var(
       --coras-color-neutral-200
     );
 
     --button-outlined-color: var(--coras-color-text);
-    --button-outlined-color-disabled: var(--coras-color-neutral-500);
-    --button-outlined-background-color: var(--coras-color-surface);
-    --button-outlined-background-color-hover: var(--coras-color-surface-hover);
-    --button-outlined-background-color-active: var(--coras-color-surface);
-    --button-outlined-background-color-disabled: var(--coras-color-surface);
+    --button-outlined-color-disabled: var(--coras-color-text-disabled);
+    /* An outlined button is a control, not a card, so it fills from the page
+       background. There is no page-background hover token, so it composes one
+       the same way the card, field and menu hovers are built. */
+    --button-outlined-background-color: var(--coras-color-background);
+    --button-outlined-background-color-hover: color-mix(
+      in srgb,
+      var(--coras-color-background),
+      var(--coras-state-overlay) var(--coras-state-hover)
+    );
+    --button-outlined-background-color-active: var(--coras-color-background);
+    --button-outlined-background-color-disabled: var(--coras-color-background);
     --button-outlined-border-color: var(--coras-color-neutral-600);
-    --button-outlined-border-color-disabled: var(--coras-color-neutral-400);
+    --button-outlined-border-color-disabled: var(--coras-color-text-disabled);
 
     --button-text-color: var(--coras-color-text-button);
-    --button-text-color-disabled: var(--coras-color-neutral-500);
+    --button-text-color-disabled: var(--coras-color-text-disabled);
     --button-text-background-color: transparent;
-    --button-text-background-color-hover: var(--coras-color-primary-100);
-    --button-text-background-color-active: var(--coras-color-primary-500);
+    --button-text-background-color-hover: var(--coras-color-card-hover);
+    --button-text-background-color-active: var(--coras-color-card-active);
     --button-text-background-color-disabled: transparent;
     --button-text-font-weight: var(--coras-font-weight-semibold);
 
     --button-transparent-color: var(--coras-palette-white);
-    --button-transparent-color-disabled: var(--coras-color-neutral-500);
-    --button-transparent-border-color-disabled: var(--coras-color-neutral-500);
-    --button-transparent-background-color: transparent;
-    --button-transparent-background-color-hover: var(--coras-color-primary-100);
-    --button-transparent-background-color-active: var(
-      --coras-color-primary-100
+    --button-transparent-color-disabled: var(--coras-color-text-disabled);
+    --button-transparent-border-color-disabled: var(
+      --coras-color-text-disabled
     );
+    --button-transparent-background-color: transparent;
+    --button-transparent-background-color-hover: var(--coras-color-card-hover);
+    --button-transparent-background-color-active: var(--coras-color-card-hover);
     --button-transparent-border-color: var(--coras-palette-white);
     --button-transparent-color-hover: var(--coras-color-text);
-    --button-transparent-color-active: var(--coras-color-primary-500);
-    --button-transparent-border-color-active: var(--coras-color-primary-500);
+    --button-transparent-color-active: var(--coras-color-primary);
+    --button-transparent-border-color-active: var(--coras-color-primary);
 
     --button-small-font-size: var(--coras-font-size-sm);
     --button-medium-font-size: 1em;
     --button-large-font-size: 1.2em;
 
-    --button-background-color: var(--coras-color-primary-50);
-
-    --button-error-color: var(--coras-color-error-700);
-    --button-error-border-color: var(--coras-color-error-700);
+    --button-error-color: var(--coras-color-error);
+    --button-error-border-color: var(--coras-color-error);
 
     cursor: pointer;
     display: inline-block;
@@ -83,6 +92,15 @@ export default css `
     width: 100%;
   }
 
+  /* A field-radius outlined button is a form field (the landing selectors, the
+     ticket selector, the date field), so it takes the field fill, not the card. */
+  :host([radius="field"]) {
+    --button-outlined-background-color: var(--coras-color-field);
+    --button-outlined-background-color-hover: var(--coras-color-field-hover);
+    --button-outlined-background-color-active: var(--coras-color-field);
+    --button-outlined-background-color-disabled: var(--coras-color-field);
+  }
+
   :host(:not([clickable])) {
     pointer-events: none;
   }
@@ -105,6 +123,14 @@ export default css `
     white-space: nowrap;
     width: 100%;
 
+    &:focus-visible {
+      outline: 2px solid var(--coras-color-focus-ring);
+      outline-offset: 2px;
+      box-shadow:
+        0 0 0 2px var(--coras-color-background),
+        var(--button-box-shadow);
+    }
+
     &.has-prefix.has-suffix {
       display: flex;
       justify-content: space-between;
@@ -127,6 +153,7 @@ export default css `
     &.primary {
       background: var(--button-primary-background);
       color: var(--button-primary-text-color);
+      border-color: var(--button-primary-border-color);
 
       &:hover:not([disabled]) {
         background: var(--button-primary-background-hover);
@@ -154,6 +181,7 @@ export default css `
     &.secondary {
       background-color: var(--button-secondary-background-color);
       color: var(--button-secondary-color);
+      border-color: var(--button-secondary-border-color);
 
       &:hover:not([disabled]) {
         background-color: var(--button-secondary-background-color-hover);
@@ -280,8 +308,8 @@ export default css `
       border-radius: var(--button-border-radius-large);
     }
 
-    &.radius-chip {
-      border-radius: var(--button-border-radius-chip);
+    &.radius-field {
+      border-radius: var(--button-border-radius-field);
       padding-left: 0.5rem;
       padding-right: 0.5rem;
     }
@@ -319,7 +347,10 @@ export default css `
       }
     }
 
-    &.border-none {
+    /* "none" is the default border state, so it must not erase the brand border
+       colour a primary or secondary button carries. An explicit light/medium
+       override still applies to any variant. */
+    &.border-none:not(.primary):not(.secondary) {
       border-color: transparent;
     }
 
@@ -335,16 +366,12 @@ export default css `
       box-shadow: none;
     }
 
-    &.with-background {
-      background-color: var(--button-background-color);
-    }
-
     &.error {
-      border-color: var(--coras-color-error-700);
-      color: var(--coras-color-error-700);
+      border-color: var(--coras-color-error);
+      color: var(--coras-color-error);
 
       ::slotted(coras-icon) {
-        fill: var(--coras-color-error-700);
+        fill: var(--coras-color-error);
       }
     }
 

package/dist/components/calendar/base/calendar.styles.js

@@ -6,15 +6,13 @@ export default css `
   :host {
     --calendar-font-color: var(--coras-color-text);
     --calendar-font-size: var(--coras-font-size-sm);
-    --calendar-background-color: var(--coras-color-surface);
+    --calendar-background-color: var(--coras-color-menu);
     --calendar-disabled-font-color: var(--coras-color-neutral-600);
     --calendar-header-font-size: var(--coras-font-size-base);
     --calendar-day-name-font-weight: var(--coras-font-weight-semibold);
-    --calendar-selected-background-color: var(--coras-color-secondary-500);
+    --calendar-selected-background-color: var(--coras-color-secondary);
     --calendar-selected-font-color: var(--coras-palette-white);
-    --calendar-selected-range-background-color: var(
-      --coras-color-surface-hover
-    );
+    --calendar-selected-range-background-color: var(--coras-color-menu-hover);
     --calendar-selected-border-radius: var(--coras-radius-full);
   }
 

package/dist/components/calendar/multi/multi.styles.js

@@ -3,6 +3,13 @@ import component from "../../../styles/defaults/component.js";
 export default css `
   ${component}
 
+  :host {
+    /* The multi-month calendar is mounted directly by the landing page, not
+       nested inside coras-calendar, so it does not inherit that component's
+       token. Declare it here rather than reading a sibling's :host. */
+    --calendar-header-font-size: var(--coras-font-size-base);
+  }
+
   .calendar {
     .months {
       display: flex;

package/dist/components/category-tag/category-tag.styles.js

@@ -6,21 +6,24 @@ export default css `
   :host {
     --category-tag-line-height: 14px;
     --category-tag-letter-spacing: 0.02em;
-    /* New design: every category tag uses an alert surface background and the
-       primary text colour (designer "Category tags (New)"). */
     --category-tag-music-color: var(--coras-color-text);
-    --category-tag-music-background-color: var(--coras-color-error-surface);
+    --category-tag-music-background-color: var(--coras-color-error-background);
     --category-tag-sport-color: var(--coras-color-text);
-    --category-tag-sport-background-color: var(--coras-color-success-surface);
+    --category-tag-sport-background-color: var(
+      --coras-color-success-background
+    );
     --category-tag-theatre-color: var(--coras-color-text);
-    --category-tag-theatre-background-color: var(--coras-color-warning-surface);
+    --category-tag-theatre-background-color: var(
+      --coras-color-warning-background
+    );
 
-    /* Tags keep a fixed pill shape, exempt from the brand radius. */
     --category-tag-border-radius: var(--coras-radius-full);
     --category-tag-font-size: var(--coras-font-size-xxs);
     --category-tag-font-weight: var(--coras-font-weight-normal);
     --category-tag-activity-color: var(--coras-color-text);
-    --category-tag-activity-background-color: var(--coras-color-info-surface);
+    --category-tag-activity-background-color: var(
+      --coras-color-info-background
+    );
     --category-tag-icon-font-size: var(--coras-font-size-lg);
 
     width: fit-content;

package/dist/components/checkbox/checkbox.styles.js

@@ -16,7 +16,7 @@ export default css `
     --checkbox-border-color-disabled: var(--coras-color-neutral-300);
     --checkbox-shadow-color-disabled: var(--coras-color-neutral-500);
     --checkbox-background-color-main: var(--coras-color-neutral-500);
-    --checkbox-background-color-hover: var(--coras-color-surface-hover);
+    --checkbox-background-color-hover: var(--coras-color-card-hover);
   }
 
   :host([disabled]) {
@@ -50,7 +50,7 @@ export default css `
 
   :host([error]) {
     label {
-      color: var(--coras-color-error-500);
+      color: var(--coras-color-error);
     }
   }
 

package/dist/components/chip/chip.styles.js

@@ -16,8 +16,8 @@ export default css `
       var(--chip-primary-background-color),
       var(--coras-state-overlay) var(--coras-state-hover)
     );
-    --chip-secondary-background-color: var(--coras-color-primary-200);
-    --chip-secondary-color: var(--coras-color-primary-500);
+    --chip-secondary-background-color: var(--coras-color-primary-tint);
+    --chip-secondary-color: var(--coras-color-primary);
     --chip-secondary-background-color-hover: color-mix(
       in srgb,
       var(--chip-secondary-background-color),

package/dist/components/collect-fida/collect-fida.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { property } from "lit/decorators.js";
-import { localized, msg } from "@lit/localize";
+import { localized, msg, str } from "@lit/localize";
 import styles from "./collect-fida.styles.js";
 import "../button/button.js";
 let CorasCollectFida = class CorasCollectFida extends LitElement {
@@ -29,6 +29,8 @@ let CorasCollectFida = class CorasCollectFida extends LitElement {
     }
     render() {
         const logoSrc = this.getLogoSrc();
+        const tokens = msg(str `${this.tokens} FIDA tokens`);
+        const collectedTokens = html `<strong>${tokens}</strong>`;
         return html `
       <section part="base" class="card" aria-live="polite">
         <div part="logo" class="logo" aria-hidden=${logoSrc ? "false" : "true"}>
@@ -38,8 +40,8 @@ let CorasCollectFida = class CorasCollectFida extends LitElement {
         </div>
 
         <p part="title" class="title">
-          ${msg(html `Good news! You’ve collected
-              <strong>${this.tokens} FIDA tokens</strong> on this purchase.`)}
+          ${msg(html `Good news! You’ve collected ${collectedTokens} on this
+            purchase.`)}
         </p>
 
         <p part="description" class="description">

package/dist/components/collect-fida/collect-fida.styles.js

@@ -3,23 +3,17 @@ export default css `
   :host {
     display: block;
 
-    /* Component CSS custom properties with design token fallbacks */
-    --collect-fida-background: linear-gradient(
-      to right,
-      color-mix(in srgb, var(--coras-palette-pink-500), white 97%),
-      color-mix(in srgb, var(--coras-palette-pink-500), white 97%)
-    );
+    --collect-fida-background: var(--coras-color-secondary-tint);
     --collect-fida-border-radius: 0.75rem;
-    --collect-fida-text-color: var(--coras-color-secondary-400);
-    --collect-fida-muted-color: var(--coras-color-secondary-400);
+    --collect-fida-text-color: var(--coras-color-text);
+    --collect-fida-muted-color: var(--coras-color-text-muted);
     --collect-fida-title-font-size: var(--coras-font-size-base);
     --collect-fida-description-font-size: var(--coras-font-size-sm);
     --collect-fida-padding-x: 3rem;
     --collect-fida-padding-y: 3rem;
 
-    /* Button theme (pink variant) */
-    --collect-fida-button-bg: var(--coras-palette-pink-500);
-    --collect-fida-button-bg-hover: var(--coras-palette-pink-500);
+    --collect-fida-button-bg: var(--coras-color-secondary);
+    --collect-fida-button-bg-hover: var(--coras-color-secondary-button-hover);
     --collect-fida-button-text: var(--coras-palette-white);
     --collect-fida-button-radius: var(--coras-radius-full);
     --collect-fida-button-padding-x: 1rem;
@@ -40,7 +34,7 @@ export default css `
     font-weight: var(--coras-font-weight-bold);
     letter-spacing: 0.02em;
     margin-bottom: 1rem;
-    color: var(--coras-color-secondary-400);
+    color: var(--coras-color-text);
   }
 
   .logo img {
@@ -50,7 +44,7 @@ export default css `
 
   .title {
     margin: 0 0 1rem;
-    color: var(--coras-color-secondary-400);
+    color: var(--coras-color-text);
     font-size: 1.125rem;
     font-style: normal;
     font-weight: 400;
@@ -58,7 +52,7 @@ export default css `
   }
 
   .title strong {
-    color: var(--coras-color-secondary-400);
+    color: var(--coras-color-text);
     font-size: 1.125rem;
     font-style: normal;
     font-weight: 600;
@@ -67,7 +61,7 @@ export default css `
 
   .description {
     margin: 0 0 1rem;
-    color: var(--coras-color-secondary-400);
+    color: var(--coras-color-text);
     font-size: 1.125rem;
     font-style: normal;
     font-weight: 400;
@@ -81,7 +75,6 @@ export default css `
     margin-top: 1rem;
   }
 
-  /* Theme the internal coras-button using CSS custom properties */
   .actions coras-button {
     --coras-button-primary-background: var(--collect-fida-button-bg);
     --coras-button-primary-background-hover: var(

package/dist/components/crypto-auth-modal/crypto-auth-modal.component.js

@@ -288,9 +288,10 @@ let CorasCryptoAuthModal = class CorasCryptoAuthModal extends LitElement {
     `;
     }
     renderEmailOtpContent() {
+        const email = html `<strong>${this.email}</strong>`;
         return html `
       <p class="step-instruction">
-        ${msg(html `Please check <strong>${this.email}</strong> for your 6 digit code`)}
+        ${msg(html `Please check ${email} for your 6 digit code`)}
       </p>
       <div class="otp-container">
         <coras-otp
@@ -349,11 +350,12 @@ let CorasCryptoAuthModal = class CorasCryptoAuthModal extends LitElement {
     }
     renderMfaSmsPromptContent() {
         const hasFormPhone = !!this.formPhone && !this.showPhoneInput;
+        const phone = html `<strong>${this.maskedPhone}</strong>`;
         return html `
       <p class="step-instruction">
         ${hasFormPhone
             ? msg(html `We'll send a one-time code to your phone number ending in
-                <strong>${this.maskedPhone}</strong> to verify it.`)
+              ${phone} to verify it.`)
             : msg("Add your phone number to protect your FIDA payments. We'll send a one-time code to verify it.")}
       </p>
       ${hasFormPhone ? nothing : this.renderPhoneField()}
@@ -390,10 +392,10 @@ let CorasCryptoAuthModal = class CorasCryptoAuthModal extends LitElement {
     `;
     }
     renderMfaSmsOtpContent() {
+        const phone = html `<strong>${this.maskedPhone}</strong>`;
         return html `
       <p class="step-instruction">
-        ${msg(html `Please check <strong>${this.maskedPhone}</strong> for your 6
-            digit code`)}
+        ${msg(html `Please check ${phone} for your 6 digit code`)}
       </p>
       <div class="otp-container">
         <coras-otp

package/dist/components/crypto-auth-modal/crypto-auth-modal.styles.js

@@ -53,7 +53,7 @@ export default css `
   }
 
   .resend-link {
-    background: var(--coras-color-surface, #ffffff);
+    background: var(--coras-color-card, #ffffff);
     border: 1.5px solid var(--coras-color-text-primary, #000000);
     border-radius: 64px;
     color: var(--coras-color-text-primary, #000000);
@@ -80,7 +80,7 @@ export default css `
 
   .rate-limit-error,
   .error-text {
-    color: var(--coras-color-error-500);
+    color: var(--coras-color-error);
     font-size: var(--coras-font-size-sm);
     margin: 0.5rem 0;
   }