@arclux/arc-ui 1.0.0

package/src/feedback/hover-card.js

@@ -0,0 +1,186 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcHoverCard extends LitElement {
+  static properties = {
+    position:   { type: String, reflect: true },
+    openDelay:  { type: Number, attribute: 'open-delay' },
+    closeDelay: { type: Number, attribute: 'close-delay' },
+    _visible:   { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .hovercard__trigger {
+        display: inline-block;
+      }
+
+      .hovercard__card {
+        position: absolute;
+        z-index: 1000;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-md);
+        box-shadow: var(--shadow-overlay);
+        min-width: 200px;
+        max-width: 360px;
+        opacity: 0;
+        transform: scale(0.96);
+        pointer-events: none;
+        transition: opacity var(--transition-base), transform var(--transition-base);
+      }
+
+      .hovercard__card--visible {
+        opacity: 1;
+        transform: scale(1);
+        pointer-events: auto;
+      }
+
+      /* Positions */
+      :host(:not([position])) .hovercard__card,
+      :host([position="bottom"]) .hovercard__card {
+        top: calc(100% + var(--space-sm));
+        left: 50%;
+        transform: translateX(-50%) scale(0.96);
+      }
+      :host(:not([position])) .hovercard__card--visible,
+      :host([position="bottom"]) .hovercard__card--visible {
+        transform: translateX(-50%) scale(1);
+      }
+
+      :host([position="top"]) .hovercard__card {
+        bottom: calc(100% + var(--space-sm));
+        left: 50%;
+        transform: translateX(-50%) scale(0.96);
+      }
+      :host([position="top"]) .hovercard__card--visible {
+        transform: translateX(-50%) scale(1);
+      }
+
+      :host([position="left"]) .hovercard__card {
+        right: calc(100% + var(--space-sm));
+        top: 50%;
+        transform: translateY(-50%) scale(0.96);
+      }
+      :host([position="left"]) .hovercard__card--visible {
+        transform: translateY(-50%) scale(1);
+      }
+
+      :host([position="right"]) .hovercard__card {
+        left: calc(100% + var(--space-sm));
+        top: 50%;
+        transform: translateY(-50%) scale(0.96);
+      }
+      :host([position="right"]) .hovercard__card--visible {
+        transform: translateY(-50%) scale(1);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.position = 'bottom';
+    this.openDelay = 400;
+    this.closeDelay = 300;
+    this._visible = false;
+    this._openTimeout = null;
+    this._closeTimeout = null;
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this._onKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this._onKeyDown);
+    clearTimeout(this._openTimeout);
+    clearTimeout(this._closeTimeout);
+  }
+
+  _onKeyDown(e) {
+    if (e.key === 'Escape' && this._visible) {
+      this._hide();
+    }
+  }
+
+  _scheduleOpen() {
+    clearTimeout(this._closeTimeout);
+    if (this._visible) return;
+    this._openTimeout = setTimeout(() => {
+      this._visible = true;
+      this.dispatchEvent(new CustomEvent('arc-open', {
+        bubbles: true,
+        composed: true,
+      }));
+    }, this.openDelay);
+  }
+
+  _scheduleClose() {
+    clearTimeout(this._openTimeout);
+    if (!this._visible) return;
+    this._closeTimeout = setTimeout(() => {
+      this._hide();
+    }, this.closeDelay);
+  }
+
+  _cancelClose() {
+    clearTimeout(this._closeTimeout);
+  }
+
+  _hide() {
+    clearTimeout(this._openTimeout);
+    clearTimeout(this._closeTimeout);
+    this._visible = false;
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    return html`
+      <div
+        class="hovercard__trigger"
+        @mouseenter=${this._scheduleOpen}
+        @mouseleave=${this._scheduleClose}
+        @focusin=${this._scheduleOpen}
+        @focusout=${this._scheduleClose}
+        part="trigger"
+      >
+        <slot></slot>
+      </div>
+      <div
+        class="hovercard__card ${this._visible ? 'hovercard__card--visible' : ''}"
+        @mouseenter=${this._cancelClose}
+        @mouseleave=${this._scheduleClose}
+        role="dialog"
+        aria-hidden=${String(!this._visible)}
+        part="card"
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-hover-card', ArcHoverCard);

package/src/feedback/index.js

@@ -0,0 +1,17 @@
+// ARC UI — Feedback tier
+// Alerts, modals, overlays, and user feedback components
+
+export { ArcAlert } from './alert.js';
+export { ArcCommandItem } from './command-item.js';
+export { ArcCommandPalette } from './command-palette.js';
+export { ArcContextMenu } from './context-menu.js';
+export { ArcDialog } from './dialog.js';
+export { ArcDropdownMenu } from './dropdown-menu.js';
+export { ArcHoverCard } from './hover-card.js';
+export { ArcModal } from './modal.js';
+export { ArcNotificationPanel } from './notification-panel.js';
+export { ArcPopover } from './popover.js';
+export { ArcProgress } from './progress.js';
+export { ArcSheet } from './sheet.js';
+export { ArcToast } from './toast.js';
+export { ArcTooltip } from './tooltip.js';

package/src/feedback/modal.js

@@ -0,0 +1,226 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcModal extends LitElement {
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    heading:  { type: String },
+    size:     { type: String, reflect: true },
+    closable: { type: Boolean },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .modal__backdrop {
+        position: fixed;
+        inset: 0;
+        background: var(--overlay-backdrop);
+        backdrop-filter: blur(4px);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-lg);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity var(--transition-base), visibility var(--transition-base);
+      }
+
+      :host([open]) .modal__backdrop {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .modal__dialog {
+        position: relative;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-overlay);
+        width: 100%;
+        max-height: calc(100vh - var(--space-2xl) * 2);
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        transform: translateY(16px);
+        transition: transform var(--transition-base);
+      }
+
+      :host([open]) .modal__dialog {
+        transform: translateY(0);
+      }
+
+      :host([size="sm"]) .modal__dialog { max-width: 400px; }
+      :host(:not([size])) .modal__dialog,
+      :host([size="md"]) .modal__dialog { max-width: 560px; }
+      :host([size="lg"]) .modal__dialog { max-width: 720px; }
+
+      .modal__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-lg) var(--space-xl);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .modal__heading {
+        font-size: var(--text-md);
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+      }
+
+      .modal__close {
+        background: none;
+        border: none;
+        color: var(--text-ghost);
+        cursor: pointer;
+        font-size: var(--text-md);
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        transition: color var(--transition-fast), background var(--transition-fast);
+        line-height: 1;
+      }
+
+      .modal__close:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .modal__close:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      .modal__body {
+        padding: var(--space-lg) var(--space-xl);
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+        flex: 1;
+      }
+
+      .modal__footer {
+        padding: var(--space-md) var(--space-xl);
+        border-top: 1px solid var(--border-subtle);
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--space-sm);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .modal__backdrop,
+        .modal__dialog { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+    this.size = 'md';
+    this.closable = true;
+    this._handleKeydown = this._handleKeydown.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._handleKeydown);
+    document.body.style.overflow = '';
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Escape' && this.closable) {
+      this._close();
+      return;
+    }
+    // Focus trap
+    if (e.key === 'Tab') {
+      const focusable = this.shadowRoot.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = this.shadowRoot.activeElement;
+
+      if (e.shiftKey && (!active || active === first)) {
+        e.preventDefault();
+        last?.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    }
+  }
+
+  _close() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', { bubbles: true, composed: true }));
+  }
+
+  _backdropClick(e) {
+    if (e.target === e.currentTarget && this.closable) {
+      this._close();
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        document.addEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = 'hidden';
+        this.dispatchEvent(new CustomEvent('arc-open', { bubbles: true, composed: true }));
+        this.updateComplete.then(() => {
+          const closeBtn = this.shadowRoot.querySelector('.modal__close');
+          closeBtn?.focus();
+        });
+      } else {
+        document.removeEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = '';
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="modal__backdrop"
+        @click=${this._backdropClick}
+        part="backdrop"
+      >
+        <div
+          class="modal__dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.heading || 'Dialog'}
+          part="dialog"
+        >
+          <div class="modal__header" part="header">
+            <slot name="header">
+              <h2 class="modal__heading">${this.heading}</h2>
+            </slot>
+            ${this.closable ? html`
+              <button class="modal__close" aria-label="Close" @click=${this._close} part="close">&times;</button>
+            ` : ''}
+          </div>
+          <div class="modal__body" part="body">
+            <slot></slot>
+          </div>
+          <div class="modal__footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-modal', ArcModal);

package/src/feedback/notification-panel.js

@@ -0,0 +1,196 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcNotificationPanel extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    position: { type: String, reflect: true },
+    maxHeight: { type: String, attribute: 'max-height' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      .trigger {
+        cursor: pointer;
+      }
+
+      /* ---- Panel shell ---- */
+      .panel {
+        position: absolute;
+        top: calc(100% + var(--space-sm));
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-overlay);
+        z-index: 1000;
+        min-width: 340px;
+        max-width: 400px;
+        display: flex;
+        flex-direction: column;
+
+        /* closed state */
+        opacity: 0;
+        transform: translateY(-6px) scale(0.97);
+        transform-origin: top right;
+        pointer-events: none;
+
+        /* closing transition — slightly faster */
+        transition:
+          opacity 120ms ease-in,
+          transform 120ms ease-in;
+      }
+
+      :host([position='top-left']) .panel {
+        transform-origin: top left;
+      }
+
+      :host([open]) .panel {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+
+        /* opening transition — cubic overshoot for a pop feel */
+        transition:
+          opacity 180ms ease-out,
+          transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+
+      :host([position='top-right']) .panel {
+        right: 0;
+      }
+
+      :host([position='top-left']) .panel {
+        left: 0;
+      }
+
+      /* ---- Header ---- */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid var(--border-subtle);
+        padding: var(--space-md) var(--space-lg);
+        font-family: var(--font-body);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+      }
+
+      /* ---- Scrollable body ---- */
+      .panel-body {
+        overflow-y: auto;
+        max-height: var(--max-height);
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-default) transparent;
+      }
+
+      .panel-body::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      .panel-body::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .panel-body::-webkit-scrollbar-thumb {
+        background: var(--border-default);
+        border-radius: var(--radius-xs);
+      }
+
+      /* ---- Footer ---- */
+      .footer {
+        border-top: 1px solid var(--border-subtle);
+        padding: var(--space-sm) var(--space-lg);
+        text-align: center;
+      }
+
+      /* ---- Reduced motion ---- */
+      @media (prefers-reduced-motion: reduce) {
+        .panel,
+        :host([open]) .panel {
+          transition: opacity 100ms ease;
+          transform: none;
+        }
+        :host([open]) .panel {
+          transform: none;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.position = 'top-right';
+    this.maxHeight = '400px';
+    this._onOutsideClick = this._onOutsideClick.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onOutsideClick, true);
+  }
+
+  updated(changedProperties) {
+    this.style.setProperty('--max-height', this.maxHeight);
+
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        // Defer so we don't catch the same click that opened the panel
+        requestAnimationFrame(() => {
+          document.addEventListener('click', this._onOutsideClick, true);
+        });
+        this.dispatchEvent(
+          new CustomEvent('arc-open', { bubbles: true, composed: true })
+        );
+      } else {
+        document.removeEventListener('click', this._onOutsideClick, true);
+        if (changedProperties.get('open') === true) {
+          this.dispatchEvent(
+            new CustomEvent('arc-close', { bubbles: true, composed: true })
+          );
+        }
+      }
+    }
+  }
+
+  _onTriggerClick() {
+    this.open = !this.open;
+  }
+
+  _onOutsideClick(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.open = false;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="trigger" part="trigger" @click="${this._onTriggerClick}">
+        <slot name="trigger"></slot>
+      </div>
+      <div class="panel" part="panel">
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="panel-body" part="body">
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-notification-panel', ArcNotificationPanel);