@coras-io/embed 0.1.0

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

@@ -0,0 +1,129 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    font-size: var(--coras-font-size-sm);
+
+    --checkbox-label-color-disabled: var(--coras-color-neutral-500);
+    --checkbox-color-checked: var(--coras-color-primary);
+    --checkbox-shadow-color-main: var(--coras-palette-white);
+    --checkbox-label-color: var(--coras-color-text);
+    --checkbox-color: var(--coras-color-neutral-500);
+    --checkbox-border-radius: var(--coras-radius-control);
+    --checkbox-background-color-disabled: var(--coras-color-neutral-200);
+    --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);
+  }
+
+  :host([disabled]) {
+    label {
+      cursor: not-allowed;
+      color: var(--checkbox-label-color-disabled);
+    }
+  }
+
+  :host([checked]) {
+    label {
+      input {
+        &:not(:disabled) {
+          border: 1.5px solid var(--checkbox-color-checked);
+        }
+
+        &::before {
+          transform: scale(1);
+        }
+
+        &.main:not(:disabled) {
+          background-color: var(--checkbox-color-checked);
+
+          &::before {
+            box-shadow: inset 2rem 2rem var(--checkbox-shadow-color-main);
+          }
+        }
+      }
+    }
+  }
+
+  :host([error]) {
+    label {
+      color: var(--coras-color-error-500);
+    }
+  }
+
+  label {
+    display: grid;
+    grid-template-columns: 1.25rem auto;
+    gap: 1rem;
+
+    font-family: var(--checkbox-label-font-family, inherit);
+    font-size: var(--checkbox-label-font-size, inherit);
+    font-weight: var(--checkbox-label-font-weight, inherit);
+    line-height: var(--checkbox-label-line-height, 1.25rem);
+    letter-spacing: var(--checkbox-label-letter-spacing, normal);
+    color: var(--checkbox-label-color);
+    cursor: pointer;
+    align-items: center;
+
+    input {
+      -webkit-appearance: none;
+      appearance: none;
+      margin: 0;
+
+      display: grid;
+      place-content: center;
+
+      height: 1.25rem;
+      width: 1.25rem;
+      color: var(--checkbox-color);
+      border: 1px solid var(--checkbox-color);
+      border-radius: var(--checkbox-border-radius);
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: 0.9rem;
+        height: 0.6rem;
+        clip-path: path(
+          "M4.97921 9.646C4.86788 9.646 4.76021 9.625 4.65621 9.583C4.55221 9.54167 4.45155 9.47234 4.35421 9.375L0.833213 5.854C0.666547 5.68734 0.58688 5.47567 0.594214 5.219C0.60088 4.96167 0.687547 4.74967 0.854214 4.583C1.02088 4.41634 1.22921 4.333 1.47921 4.333C1.72921 4.333 1.93755 4.41634 2.10421 4.583L5.02121 7.5L11.9172 0.604004C12.0839 0.437337 12.2885 0.354004 12.5312 0.354004C12.7745 0.354004 12.9795 0.437337 13.1462 0.604004C13.3129 0.770671 13.3962 0.97567 13.3962 1.219C13.3962 1.46167 13.3129 1.66634 13.1462 1.833L5.60421 9.375C5.50688 9.47234 5.40621 9.54167 5.30221 9.583C5.19821 9.625 5.09055 9.646 4.97921 9.646Z"
+        );
+        transform: scale(0);
+        transform-origin: center;
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 2rem 2rem var(--checkbox-color-checked);
+      }
+
+      &.indeterminate {
+        &::before {
+          transform: scale(1);
+          clip-path: polygon(12% 42%, 87% 42%, 87% 58%, 12% 58%);
+        }
+      }
+
+      &:disabled {
+        background-color: var(--checkbox-background-color-disabled);
+        border-color: var(--checkbox-border-color-disabled);
+        cursor: not-allowed;
+
+        &::before {
+          box-shadow: inset 2rem 2rem var(--checkbox-shadow-color-disabled);
+        }
+
+        &.main {
+          background-color: var(--checkbox-background-color-main);
+
+          &::before {
+            box-shadow: inset 2rem 2rem var(--checkbox-shadow-color-main);
+          }
+        }
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--checkbox-background-color-hover);
+      }
+    }
+  }
+`;

package/dist/components/checkbox-group/checkbox-group.component.d.ts

@@ -0,0 +1,6 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../checkbox/checkbox.js";
+export declare class CorasCheckboxGroup extends LitElement {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -0,0 +1,14 @@
+import { LitElement, html } from "lit";
+import "../checkbox/checkbox.js";
+import styles from "./checkbox-group.styles.js";
+export class CorasCheckboxGroup extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `<div class="checkbox-group">
+      <slot name="primary" id="category-option"></slot>
+      <div class="options">
+        <slot></slot>
+      </div>
+    </div> `;
+    }
+}

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,8 @@
+import { CorasCheckboxGroup } from "./checkbox-group.component.js";
+export * from "./checkbox-group.component.js";
+export default CorasCheckboxGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-checkbox-group": CorasCheckboxGroup;
+    }
+}

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,6 @@
+import { CorasCheckboxGroup } from "./checkbox-group.component.js";
+export * from "./checkbox-group.component.js";
+export default CorasCheckboxGroup;
+if (!customElements.get("coras-checkbox-group")) {
+    customElements.define("coras-checkbox-group", CorasCheckboxGroup);
+}

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,40 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --checkbox-group-category-option-font-size: var(--coras-font-size-base);
+    --checkbox-group-category-option-font-weight: var(
+      --coras-font-weight-medium
+    );
+    --checkbox-group-category-option-color: var(--coras-color-text);
+    --checkbox-group-option-font-weight: var(--coras-font-weight-normal);
+  }
+
+  .checkbox-group {
+    #category-option {
+      font-size: var(--checkbox-group-category-option-font-size);
+      font-weight: var(--checkbox-group-category-option-font-weight);
+      color: var(--checkbox-group-category-option-color);
+
+      &.padded {
+        padding-left: 1.375rem;
+      }
+    }
+
+    ::slotted(coras-checkbox[slot="primary"]) {
+      font-size: var(--checkbox-group-category-option-font-size);
+    }
+
+    .options {
+      display: flex;
+      gap: 1.25rem;
+      flex-direction: column;
+
+      margin-top: 1rem;
+      padding-left: 1.375rem;
+      font-weight: var(--checkbox-group-option-font-weight);
+    }
+  }
+`;

