@coras-io/embed 0.1.0

package/dist/components/star-rating/star-rating.component.js

@@ -0,0 +1,77 @@
+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 { range } from "lit/directives/range.js";
+import { map } from "lit/directives/map.js";
+import styles from "./star-rating.styles.js";
+/**
+ * A component that displays a star rating.
+ *
+ * @element coras-star-rating
+ *
+ * @property {number} rating - The rating value (0 to 5). Supports half-stars.
+ */
+export class CorasStarRating extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rating = 0;
+    }
+    static { this.styles = styles; }
+    get normalizedRating() {
+        return Math.max(0, Math.min(5, Math.round(this.rating * 2) / 2));
+    }
+    renderStar(index) {
+        const starValue = index + 1;
+        const isFull = starValue <= this.normalizedRating;
+        const isHalf = !isFull && starValue - 0.5 <= this.normalizedRating;
+        let className = "star star--empty";
+        if (isFull)
+            className = "star star--full";
+        else if (isHalf)
+            className = "star star--half";
+        return html `
+      <svg
+        class="${className}"
+        viewBox="0 0 18 18"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
+        />
+      </svg>
+    `;
+    }
+    render() {
+        return html `
+      <div
+        class="stars"
+        role="img"
+        aria-label="${this.normalizedRating} out of 5 stars"
+      >
+        <svg width="0" height="0" style="position: absolute;">
+          <defs>
+            <linearGradient id="half-gradient">
+              <stop offset="50%" stop-color="var(--star-rating-color)" />
+              <stop
+                offset="50%"
+                stop-color="var(--star-rating-background-color)"
+              />
+            </linearGradient>
+          </defs>
+        </svg>
+
+        ${map(range(5), (i) => this.renderStar(i))}
+        <span class="sr-only">${this.normalizedRating} out of 5 stars</span>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number, reflect: true })
+], CorasStarRating.prototype, "rating", void 0);

package/dist/components/star-rating/star-rating.d.ts

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

package/dist/components/star-rating/star-rating.js

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

package/dist/components/star-rating/star-rating.styles.d.ts

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

package/dist/components/star-rating/star-rating.styles.js

@@ -0,0 +1,49 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: inline-flex;
+    align-items: center;
+    --star-rating-color: var(--coras-color-primary);
+    --star-rating-background-color: var(--coras-color-neutral-200);
+    --star-size: 1.125rem;
+    --star-gap: 0.125rem;
+  }
+
+  .stars {
+    display: flex;
+    gap: var(--star-gap);
+    line-height: 0;
+  }
+
+  .star {
+    width: var(--star-size);
+    height: var(--star-size);
+  }
+
+  .star--full {
+    fill: var(--star-rating-color);
+  }
+
+  .star--half {
+    fill: url(#half-gradient);
+  }
+
+  .star--empty {
+    fill: var(--star-rating-background-color);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { TabVariants } from "./tab.constants.js";
+import "../option-group/option-chip/option-chip.js";
+export declare class CorasTab extends LitElement {
+    static styles: CSSResultGroup;
+    panel: string;
+    active: boolean;
+    variant: TabVariants | null;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab/tab.component.js

@@ -0,0 +1,52 @@
+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 { TabVariants } from "./tab.constants.js";
+import styles from "./tab.styles.js";
+import "../option-group/option-chip/option-chip.js";
+export class CorasTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.panel = "";
+        this.active = false;
+        this.variant = null;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tab");
+    }
+    updated(changed) {
+        if (changed.has("active")) {
+            this.setAttribute("aria-selected", this.active ? "true" : "false");
+        }
+    }
+    render() {
+        if (this.variant === TabVariants.CHIP) {
+            return html `
+        <coras-option-chip ?selected=${this.active}>
+          <slot></slot>
+        </coras-option-chip>
+      `;
+        }
+        return html `
+      <li class="tab" ?active=${this.active}>
+        <slot></slot>
+      </li>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], CorasTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasTab.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], CorasTab.prototype, "variant", void 0);

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

@@ -0,0 +1,4 @@
+export declare enum TabVariants {
+    TEXT = "text",
+    CHIP = "chip"
+}

