@easemate/web-kit 0.1.0

package/build/elements/origin/index.js

@@ -0,0 +1,165 @@
+import "../dropdown/index.js";
+import { html } from 'lit-html';
+import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+import { Component } from '~/decorators/Component';
+import { Listen } from '~/decorators/Listen';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+@Component({
+    tag: 'ease-origin',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="container"] {
+      flex: 1;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 30px auto;
+      grid-gap: 8px;
+    }
+
+    [part="preview"] {
+      width: 30px;
+      height: 30px;
+      border-radius: var(--radii-md);
+      background-color: var(--color-gray-875);
+      cursor: pointer;
+      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
+      border-radius: var(--radii-md);
+      position: relative;
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        width: 3px;
+        height: 3px;
+        background-color: var(--color-blue-100);
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -1.5px;
+        margin-left: -1.5px;
+      }
+
+      &::before {
+        background-color: var(--color-gray-700);
+        box-shadow: -6.5px -6.5px 0 0 var(--color-gray-700), 0 -6.5px 0 0 var(--color-gray-700), 6.5px -6.5px 0 0 var(--color-gray-700), -6.5px 0 0 0 var(--color-gray-700), 6.5px 0 0 0 var(--color-gray-700), -6.5px 6.5px 0 0 var(--color-gray-700), 0 6.5px 0 0 var(--color-gray-700), 6.5px 6.5px 0 0 var(--color-gray-700);
+      }
+
+      &::after {
+        translate: var(--ease-origin-translate-x, 0) var(--ease-origin-translate-y, 0);
+        scale: 1.25;
+        transition: translate 0.3s cubic-bezier(0.25, 0, 0.5, 1);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-850);
+      }
+
+      &:focus-within {
+        background-color: var(--color-gray-825);
+      }
+
+      &[data-value="top-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: -6.5px;
+      }
+
+      &[data-value="top-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: -6.5px;  
+      }
+      
+      &[data-value="top-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: -6.5px;
+      }
+
+      &[data-value="center-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: 0
+      }
+
+      &[data-value="center-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: 0;
+      }
+
+      &[data-value="center-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: 0;
+      }
+      
+      &[data-value="bottom-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: 6.5px;
+      }
+      
+      &[data-value="bottom-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: 6.5px;
+      }
+      
+      &[data-value="bottom-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: 6.5px;
+      }
+    }
+
+    ease-dropdown[part="dropdown"] {
+      --ease-dropdown-max-height: 180px;
+
+      width: 100%;
+    }
+  `,
+    template() {
+        return html `
+      <div part="container">
+        <div part="preview" data-value=${this.value ?? 'center-center'}></div>
+        
+        <ease-dropdown part="dropdown" placeholder="Select" id="origin-dropdown" .value=${this.value ?? 'center-center'} fullWidth name=${this.name} @value-change=${this.handleValueChange}>
+          <button slot="content" value="top-left">Top Left</button>
+          <button slot="content" value="top-center">Top Center</button>
+          <button slot="content" value="top-right">Top Right</button>
+          <hr slot="content" />
+          <button slot="content" value="center-left">Center Left</button>
+          <button slot="content" value="center-center">Center Center</button>
+          <button slot="content" value="center-right">Center Right</button>
+          <hr slot="content" />
+          <button slot="content" value="bottom-left">Bottom Left</button>
+          <button slot="content" value="bottom-center">Bottom Center</button>
+          <button slot="content" value="bottom-right">Bottom Right</button>
+        </ease-dropdown>
+      </div>
+    `;
+    }
+})
+export class Origin extends HTMLElement {
+    @Prop({ reflect: true, defaultValue: 'center-center' })
+    accessor value = 'center-center';
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('ease-dropdown')
+    accessor control;
+    @Prop({ reflect: true, defaultValue: '' })
+    accessor name = '';
+    afterRender() {
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    @Listen('change', { selector: 'ease-dropdown' })
+    handleChange(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = String(target.value ?? 'center-center');
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+    }
+    handleValueChange = (event) => {
+        this.value = String(this.control?.value ?? 'center-center');
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+    };
+}

package/build/elements/popover/index.cjs

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+const nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
+@(0, Component_1.Component)({
+    tag: 'ease-popover',
+    autoSlot: false,
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: contents;
+      --ease-popover-offset: 8px;
+      --ease-popover-anchor-name: --ease-popover-anchor;
+      --ease-popover-transform-origin: center center;
+      --ease-popover-duration: 200ms;
+      --ease-popover-content-min-width: auto;
+      --ease-popover-content-max-width: none;
+      --ease-popover-content-width: max-content;
+    }
+
+    ::slotted([slot="trigger"]) {
+      anchor-name: var(--ease-popover-anchor-name);
+    }
+
+    [part="content"] {
+      position-anchor: var(--ease-popover-anchor-name);
+      position: fixed;
+      margin: 0;
+      transform-origin: var(--ease-popover-transform-origin);
+      width: var(--ease-popover-content-width);
+      min-width: var(--ease-popover-content-min-width);
+      max-width: var(--ease-popover-content-max-width);
+      box-sizing: border-box;
+      overscroll-behavior: contain;
+      z-index: 100;
+      display: none;
+    }
+
+    :host([open]) [part="content"] {
+      display: block;
+    }
+
+    :host([placement="top-start"]) [part="content"] {
+      position-area: top right;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="top-center"]) [part="content"] {
+      position-area: top center;
+      top: anchor(top);
+      left: anchor(center);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="top-end"]) [part="content"] {
+      position-area: top right;
+      top: anchor(bottom);
+      right: anchor(right);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="bottom-start"]) [part="content"] {
+      position-area: bottom right;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="bottom-center"]) [part="content"] {
+      position-area: bottom center;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="bottom-end"]) [part="content"] {
+      position-area: bottom left;
+      top: anchor(bottom);
+      right: anchor(right);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="left-start"]) [part="content"] {
+      position-area: left bottom;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="left-center"]) [part="content"] {
+      position-area: left center;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="left-end"]) [part="content"] {
+      position-area: left top;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="right-start"]) [part="content"] {
+      position-area: right end;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+
+    :host([placement="right-center"]) [part="content"] {
+      position-area: right center;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+
+    :host([placement="right-end"]) [part="content"] {
+      position-area: right start;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+  `
+})
+class Popover extends HTMLElement {
+    #anchorName = nextAnchorName();
+    #contentElement = null;
+    #initialized = false;
+    get contentElement() {
+        return this.#contentElement;
+    }
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        defaultValue: 'bottom-start',
+        onChange() {
+            this.handlePlacementChange();
+        }
+    })
+    accessor placement;
+    @(0, Prop_1.Prop)({
+        type: Number,
+        reflect: true,
+        defaultValue: 8,
+        onChange() {
+            this.handleOffsetChange();
+        }
+    })
+    accessor offset = 8;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor open = false;
+    connectedCallback() {
+        this.#syncAnchorName();
+        this.#syncOffset();
+    }
+    disconnectedCallback() {
+        this.#contentElement = null;
+        this.#initialized = false;
+    }
+    render() {
+        return (0, lit_html_1.html) `
+      <slot slot="trigger" name="trigger"></slot>
+      <div
+        part="content"
+        data-popover-content
+        role="region"
+        data-placement=${this.placement}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+    handlePlacementChange() {
+        if (!this.#initialized) {
+            this.requestRender();
+            return;
+        }
+        this.#syncPlacement();
+    }
+    handleOffsetChange() {
+        if (!this.#initialized) {
+            this.requestRender();
+            return;
+        }
+        this.#syncOffset();
+    }
+    #syncPlacement() {
+        this.dataset.placement = this.placement;
+        if (this.#contentElement) {
+            this.#contentElement.dataset.placement = this.placement;
+        }
+    }
+    #syncOffset() {
+        const offset = Number.isFinite(this.offset) ? this.offset : 0;
+        this.style.setProperty('--ease-popover-offset', `${offset}px`);
+    }
+    #syncAnchorName() {
+        this.style.setProperty('--ease-popover-anchor-name', this.#anchorName);
+    }
+}
+exports.Popover = Popover;
+exports.default = {
+    Popover
+};

package/build/elements/popover/index.d.cts

@@ -0,0 +1,19 @@
+import { type TemplateResult } from 'lit-html';
+export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
+export declare class Popover extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    get contentElement(): HTMLElement | null;
+    accessor placement: Placement;
+    accessor offset: number;
+    accessor open: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    handlePlacementChange(): void;
+    handleOffsetChange(): void;
+}
+declare const _default: {
+    Popover: typeof Popover;
+};
+export default _default;

package/build/elements/popover/index.d.ts

@@ -0,0 +1,19 @@
+import { type TemplateResult } from 'lit-html';
+export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
+export declare class Popover extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    get contentElement(): HTMLElement | null;
+    accessor placement: Placement;
+    accessor offset: number;
+    accessor open: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    handlePlacementChange(): void;
+    handleOffsetChange(): void;
+}
+declare const _default: {
+    Popover: typeof Popover;
+};
+export default _default;

package/build/elements/popover/index.js

@@ -0,0 +1,205 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+const nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
+@Component({
+    tag: 'ease-popover',
+    autoSlot: false,
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: contents;
+      --ease-popover-offset: 8px;
+      --ease-popover-anchor-name: --ease-popover-anchor;
+      --ease-popover-transform-origin: center center;
+      --ease-popover-duration: 200ms;
+      --ease-popover-content-min-width: auto;
+      --ease-popover-content-max-width: none;
+      --ease-popover-content-width: max-content;
+    }
+
+    ::slotted([slot="trigger"]) {
+      anchor-name: var(--ease-popover-anchor-name);
+    }
+
+    [part="content"] {
+      position-anchor: var(--ease-popover-anchor-name);
+      position: fixed;
+      margin: 0;
+      transform-origin: var(--ease-popover-transform-origin);
+      width: var(--ease-popover-content-width);
+      min-width: var(--ease-popover-content-min-width);
+      max-width: var(--ease-popover-content-max-width);
+      box-sizing: border-box;
+      overscroll-behavior: contain;
+      z-index: 100;
+      display: none;
+    }
+
+    :host([open]) [part="content"] {
+      display: block;
+    }
+
+    :host([placement="top-start"]) [part="content"] {
+      position-area: top right;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="top-center"]) [part="content"] {
+      position-area: top center;
+      top: anchor(top);
+      left: anchor(center);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="top-end"]) [part="content"] {
+      position-area: top right;
+      top: anchor(bottom);
+      right: anchor(right);
+      translate: 0 calc(var(--ease-popover-offset) * -1);
+    }
+
+    :host([placement="bottom-start"]) [part="content"] {
+      position-area: bottom right;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="bottom-center"]) [part="content"] {
+      position-area: bottom center;
+      top: anchor(bottom);
+      left: anchor(left);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="bottom-end"]) [part="content"] {
+      position-area: bottom left;
+      top: anchor(bottom);
+      right: anchor(right);
+      translate: 0 var(--ease-popover-offset);
+    }
+
+    :host([placement="left-start"]) [part="content"] {
+      position-area: left bottom;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="left-center"]) [part="content"] {
+      position-area: left center;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="left-end"]) [part="content"] {
+      position-area: left top;
+      top: anchor(top);
+      left: anchor(left);
+      translate: calc(var(--ease-popover-offset) * -1) 0;
+    }
+
+    :host([placement="right-start"]) [part="content"] {
+      position-area: right end;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+
+    :host([placement="right-center"]) [part="content"] {
+      position-area: right center;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+
+    :host([placement="right-end"]) [part="content"] {
+      position-area: right start;
+      top: anchor(top);
+      left: anchor(right);
+      translate: var(--ease-popover-offset) 0;
+    }
+  `
+})
+export class Popover extends HTMLElement {
+    #anchorName = nextAnchorName();
+    #contentElement = null;
+    #initialized = false;
+    get contentElement() {
+        return this.#contentElement;
+    }
+    @Prop({
+        reflect: true,
+        defaultValue: 'bottom-start',
+        onChange() {
+            this.handlePlacementChange();
+        }
+    })
+    accessor placement;
+    @Prop({
+        type: Number,
+        reflect: true,
+        defaultValue: 8,
+        onChange() {
+            this.handleOffsetChange();
+        }
+    })
+    accessor offset = 8;
+    @Prop({ type: Boolean, reflect: true })
+    accessor open = false;
+    connectedCallback() {
+        this.#syncAnchorName();
+        this.#syncOffset();
+    }
+    disconnectedCallback() {
+        this.#contentElement = null;
+        this.#initialized = false;
+    }
+    render() {
+        return html `
+      <slot slot="trigger" name="trigger"></slot>
+      <div
+        part="content"
+        data-popover-content
+        role="region"
+        data-placement=${this.placement}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+    handlePlacementChange() {
+        if (!this.#initialized) {
+            this.requestRender();
+            return;
+        }
+        this.#syncPlacement();
+    }
+    handleOffsetChange() {
+        if (!this.#initialized) {
+            this.requestRender();
+            return;
+        }
+        this.#syncOffset();
+    }
+    #syncPlacement() {
+        this.dataset.placement = this.placement;
+        if (this.#contentElement) {
+            this.#contentElement.dataset.placement = this.placement;
+        }
+    }
+    #syncOffset() {
+        const offset = Number.isFinite(this.offset) ? this.offset : 0;
+        this.style.setProperty('--ease-popover-offset', `${offset}px`);
+    }
+    #syncAnchorName() {
+        this.style.setProperty('--ease-popover-anchor-name', this.#anchorName);
+    }
+}
+export default {
+    Popover
+};