package/dist/components/checkbox-group/checkbox-group.types.d.ts

@@ -0,0 +1,12 @@
+import { CheckboxVariants } from "../checkbox/checkbox.constants.js";
+export type Checkbox = {
+    label: string;
+    value: string;
+    checked: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariants;
+};
+export type CheckboxGroup = {
+    multiselect?: boolean;
+    subcategories: Checkbox[];
+} & Checkbox;

package/dist/components/checkbox-group/checkbox-group.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../button/button.js";
+import "../icon/icon.js";
+import { variants } from "./chip.constants.js";
+export declare class CorasChip extends LitElement {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    variant: (typeof variants)[number];
+    private handleRemoveClick;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/chip/chip.component.js

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { fireInternalEvent } from "../../core/events.js";
+import "../button/button.js";
+import "../icon/icon.js";
+import styles from "./chip.styles.js";
+export class CorasChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.variant = "primary";
+    }
+    static { this.styles = styles; }
+    handleRemoveClick() {
+        fireInternalEvent(this, "chip-removed", {});
+    }
+    render() {
+        const classes = {
+            chip: true,
+            primary: this.variant === "primary",
+            secondary: this.variant === "secondary",
+        };
+        return html `
+      <span part="base" class="${classMap(classes)}">
+        <coras-icon
+          assets-url="${this.assetsURL}"
+          icon="check-circle-fill"
+        ></coras-icon>
+        <slot part="label"></slot>
+        <button part="remove-button" @click=${this.handleRemoveClick}>
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="close"
+            label="remove"
+          ></coras-icon>
+        </button>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasChip.prototype, "assetsURL", void 0);
+__decorate([
+    property()
+], CorasChip.prototype, "variant", void 0);

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

@@ -0,0 +1 @@
+export declare const variants: readonly ["primary", "secondary"];

package/dist/components/chip/chip.constants.js

@@ -0,0 +1 @@
+export const variants = ["primary", "secondary"];

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,8 @@
+import { CorasChip } from "./chip.component.js";
+export * from "./chip.component.js";
+export default CorasChip;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-chip": CorasChip;
+    }
+}

package/dist/components/chip/chip.js

@@ -0,0 +1,6 @@
+import { CorasChip } from "./chip.component.js";
+export * from "./chip.component.js";
+export default CorasChip;
+if (!customElements.get("coras-chip")) {
+    customElements.define("coras-chip", CorasChip);
+}

package/dist/components/chip/chip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,103 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: inline-block;
+
+    --chip-border-radius: var(--coras-radius-chip);
+    --chip-font-weight: var(--coras-font-weight-normal);
+    --chip-font-size: var(--coras-font-size-sm);
+    --chip-primary-background-color: var(--coras-color-neutral-100);
+    --chip-primary-color: var(--coras-color-text);
+    --chip-primary-background-color-hover: color-mix(
+      in srgb,
+      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-hover: color-mix(
+      in srgb,
+      var(--chip-secondary-background-color),
+      var(--coras-state-overlay) var(--coras-state-hover)
+    );
+  }
+
+  .chip {
+    align-items: center;
+    background-color: transparent;
+    border-radius: var(--chip-border-radius);
+    border: 1px solid transparent;
+    display: inline-flex;
+    font-size: var(--chip-font-size);
+    font-weight: var(--chip-font-weight);
+    gap: 0.4em;
+    justify-content: center;
+    letter-spacing: 0.01em;
+    line-height: 0.875rem;
+    padding: 6px 8px;
+    white-space: nowrap;
+
+    &.primary {
+      background-color: var(--chip-primary-background-color);
+      color: var(--chip-primary-color);
+
+      &:hover {
+        background-color: var(--chip-primary-background-color-hover);
+      }
+
+      > coras-icon,
+      > button > coras-icon {
+        fill: var(--chip-primary-color);
+      }
+    }
+
+    &.secondary {
+      background-color: var(--chip-secondary-background-color);
+      color: var(--chip-secondary-color);
+
+      &:hover {
+        background-color: var(--chip-secondary-background-color-hover);
+      }
+
+      > coras-icon,
+      > button > coras-icon {
+        fill: var(--chip-secondary-color);
+      }
+    }
+
+    > button {
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      > coras-icon {
+        width: 1.4em;
+        height: 1.4em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    > coras-icon {
+      width: 1.4em;
+      height: 1.4em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ::slotted(*) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+`;

package/dist/components/collect-fida/collect-fida.component.d.ts

@@ -0,0 +1,11 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../button/button.js";
+export declare class CorasCollectFida extends LitElement {
+    static styles: CSSResultGroup;
+    tokens: string;
+    accountUrl: string;
+    assetsURL: string;
+    private getLogoSrc;
+    private openAccount;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import styles from "./collect-fida.styles.js";
+import "../button/button.js";
+let CorasCollectFida = class CorasCollectFida extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tokens = "0";
+        this.accountUrl = "#";
+        this.assetsURL = "";
+    }
+    static { this.styles = styles; }
+    getLogoSrc() {
+        if (!this.assetsURL)
+            return "";
+        return `${this.assetsURL}/fida/fida-logo-black.svg`;
+    }
+    openAccount() {
+        if (!this.accountUrl || this.accountUrl === "#")
+            return;
+        window.open(this.accountUrl, "_blank", "noopener,noreferrer");
+    }
+    render() {
+        const logoSrc = this.getLogoSrc();
+        return html `
+      <section part="base" class="card" aria-live="polite">
+        <div part="logo" class="logo" aria-hidden=${logoSrc ? "false" : "true"}>
+          ${logoSrc
+            ? html `<img src="${logoSrc}" alt="FIDA" width="122" height="38" />`
+            : html `FIDA`}
+        </div>
+
+        <p part="title" class="title">
+          ${msg(html `Good news! You’ve collected
+              <strong>${this.tokens} FIDA tokens</strong> on this purchase.`)}
+        </p>
+
+        <p part="description" class="description">
+          ${msg("These have been added to your account and can be used to pay for future purchases from the FIDA Shop.")}
+        </p>
+
+        <div class="actions">
+          <coras-button
+            part="button"
+            variant="primary"
+            aria-label=${msg("Go to FIDA Account (opens in a new tab)")}
+            @click=${() => this.openAccount()}
+          >
+            ${msg("Go to FIDA Account")}
+          </coras-button>
+        </div>
+      </section>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasCollectFida.prototype, "tokens", void 0);
+__decorate([
+    property({ type: String, attribute: "account-url" })
+], CorasCollectFida.prototype, "accountUrl", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasCollectFida.prototype, "assetsURL", void 0);
+CorasCollectFida = __decorate([
+    localized()
+], CorasCollectFida);
+export { CorasCollectFida };

package/dist/components/collect-fida/collect-fida.d.ts

@@ -0,0 +1,8 @@
+import { CorasCollectFida } from "./collect-fida.component.js";
+export * from "./collect-fida.component.js";
+export default CorasCollectFida;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-collect-fida": CorasCollectFida;
+    }
+}

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

@@ -0,0 +1,6 @@
+import { CorasCollectFida } from "./collect-fida.component.js";
+export * from "./collect-fida.component.js";
+export default CorasCollectFida;
+if (!customElements.get("coras-collect-fida")) {
+    customElements.define("coras-collect-fida", CorasCollectFida);
+}

package/dist/components/collect-fida/collect-fida.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,95 @@
+import { css } from "lit";
+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-border-radius: 0.75rem;
+    --collect-fida-text-color: var(--coras-color-secondary-400);
+    --collect-fida-muted-color: var(--coras-color-secondary-400);
+    --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-text: var(--coras-palette-white);
+    --collect-fida-button-radius: var(--coras-radius-full);
+    --collect-fida-button-padding-x: 1rem;
+    --collect-fida-button-padding-y: 1rem;
+    --collect-fida-button-font-weight: var(--coras-font-weight-semibold);
+    --collect-fida-button-font-size: var(--coras-font-size-sm);
+
+    color: var(--collect-fida-text-color);
+  }
+
+  .card {
+    background: var(--collect-fida-background);
+    border-radius: var(--collect-fida-border-radius);
+    padding: var(--collect-fida-padding-y) var(--collect-fida-padding-x);
+  }
+
+  .logo {
+    font-weight: var(--coras-font-weight-bold);
+    letter-spacing: 0.02em;
+    margin-bottom: 1rem;
+    color: var(--coras-color-secondary-400);
+  }
+
+  .logo img {
+    width: 122px;
+    height: 38px;
+  }
+
+  .title {
+    margin: 0 0 1rem;
+    color: var(--coras-color-secondary-400);
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 2rem;
+  }
+
+  .title strong {
+    color: var(--coras-color-secondary-400);
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2rem;
+  }
+
+  .description {
+    margin: 0 0 1rem;
+    color: var(--coras-color-secondary-400);
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 2rem;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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(
+      --collect-fida-button-bg-hover
+    );
+    --coras-button-primary-background-active: var(
+      --collect-fida-button-bg-hover
+    );
+    --coras-button-primary-text-color: var(--collect-fida-button-text);
+  }
+`;