package/dist/components/tab/tab.constants.js

@@ -0,0 +1,5 @@
+export var TabVariants;
+(function (TabVariants) {
+    TabVariants["TEXT"] = "text";
+    TabVariants["CHIP"] = "chip";
+})(TabVariants || (TabVariants = {}));

package/dist/components/tab/tab.d.ts

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

package/dist/components/tab/tab.js

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

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

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

package/dist/components/tab/tab.styles.js

@@ -0,0 +1,50 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --tab-line-height: 22px;
+    --tab-letter-spacing: 0.02em;
+    --tab-padding: 0.5rem 1rem;
+    --tab-border-bottom-width: 3px;
+    --tab-chip-padding: 0.625rem;
+
+    --tab-color: var(--coras-color-text);
+    --tab-font-size: var(--coras-font-size-base);
+    --tab-font-weight: var(--coras-font-weight-medium);
+    --tab-shadow: var(--coras-shadow-sm);
+    --tab-border-bottom-color: var(--coras-color-secondary-500);
+    --tab-chip-selected-background-color: var(--coras-color-primary);
+    --tab-chip-font-size: var(--coras-font-size-base);
+    --tab-chip-line-height: var(--coras-font-size-base);
+  }
+
+  li {
+    color: var(--tab-color);
+    font-size: var(--tab-font-size);
+    font-weight: var(--tab-font-weight);
+    line-height: var(--tab-line-height);
+    letter-spacing: var(--tab-letter-spacing);
+    padding: var(--tab-padding);
+    filter: box-shadow(var(--tab-shadow));
+    cursor: pointer;
+
+    &[active] {
+      border-bottom: var(--tab-border-bottom-width) solid
+        var(--tab-border-bottom-color);
+    }
+  }
+
+  coras-option-chip {
+    font-size: var(--tab-chip-font-size);
+    line-height: var(--tab-chip-line-height);
+    padding: var(--tab-chip-padding);
+  }
+
+  coras-option-chip {
+    &[selected] {
+      background-color: var(--tab-chip-selected-background-color);
+    }
+  }
+`;

package/dist/components/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+export declare class CorasTabPanel extends LitElement {
+    static styles: CSSResultGroup;
+    name: string;
+    active: boolean;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab-panel/tab-panel.component.js

@@ -0,0 +1,35 @@
+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 styles from "./tab-panel.styles.js";
+export class CorasTabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.active = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tabpanel");
+    }
+    updated(changed) {
+        if (changed.has("active")) {
+            this.setAttribute("aria-hidden", this.active ? "false" : "true");
+        }
+    }
+    render() {
+        return html `<slot part="base" class="panel" ?active=${this.active}></slot>`;
+    }
+}
+__decorate([
+    property()
+], CorasTabPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasTabPanel.prototype, "active", void 0);

package/dist/components/tab-panel/tab-panel.d.ts

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

package/dist/components/tab-panel/tab-panel.js

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

package/dist/components/tab-panel/tab-panel.styles.d.ts

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

package/dist/components/tab-panel/tab-panel.styles.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --slot-active-display: var(--tab-panel-slot-active-display, block);
+    --slot-active-justify-content: var(
+      --tab-panel-slot-active-justify-content,
+      initial
+    );
+  }
+
+  .panel {
+    padding: 1rem 0;
+    display: none;
+
+    &[active] {
+      display: var(--slot-active-display);
+      justify-content: var(--slot-active-justify-content);
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+import { CSSResultGroup, LitElement } from "lit";
+export declare class CorasTabs extends LitElement {
+    static styles: CSSResultGroup;
+    selectedTab: string;
+    private tabs;
+    private panels;
+    private activeTab?;
+    protected updated(): void;
+    private getActiveTab;
+    private getActivePanel;
+    private setTabActive;
+    private setTabInactive;
+    private setPanelActive;
+    private setPanelInactive;
+    private findPanelByTab;
+    private handleClick;
+    private setActiveTab;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tabs/tabs.component.js

@@ -0,0 +1,87 @@
+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, queryAssignedElements } from "lit/decorators.js";
+import { fireInternalEvent } from "../../core/events.js";
+import styles from "./tabs.styles.js";
+export class CorasTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedTab = "";
+    }
+    static { this.styles = styles; }
+    updated() {
+        const activeTab = this.tabs.find((el) => el.panel === this.selectedTab);
+        if (activeTab) {
+            this.setActiveTab(activeTab);
+        }
+    }
+    getActiveTab() {
+        return this.tabs.find((el) => el.active);
+    }
+    getActivePanel() {
+        return this.panels.find((el) => el.active);
+    }
+    setTabActive(tab) {
+        tab?.setAttribute("active", "");
+    }
+    setTabInactive(tab) {
+        tab?.removeAttribute("active");
+    }
+    setPanelActive(panel) {
+        panel?.setAttribute("active", "");
+    }
+    setPanelInactive(panel) {
+        panel?.removeAttribute("active");
+    }
+    findPanelByTab(tab) {
+        return this.panels.find((el) => el.name === tab.panel);
+    }
+    handleClick(event) {
+        const target = event.target;
+        const tab = target.closest("coras-tab");
+        const tabGroup = tab?.closest("coras-tabs");
+        // Ensure the target tab is in this tab group
+        if (tabGroup !== this) {
+            return;
+        }
+        if (tab !== null) {
+            fireInternalEvent(this, "tab-changed", { tab: tab.panel });
+        }
+    }
+    setActiveTab(tab) {
+        if (tab !== this.activeTab) {
+            const activeTab = this.getActiveTab();
+            const activePanel = this.getActivePanel();
+            const nextPanel = this.findPanelByTab(tab);
+            this.activeTab = tab;
+            this.setTabActive(tab);
+            this.setPanelActive(nextPanel);
+            this.setTabInactive(activeTab);
+            this.setPanelInactive(activePanel);
+        }
+    }
+    render() {
+        return html `
+      <div class="tabs" @click=${this.handleClick}>
+        <ul part="nav">
+          <slot name="nav"></slot>
+        </ul>
+        <slot name="body"></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "selected-tab" })
+], CorasTabs.prototype, "selectedTab", void 0);
+__decorate([
+    queryAssignedElements({ slot: "nav", selector: "coras-tab" })
+], CorasTabs.prototype, "tabs", void 0);
+__decorate([
+    queryAssignedElements({ slot: "body", selector: "coras-tab-panel" })
+], CorasTabs.prototype, "panels", void 0);

