@coras-io/embed 0.1.0

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

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

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,264 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --dialog-z-index: var(--coras-z-index-overlay, 1000);
+    --dialog-max-width: 90vw;
+    --dialog-max-height: 90vh;
+    --dialog-border-radius: var(--coras-radius-lg);
+    --dialog-bg-color: var(--coras-palette-white);
+    --dialog-overlay-bg-color: color-mix(in srgb, black, transparent 40%);
+    --dialog-box-shadow: var(--coras-shadow-strong);
+    --dialog-padding: 1.5rem;
+    --dialog-header-padding: 1rem 1.5rem;
+    --dialog-footer-padding: 1rem 1.5rem;
+    --dialog-border-color: var(--coras-color-neutral-100);
+    --dialog-divider-color: var(--coras-color-neutral-200);
+    --dialog-close-icon-bg: var(--coras-color-neutral-50);
+    --dialog-close-icon-hover-bg: var(--coras-color-neutral-200);
+    --dialog-close-icon-fill: var(--coras-color-neutral-800);
+    --dialog-close-icon-size: 2rem;
+    --dialog-back-button-color: var(--coras-color-text-secondary);
+    --dialog-animation-duration: 200ms;
+
+    display: contents;
+  }
+
+  /* ── Overlay ── */
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: var(--dialog-overlay-bg-color);
+    z-index: var(--dialog-z-index);
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: var(--dialog-overlay-padding, 1rem);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    animation: overlayFadeIn var(--dialog-animation-duration) ease forwards;
+  }
+
+  .overlay.closing {
+    animation: overlayFadeOut var(--dialog-animation-duration) ease forwards;
+  }
+
+  /* ── Dialog panel ── */
+  .dialog {
+    position: relative;
+    background-color: var(--dialog-bg-color);
+    border: 1px solid var(--dialog-border-color);
+    border-radius: var(--dialog-border-radius);
+    box-shadow: var(--dialog-box-shadow);
+    display: grid;
+    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    width: fit-content;
+    max-width: var(--dialog-max-width);
+    max-height: var(--dialog-max-height);
+    transform: scale(0.97);
+    opacity: 0;
+    animation: dialogFadeIn var(--dialog-animation-duration)
+      cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    outline: none;
+  }
+
+  .overlay.closing .dialog {
+    animation: dialogFadeOut var(--dialog-animation-duration)
+      cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  /* ── Icon area ── */
+  .icon-area {
+    display: flex;
+    justify-content: center;
+    padding: 1.25rem 1.25rem 0;
+  }
+
+  .icon-area:not(:has(::slotted(*))) {
+    display: none;
+  }
+
+  /* ── Header ── */
+  .header {
+    display: flex;
+    align-items: center;
+    padding: var(--dialog-header-padding);
+    gap: 0.5rem;
+    min-height: 2.5rem;
+    border-bottom: 1px solid var(--dialog-divider-color);
+  }
+
+  .back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    color: var(--dialog-back-button-color);
+    flex-shrink: 0;
+    border-radius: 50%;
+    transition: background-color 150ms ease;
+  }
+
+  .back-button:hover {
+    background-color: color-mix(in srgb, black, transparent 95%);
+  }
+
+  .back-button:focus-visible {
+    outline: 2px solid var(--coras-color-primary-500);
+    outline-offset: 2px;
+  }
+
+  .header-content {
+    flex: 1;
+    min-width: 0;
+    padding-inline-end: calc(var(--dialog-close-icon-size) + 0.5rem);
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0.75rem;
+    inset-inline-end: 0.75rem;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--dialog-close-icon-bg);
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: var(--dialog-close-icon-size);
+    height: var(--dialog-close-icon-size);
+    border-radius: 50%;
+    flex-shrink: 0;
+    transition: background-color 150ms ease;
+  }
+
+  .close-button svg {
+    width: 50%;
+    height: 50%;
+    stroke: var(--dialog-close-icon-fill);
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
+
+  .close-button:hover {
+    background-color: var(--dialog-close-icon-hover-bg);
+  }
+
+  .close-button:focus-visible {
+    outline: 2px solid var(--coras-color-primary-500);
+    outline-offset: 2px;
+  }
+
+  /* ── Description ── */
+  .description {
+    padding: 0 var(--dialog-padding);
+  }
+
+  .description:empty {
+    display: none;
+  }
+
+  /* ── Content ── */
+  .content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--dialog-padding);
+  }
+
+  /* ── Footer ── */
+  .footer {
+    padding: var(--dialog-footer-padding);
+    border-top: 1px solid var(--dialog-divider-color);
+  }
+
+  .footer:empty {
+    display: none;
+  }
+
+  /* ── Expanded mode ── */
+  :host([expanded]) .dialog {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  :host([expanded]) .overlay {
+    padding: 0.5rem;
+  }
+
+  /* ── Mobile full-screen ── */
+  @media (max-width: 768px) {
+    :host([mobile-full-screen]) .overlay {
+      padding: 0;
+    }
+
+    :host([mobile-full-screen]) .dialog {
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 0;
+      margin: 0;
+    }
+  }
+
+  /* ── Short viewport ── */
+  @media (max-height: 400px) {
+    .dialog {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+  }
+
+  /* ── Animations ── */
+  @keyframes overlayFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes overlayFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes dialogFadeIn {
+    from {
+      transform: scale(0.97);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes dialogFadeOut {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(0.97);
+      opacity: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import "../icon/icon.js";
+declare const CorasDrawer_base: import("../../mixins/overlay/types.js").Constructor<import("../../mixins/overlay/types.js").OverlayMixinInterface> & typeof LitElement;
+export declare class CorasDrawer extends CorasDrawer_base {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    label: string;
+    protected updated(changed: PropertyValues): void;
+    private renderHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,89 @@
+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 { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../icon/icon.js";
+import { OverlayMixin } from "../../mixins/overlay/overlay-mixin.js";
+import styles from "./drawer.styles.js";
+let CorasDrawer = class CorasDrawer extends OverlayMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.label = "Drawer";
+        this.renderHeader = () => {
+            return html `
+      <div class="header">
+        <slot name="header" data-testid="drawer-header-slot"></slot>
+        <div
+          class="close"
+          @click="${this.handleModalClosed}"
+          data-testid="drawer-close"
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            part="header-icon"
+            icon="close"
+            label=${msg("Close")}
+            close-icon-style
+          ></coras-icon>
+        </div>
+      </div>
+    `;
+        };
+    }
+    static { this.styles = styles; }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has("open")) {
+            // to prevent scrolling when the drawer is open we hide the scrollbar,
+            // but we need to add scrollbar width margin to the body to prevent the
+            // content from jumping
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            window.document.body.style.marginInlineEnd = this.open
+                ? `${scrollbarWidth}px`
+                : "";
+            window.document.body.style.overflow = this.open ? "hidden" : "";
+        }
+    }
+    render() {
+        const classes = {
+            drawer: true,
+            open: this.open,
+            visible: this.isVisible,
+        };
+        return html `
+      <div part="base" data-testid="drawer" class=${classMap(classes)}>
+        ${this.renderOverlay()}
+        <div
+          part="panel"
+          data-testid="drawer-panel"
+          class="panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label="${this.label}"
+          aria-hidden=${this.open ? "false" : "true"}
+          tabindex=${this.open ? "0" : "-1"}
+        >
+          ${this.renderHeader()}
+          <slot part="body" class="body" data-testid="drawer-body"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasDrawer.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasDrawer.prototype, "label", void 0);
+CorasDrawer = __decorate([
+    localized()
+], CorasDrawer);
+export { CorasDrawer };

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

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

package/dist/components/drawer/drawer.js

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

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

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

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

@@ -0,0 +1,129 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: contents;
+
+    --drawer-z-index: 3;
+    --drawer-width-mobile: 100%;
+    --drawer-width: 400px;
+
+    --icon-background-color: var(--coras-color-neutral-500);
+    --drawer-close-icon-fill: var(--coras-palette-white);
+    --drawer-label-font-size: var(--coras-font-size-xl);
+  }
+
+  .drawer {
+    container-type: inline-size;
+
+    display: block;
+    visibility: hidden;
+
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    position: fixed;
+    z-index: var(--drawer-z-index);
+
+    .panel {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      z-index: 2;
+      max-width: 100%;
+      max-height: 100%;
+      background-color: var(--coras-color-surface);
+      box-shadow: 0 0 0 1px color-mix(in srgb, black, transparent 90%);
+      overflow: auto;
+      pointer-events: all;
+      animation: slideOutRight 0.4s both;
+      top: 0;
+      inset-inline-end: 0;
+      bottom: auto;
+      inset-inline-start: auto;
+      min-width: var(--drawer-width);
+      height: 100%;
+
+      &:focus {
+        outline: none;
+      }
+
+      .header {
+        display: flex;
+        flex-direction: row;
+        padding: 1rem 1.5rem;
+        justify-content: space-between;
+        align-items: center;
+
+        .close {
+          display: flex;
+          justify-content: flex-end;
+          flex-grow: 1;
+
+          coras-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--icon-background-color);
+            border-radius: 50%;
+            cursor: pointer;
+            padding: 2px;
+            margin: 1.25rem 0;
+            height: 1.25rem;
+            width: 1.25rem;
+            fill: var(--drawer-close-icon-fill);
+          }
+        }
+
+        .label {
+          font-size: var(--drawer-label-font-size);
+        }
+      }
+    }
+
+    &.open {
+      .panel {
+        animation: slideInRight 0.4s both;
+      }
+    }
+
+    &.visible {
+      visibility: visible;
+    }
+  }
+
+  @container (max-width: 600px) {
+    .drawer {
+      .panel {
+        min-width: var(--drawer-width-mobile);
+      }
+    }
+  }
+
+  @keyframes slideInRight {
+    from {
+      transform: translate3d(100%, 0, 0);
+      visibility: visible;
+    }
+
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes slideOutRight {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    to {
+      visibility: hidden;
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+`;

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

@@ -0,0 +1,25 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+export declare class CorasDropdown extends LitElement {
+    static styles: CSSResultGroup;
+    private trigger;
+    private content;
+    private arrowElement;
+    private scrollElement;
+    containingElement: HTMLElement;
+    open: boolean;
+    arrow: boolean;
+    unstyledContent: boolean;
+    autoFocus: boolean;
+    private cleanup;
+    private handleKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private applyAutoUpdate;
+    firstUpdated(): void;
+    private handleDocumentMouseDown;
+    private dispatchCloseEvent;
+    show(): void;
+    hide(): void;
+    render(): import("lit").TemplateResult<1>;
+}