@coras-io/embed 0.1.0

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

@@ -0,0 +1,210 @@
+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, state } from "lit/decorators.js";
+import styles from "./bottom-drawer.styles.js";
+import { scrollLock } from "../../core/utils/scroll-lock.js";
+export class CorasBottomDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        // When true, drawer content covers the full viewport height
+        this.fullscreen = false;
+        this.isDragging = false;
+        this.startY = 0;
+        this.currentY = 0;
+        this.dragMoved = false;
+        this.suppressNextClick = false;
+        this._ownsScrollLock = false;
+        this.setVisibility = () => {
+            this.style.visibility = this.open ? "visible" : "hidden";
+        };
+        this.endDrag = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            const diff = this.currentY - this.startY;
+            const threshold = this.clientHeight * 0.25; // 25% swipe threshold
+            // Reset transitional variables
+            this.style.removeProperty("--bottom-drawer-transition");
+            this.style.removeProperty("--bottom-drawer-transform-y");
+            if (this.fullscreen) {
+                // Dragging down closes fullscreen
+                if (diff > threshold)
+                    this.fullscreen = false;
+            }
+            else {
+                // Dragging up opens fullscreen
+                if (diff < -threshold)
+                    this.fullscreen = true;
+            }
+            // Suppress the click that follows a drag
+            if (Math.abs(diff) > 2)
+                this.suppressNextClick = true;
+            this.dragMoved = false;
+            // Clean up mouse listeners if any
+            if (this.mouseMoveListener) {
+                document.removeEventListener("mousemove", this.mouseMoveListener);
+                this.mouseMoveListener = undefined;
+            }
+            if (this.mouseUpListener) {
+                document.removeEventListener("mouseup", this.mouseUpListener);
+                this.mouseUpListener = undefined;
+            }
+        };
+        this.onHandleTouchStart = (e) => {
+            if (!this.canStartDragFromHandle())
+                return;
+            const y = e.touches[0]?.clientY ?? 0;
+            this.startDragAt(y);
+        };
+        this.onHandleTouchMove = (e) => {
+            const y = e.touches[0]?.clientY;
+            if (y == null)
+                return;
+            this.updateDragAt(y);
+        };
+        this.onHandleMouseDown = (e) => {
+            if (e.button !== 0)
+                return; // left click only
+            if (!this.canStartDragFromHandle())
+                return;
+            this.startDragAt(e.clientY);
+            // Attach document-level listeners to track dragging outside the handle
+            this.mouseMoveListener = (ev) => {
+                this.updateDragAt(ev.clientY);
+            };
+            this.mouseUpListener = () => {
+                this.endDrag();
+            };
+            document.addEventListener("mousemove", this.mouseMoveListener);
+            document.addEventListener("mouseup", this.mouseUpListener);
+        };
+        this.onHandleClick = (e) => {
+            // Ignore click if it was part of a drag gesture
+            if (this.isDragging || this.dragMoved || this.suppressNextClick) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.suppressNextClick = false;
+                return;
+            }
+            this.fullscreen = !this.fullscreen;
+        };
+    }
+    static { this.styles = styles; }
+    canStartDragFromHandle() {
+        const contentEl = this.shadowRoot?.querySelector(".content");
+        // Prevent dragging when content is scrolled in fullscreen mode
+        if (this.fullscreen && contentEl && contentEl.scrollTop > 0)
+            return false;
+        return true;
+    }
+    startDragAt(clientY) {
+        this.isDragging = true;
+        this.dragMoved = false;
+        this.startY = clientY;
+        this.currentY = clientY;
+        this.style.setProperty("--bottom-drawer-transition", "none");
+    }
+    updateDragAt(clientY) {
+        if (!this.isDragging)
+            return;
+        this.currentY = clientY;
+        const diff = this.currentY - this.startY;
+        if (Math.abs(diff) > 2)
+            this.dragMoved = true;
+        // In fullscreen, allow dragging down (positive diff)
+        // In non-fullscreen (peeking) state, allow dragging up (negative diff)
+        if ((this.fullscreen && diff > 0) || (!this.fullscreen && diff < 0)) {
+            this.style.setProperty("--bottom-drawer-transform-y", `${diff}px`);
+        }
+    }
+    updated(changed) {
+        if (changed.has("open") || changed.has("fullscreen")) {
+            // Only lock page scroll when drawer is fullscreen
+            const shouldLock = this.open && this.fullscreen;
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            // Compensate layout shift from scrollbar removal
+            window.document.body.style.marginInlineEnd = shouldLock
+                ? `${scrollbarWidth}px`
+                : "";
+            // Use centralized scroll lock for overflow management
+            if (shouldLock && !this._ownsScrollLock) {
+                scrollLock.lock();
+                this._ownsScrollLock = true;
+            }
+            else if (!shouldLock && this._ownsScrollLock) {
+                scrollLock.unlock();
+                this._ownsScrollLock = false;
+            }
+            // Prevent overscroll chaining on supporting browsers
+            window.document.body.style.setProperty("overscroll-behavior", shouldLock ? "contain" : "");
+            document.documentElement.style.setProperty("overscroll-behavior", shouldLock ? "contain" : "");
+        }
+    }
+    firstUpdated() {
+        this.setVisibility();
+        this.addEventListener("animationend", this.setVisibility);
+    }
+    disconnectedCallback() {
+        // Restore the page scroll if this component is removed while open and fullscreen
+        if (this._ownsScrollLock) {
+            scrollLock.unlock();
+            this._ownsScrollLock = false;
+        }
+        if (this.open && this.fullscreen) {
+            window.document.body.style.marginInlineEnd = "";
+            window.document.body.style.setProperty("overscroll-behavior", "");
+            document.documentElement.style.setProperty("overscroll-behavior", "");
+        }
+        this.removeEventListener("animationend", this.setVisibility);
+        // Ensure listeners are removed if a component is detached mid-drag
+        if (this.mouseMoveListener) {
+            document.removeEventListener("mousemove", this.mouseMoveListener);
+            this.mouseMoveListener = undefined;
+        }
+        if (this.mouseUpListener) {
+            document.removeEventListener("mouseup", this.mouseUpListener);
+            this.mouseUpListener = undefined;
+        }
+        super.disconnectedCallback();
+    }
+    render() {
+        return html `
+      <div class="content" part="content">
+        <div
+          class="handle-container"
+          part="handle"
+          @click=${this.onHandleClick}
+          @touchstart=${this.onHandleTouchStart}
+          @touchmove=${this.onHandleTouchMove}
+          @touchend=${this.endDrag}
+          @touchcancel=${this.endDrag}
+          @mousedown=${this.onHandleMouseDown}
+        >
+          <div class="handle-bar"></div>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasBottomDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasBottomDrawer.prototype, "fullscreen", void 0);
+__decorate([
+    state()
+], CorasBottomDrawer.prototype, "isDragging", void 0);
+__decorate([
+    state()
+], CorasBottomDrawer.prototype, "startY", void 0);
+__decorate([
+    state()
+], CorasBottomDrawer.prototype, "currentY", void 0);

package/dist/components/bottom-drawer/bottom-drawer.d.ts

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

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

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

package/dist/components/bottom-drawer/bottom-drawer.styles.d.ts

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

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

@@ -0,0 +1,88 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --bottom-drawer-bg-color: var(--coras-palette-white);
+    --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);
+    --bottom-drawer-handle-block-size: 1rem;
+    --bottom-drawer-transition: 0.2s ease;
+    --bottom-drawer-transform-y: 0px;
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 100vw;
+    animation: slideOut 0.3s both;
+    z-index: var(--bottom-drawer-z-index);
+  }
+
+  .handle-container {
+    padding: 0.5rem 0.75rem 0.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .handle-container:active {
+    cursor: grabbing;
+  }
+
+  .handle-bar {
+    width: 40px;
+    height: 4px;
+    background-color: var(--coras-color-neutral-200);
+    border-radius: 999px;
+  }
+
+  .content {
+    width: 100vw;
+    background-color: var(--bottom-drawer-bg-color);
+    border-top: 1px solid var(--bottom-drawer-border-color);
+    box-shadow: var(--bottom-drawer-shadow);
+    padding: 0;
+    box-sizing: border-box;
+    transform: translateY(var(--bottom-drawer-transform-y));
+    transition: transform var(--bottom-drawer-transition);
+    overflow: auto;
+    border-top-left-radius: var(--coras-radius-lg);
+    border-top-right-radius: var(--coras-radius-lg);
+  }
+
+  :host([fullscreen]) .content {
+    height: 100dvh;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :host([open]) {
+    animation: slideIn 0.3s both;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translate3d(0, 100%, 0);
+      visibility: visible;
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes slideOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+`;

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.component.d.ts

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

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.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 { classMap } from "lit/directives/class-map.js";
+import styles from "./breadcrumb-item.styles.js";
+export class CorasBreadcrumbItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.clickable = false;
+    }
+    static { this.styles = styles; }
+    render() {
+        this.setAttribute("role", "listitem");
+        return html `
+      <span
+        part="base"
+        class=${classMap({
+            "breadcrumb-item": true,
+            clickable: this.clickable,
+        })}
+        tabindex="0"
+      >
+        <slot></slot>
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], CorasBreadcrumbItem.prototype, "clickable", void 0);

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.d.ts

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

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.js

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

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.styles.d.ts

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

package/dist/components/breadcrumbs/breadcrumb-item/breadcrumb-item.styles.js

@@ -0,0 +1,48 @@
+import { css } from "lit";
+import component from "../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    font-size: var(--coras-font-size-sm);
+    font-weight: var(--coras-font-weight-normal);
+    line-height: var(--coras-font-size-xl);
+    color: var(--coras-color-text);
+
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  :host(:last-child) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :host(:not(:last-child))::after {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin: 0 0.5rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    flex-shrink: 0;
+  }
+`;

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

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

package/dist/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1,28 @@
+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 { localized, msg } from "@lit/localize";
+import { html, LitElement } from "lit";
+import styles from "./breadcrumbs.styles.js";
+let CorasBreadcrumbs = class CorasBreadcrumbs extends LitElement {
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "navigation");
+        this.setAttribute("aria-label", msg("Breadcrumbs"));
+    }
+    render() {
+        return html `
+      <div part="base" class="breadcrumbs">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CorasBreadcrumbs = __decorate([
+    localized()
+], CorasBreadcrumbs);
+export { CorasBreadcrumbs };

package/dist/components/breadcrumbs/breadcrumbs.d.ts

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

package/dist/components/breadcrumbs/breadcrumbs.js

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

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

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

package/dist/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+    max-width: 95vw;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+`;

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

@@ -0,0 +1,29 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { variants, radius, height, borderColor } from "./button.constants.js";
+import "../loading-spinner/loading-spinner.js";
+export declare class CorasButton extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    static styles: CSSResultGroup;
+    private button;
+    type: "button" | "submit" | "reset";
+    variant: (typeof variants)[number];
+    disabled: boolean;
+    radius: (typeof radius)[number];
+    height: (typeof height)[number];
+    rotateSuffix: boolean;
+    borderColor: (typeof borderColor)[number];
+    expanded: boolean;
+    shadow: boolean;
+    background: boolean;
+    clickable: boolean;
+    error: boolean;
+    loading: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    click(): void;
+    private handleHostClick;
+    private computeClasses;
+    render(): import("lit").TemplateResult<1>;
+}