package/dist/components/tabs/tabs.d.ts

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

package/dist/components/tabs/tabs.js

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

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

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

package/dist/components/tabs/tabs.styles.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --tabs-border-bottom-color: color-mix(
+      in srgb,
+      var(--coras-color-error-500),
+      transparent 96%
+    );
+    --tabs-gap: 0;
+    --tabs-align-items: flex-start;
+    --tabs-justify-content: flex-start;
+  }
+
+  div.tabs {
+    width: 100%;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: var(--tabs-justify-content);
+    list-style: none;
+    gap: var(--tabs-gap);
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--tabs-border-bottom-color);
+  }
+`;

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

@@ -0,0 +1,8 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { variants } from "./tag.constants.js";
+export declare class CorasTag extends LitElement {
+    static styles: CSSResultGroup;
+    variant: (typeof variants)[number];
+    private computeClasses;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tag/tag.component.js

@@ -0,0 +1,33 @@
+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 { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./tag.styles.js";
+export class CorasTag extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "blue";
+    }
+    static { this.styles = styles; }
+    computeClasses() {
+        return {
+            blue: this.variant === "blue",
+            green: this.variant === "green",
+            red: this.variant === "red",
+            purple: this.variant === "purple",
+        };
+    }
+    render() {
+        return html `<span class=${classMap(this.computeClasses())}>
+      <slot></slot>
+    </span>`;
+    }
+}
+__decorate([
+    property()
+], CorasTag.prototype, "variant", void 0);

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

@@ -0,0 +1 @@
+export declare const variants: string[];

package/dist/components/tag/tag.constants.js

@@ -0,0 +1 @@
+export const variants = ["blue", "green", "red", "purple"];

package/dist/components/tag/tag.d.ts

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

package/dist/components/tag/tag.js

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

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

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