agnosticui-core 2.0.0-alpha.2

package/src/components/CopyButton/vue/index.ts

@@ -0,0 +1,20 @@
+import VueCopyButton from './VueCopyButton.vue';
+
+export { VueCopyButton };
+
+/** Props for VueCopyButton */
+export interface VueCopyButtonProps {
+  text: string;
+  label?: string;
+  successLabel?: string;
+  errorLabel?: string;
+  timeout?: number;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost' | 'monochrome';
+}
+
+/** Emits for VueCopyButton */
+export interface VueCopyButtonEmits {
+  (e: 'copy', event: CustomEvent<{ text: string }>): void;
+  (e: 'copy-error', event: CustomEvent<{ error: Error }>): void;
+}

package/src/components/Dialog/core/Dialog.ts

@@ -0,0 +1,13 @@
+import { AgnosticDialog } from './_dialog.js';
+
+if (!customElements.get('ag-dialog')) {
+  customElements.define('ag-dialog', AgnosticDialog);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-dialog': AgnosticDialog;
+  }
+}
+
+export * from './_dialog.js';

package/src/components/Dialog/core/_dialog.ts

@@ -0,0 +1,448 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createFocusTrap, type FocusTrap } from 'focus-trap';
+import { isBackdropClick } from '../../../utils/handleBackdropClick';
+import { isElementInContainer } from '../../../utils/isElementInContainer';
+import type { EdgePosition } from '../../../utils/positioning';
+import '../../shared/CloseButton/CloseButton';
+
+// Event types
+export type DialogOpenEvent = CustomEvent<void>;
+export type DialogCloseEvent = CustomEvent<void>;
+export type DialogCancelEvent = CustomEvent<void>;
+
+// Props interface following INTERFACE_STANDARDS.md
+export interface DialogProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+  drawerPosition?: EdgePosition | undefined;
+  // Event handlers
+  onDialogOpen?: (event: DialogOpenEvent) => void;
+  onDialogClose?: (event: DialogCloseEvent) => void;
+  onDialogCancel?: (event: DialogCancelEvent) => void;
+}
+
+export class AgnosticDialog extends LitElement implements DialogProps {
+  @property({ type: Boolean, reflect: true })
+  declare open: boolean;
+
+  @property({ type: String })
+  declare heading: string;
+
+  @property({ type: String })
+  declare description: string;
+
+  @property({ type: Boolean })
+  declare noCloseOnEscape: boolean;
+
+  @property({ type: Boolean })
+  declare noCloseOnBackdrop: boolean;
+
+  @property({ type: Boolean })
+  declare showCloseButton: boolean;
+
+  @property({ type: String, reflect: true, attribute: 'drawer-position' })
+  declare drawerPosition: EdgePosition | undefined;
+
+  @property({ attribute: false })
+  declare onDialogOpen?: (event: DialogOpenEvent) => void;
+
+  @property({ attribute: false })
+  declare onDialogClose?: (event: DialogCloseEvent) => void;
+
+  @property({ attribute: false })
+  declare onDialogCancel?: (event: DialogCancelEvent) => void;
+
+  private _focusTrap: FocusTrap | null = null;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+    this.description = '';
+    this.noCloseOnEscape = false;
+    this.noCloseOnBackdrop = false;
+    this.showCloseButton = false;
+    this.drawerPosition = undefined;
+  }
+
+  private _handleKeydown = (event: KeyboardEvent) => {
+    // Note: This handler is only active when dialog is open (registered in willUpdate)
+
+    if (event.key === 'Escape' && !this.noCloseOnEscape) {
+      event.preventDefault();
+      const cancelEvent = new CustomEvent<void>('dialog-cancel', { bubbles: true, composed: true });
+      this.dispatchEvent(cancelEvent);
+      this.onDialogCancel?.(cancelEvent);
+      this.open = false;
+      return;
+    }
+
+    // Prevent arrow keys from bubbling up to other components (like tabs)
+    // when dialog is open to maintain proper focus trap
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+      const currentElement = document.activeElement as HTMLElement;
+      if (currentElement && isElementInContainer(currentElement, this.shadowRoot, this)) {
+        // Allow arrow key events for radio buttons
+        if (currentElement.tagName === 'INPUT' && (currentElement as HTMLInputElement).type === 'radio') {
+          return;
+        }
+        event.stopPropagation();
+      }
+    }
+  };
+
+  private _handleBackdropClick = (event: MouseEvent) => {
+    if (this.noCloseOnBackdrop || !this.open) return;
+
+    if (isBackdropClick(event, this.shadowRoot, '.dialog-container')) {
+      const cancelEvent = new CustomEvent<void>('dialog-cancel', { bubbles: true, composed: true });
+      this.dispatchEvent(cancelEvent);
+      this.onDialogCancel?.(cancelEvent);
+      this.open = false;
+    }
+  };
+
+  private _handleCloseButtonClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    const closeEvent = new CustomEvent<void>('dialog-close', { bubbles: true, composed: true });
+    this.dispatchEvent(closeEvent);
+    this.onDialogClose?.(closeEvent);
+    this.open = false;
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Remove keydown listener if component is removed while open
+    if (this.open) {
+      document.removeEventListener('keydown', this._handleKeydown);
+      this._restoreBackgroundScroll();
+    }
+    // Deactivate focus trap if active
+    if (this._focusTrap) {
+      this._focusTrap.deactivate();
+      this._focusTrap = null;
+    }
+  }
+
+  willUpdate(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('open')) {
+      const previousOpen = changedProperties.get('open');
+      if (this.open && !previousOpen) {
+        // Opening: Add keydown listener for this dialog only
+        document.addEventListener('keydown', this._handleKeydown);
+        this._preventBackgroundScroll();
+        const openEvent = new CustomEvent<void>('dialog-open', { bubbles: true, composed: true });
+        this.dispatchEvent(openEvent);
+        this.onDialogOpen?.(openEvent);
+      } else if (!this.open && previousOpen) {
+        // Closing: Remove keydown listener for this dialog
+        document.removeEventListener('keydown', this._handleKeydown);
+        const closeEvent = new CustomEvent<void>('dialog-close', { bubbles: true, composed: true });
+        this.dispatchEvent(closeEvent);
+        this.onDialogClose?.(closeEvent);
+        this._restoreBackgroundScroll();
+        // Deactivate focus trap when closing
+        if (this._focusTrap) {
+          this._focusTrap.deactivate();
+          this._focusTrap = null;
+        }
+      }
+    }
+  }
+
+  private _preventBackgroundScroll() {
+    // Count of open dialogs for proper multiple dialog handling
+    const currentCount = parseInt(document.body.getAttribute('data-dialog-count') || '0', 10);
+
+    if (currentCount === 0) {
+      // First dialog - store original overflow and lock scroll
+      document.body.setAttribute('data-dialog-original-overflow',
+        document.body.style.overflow || '');
+      document.body.style.overflow = 'hidden';
+      document.body.setAttribute('data-dialog-scroll-locked', '');
+    }
+
+    document.body.setAttribute('data-dialog-count', (currentCount + 1).toString());
+  }
+
+  private _restoreBackgroundScroll() {
+    const currentCount = parseInt(document.body.getAttribute('data-dialog-count') || '0', 10);
+    const newCount = Math.max(0, currentCount - 1);
+
+    document.body.setAttribute('data-dialog-count', newCount.toString());
+
+    if (newCount === 0) {
+      // Last dialog closing - restore original overflow
+      const originalOverflow = document.body.getAttribute('data-dialog-original-overflow');
+      document.body.style.overflow = originalOverflow || '';
+      document.body.removeAttribute('data-dialog-original-overflow');
+      document.body.removeAttribute('data-dialog-scroll-locked');
+      document.body.removeAttribute('data-dialog-count');
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('open') && this.open) {
+      const dialogContainer = this.shadowRoot?.querySelector('.dialog-container') as HTMLElement;
+
+      const activateFocusTrap = () => {
+        if (!dialogContainer) return;
+
+        // Get the light DOM container for slotted content (important for Drawer)
+        const lightDomContainer = (this.getRootNode() as ShadowRoot).host as HTMLElement || this;
+
+        // Create focus trap that works with both Shadow DOM and Light DOM
+        this._focusTrap = createFocusTrap([dialogContainer, lightDomContainer], {
+          escapeDeactivates: false, // We handle Escape ourselves
+          clickOutsideDeactivates: false, // We handle backdrop clicks ourselves
+          returnFocusOnDeactivate: true, // Auto-restore focus when deactivated
+          allowOutsideClick: true, // Allow clicks outside (we handle backdrop)
+          fallbackFocus: dialogContainer as HTMLElement, // Focus container if no focusable elements
+          // Enable Shadow DOM support
+          tabbableOptions: {
+            getShadowRoot: true
+          }
+        });
+
+        // Activate the focus trap
+        this._focusTrap.activate();
+      };
+
+      if (dialogContainer) {
+        const style = getComputedStyle(dialogContainer);
+        const transitionDuration = parseFloat(style.transitionDuration);
+        const transitionProperty = style.transitionProperty;
+
+        // Only wait for transition if it will actually occur
+        if (transitionDuration > 0 && transitionProperty !== 'none') {
+          dialogContainer.addEventListener('transitionend', activateFocusTrap, { once: true });
+        } else {
+          // No transition, activate after a microtask to allow DOM to settle
+          setTimeout(activateFocusTrap, 0);
+        }
+      } else {
+        // Fallback if container not found
+        setTimeout(activateFocusTrap, 0);
+      }
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      visibility: hidden;
+      position: fixed;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      z-index: var(--ag-z-index-modal);
+    }
+
+    :host([open]) {
+      visibility: visible;
+    }
+
+    .dialog-backdrop {
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgb(50 50 50 / 60%);
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast) ease;
+    }
+
+    :host([open]) .dialog-backdrop {
+      opacity: 1;
+    }
+
+    .dialog-container {
+      overflow-y: auto;
+      max-inline-size: 90vw;
+      max-block-size: 90vh;
+      position: relative;
+      background: var(--ag-background-primary);
+      border: 1px solid var(--ag-border);
+      border-radius: var(--ag-radius-lg);
+      padding: var(--ag-space-6);
+      margin: var(--ag-space-4);
+      opacity: 0;
+      transform: translateY(10%);
+      transition: opacity var(--ag-motion-fast) ease, transform var(--ag-motion-slow) ease var(--ag-motion-fast);
+    }
+
+    :host([open]) .dialog-container {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* Drawer positioning styles */
+    :host([drawer-position]) {
+      /* Host sizing for edge positions */
+    }
+
+    :host([drawer-position="start"]),
+    :host([drawer-position="end"]) {
+      height: 100%;
+    }
+
+    :host([drawer-position="top"]),
+    :host([drawer-position="bottom"]) {
+      width: 100%;
+    }
+
+    /* Base drawer container setup */
+    :host([drawer-position]) .dialog-container {
+      box-sizing: border-box;
+      position: fixed;
+      margin: initial;
+      border-radius: 0;
+    }
+
+    /* Vertical edge positions (start/end) sizing */
+    :host([drawer-position="start"]) .dialog-container,
+    :host([drawer-position="end"]) .dialog-container {
+      height: 100%;
+      width: var(--ag-drawer-width);
+      max-block-size: initial;
+    }
+
+    /* Horizontal edge positions (top/bottom) sizing */
+    :host([drawer-position="top"]) .dialog-container,
+    :host([drawer-position="bottom"]) .dialog-container {
+      height: var(--ag-sheet-height);
+      width: 100%;
+      max-inline-size: initial;
+    }
+
+    /* Top position - closed state */
+    :host([drawer-position="top"]) .dialog-container {
+      top: 0;
+      transform: translateY(-100%);
+    }
+
+    /* Bottom position - closed state */
+    :host([drawer-position="bottom"]) .dialog-container {
+      bottom: 0;
+      transform: translateY(100%);
+    }
+
+    /* Start position - closed state */
+    :host([drawer-position="start"]) .dialog-container {
+      inset-inline-start: 0;
+      transform: translateX(-100%);
+    }
+
+    /* End position - closed state */
+    :host([drawer-position="end"]) .dialog-container {
+      inset-inline-end: 0;
+      transform: translateX(100%);
+    }
+
+    /* RTL Support - flip transform directions for start/end drawers */
+    :host-context([dir="rtl"]):host([drawer-position="start"]) .dialog-container {
+      transform: translateX(100%);
+    }
+
+    :host-context([dir="rtl"]):host([drawer-position="end"]) .dialog-container {
+      transform: translateX(-100%);
+    }
+
+    /* Open state - remove transforms to slide into view */
+    :host([drawer-position="top"][open]) .dialog-container,
+    :host([drawer-position="bottom"][open]) .dialog-container,
+    :host([drawer-position="start"][open]) .dialog-container,
+    :host([drawer-position="end"][open]) .dialog-container {
+      transform: none;
+    }
+
+    .dialog-header {
+      margin-block-end: var(--ag-space-4);
+    }
+
+    .dialog-header h2 {
+      margin: 0;
+      font-size: var(--ag-font-size-lg);
+      font-weight: var(--ag-font-weight-semibold);
+      color: var(--ag-text-primary);
+    }
+
+    .dialog-content {
+      margin-block-end: var(--ag-space-4);
+    }
+
+    .dialog-content:last-child {
+      margin-block-end: 0;
+    }
+
+    .dialog-content p {
+      margin: 0 0 var(--ag-space-4) 0;
+      color: var(--ag-text-secondary);
+    }
+
+    .dialog-footer {
+      margin-block-start: var(--ag-space-4);
+    }
+
+    .dialog-footer:empty {
+      margin-block-start: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .dialog-backdrop,
+      .dialog-container {
+        transition: none;
+      }
+    }
+  `;
+
+  render() {
+    return html`
+      <div
+        class="dialog-backdrop"
+        part="ag-dialog-backdrop"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${this.heading ? 'dialog-heading' : nothing}
+        aria-label=${!this.heading ? 'Dialog' : nothing}
+        aria-describedby=${this.description ? 'dialog-description' : nothing}
+        @click=${this._handleBackdropClick}
+      >
+        <div class="dialog-container" part="ag-dialog-container">
+          <div class="dialog-header" part="ag-dialog-header">
+            <slot name="header">
+              ${this.heading ? html`<h2 id="dialog-heading" part="ag-dialog-heading">${this.heading}</h2>` : ''}
+            </slot>
+            ${this.showCloseButton ? html`
+              <ag-close-button
+                position="top-end"
+                label="Close dialog"
+                @close-button-click=${this._handleCloseButtonClick}
+              ></ag-close-button>
+            ` : ''}
+          </div>
+          <div class="dialog-content" part="ag-dialog-content">
+            ${this.description ? html`<p id="dialog-description">${this.description}</p>` : ''}
+            <slot></slot>
+          </div>
+          <div class="dialog-footer" part="ag-dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/Dialog/react/ReactDialog.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import {
+  AgnosticDialog,
+  type DialogProps,
+  type DialogOpenEvent,
+  type DialogCloseEvent,
+  type DialogCancelEvent
+} from '../core/Dialog';
+
+/**
+ * React-specific props for Dialog
+ */
+export interface ReactDialogProps extends DialogProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Helper component for dialog header slot
+ */
+export interface DialogHeaderProps {
+  children?: React.ReactNode;
+}
+
+/**
+ * Helper component for dialog footer slot
+ */
+export interface DialogFooterProps {
+  children?: React.ReactNode;
+}
+
+// Create Dialog component with @lit/react
+export const ReactDialog = createComponent({
+  tagName: 'ag-dialog',
+  elementClass: AgnosticDialog,
+  react: React,
+  events: {
+    onDialogOpen: 'dialog-open' as EventName<DialogOpenEvent>,
+    onDialogClose: 'dialog-close' as EventName<DialogCloseEvent>,
+    onDialogCancel: 'dialog-cancel' as EventName<DialogCancelEvent>,
+  },
+});
+
+// Helper components for slots (simple React components)
+export const DialogHeader: React.FC<DialogHeaderProps> = ({ children }) => {
+  return <div slot="header">{children}</div>;
+};
+
+export const DialogFooter: React.FC<DialogFooterProps> = ({ children }) => {
+  return <div slot="footer">{children}</div>;
+};
+
+// Re-export event types
+export type { DialogOpenEvent, DialogCloseEvent, DialogCancelEvent } from '../core/Dialog';

package/src/components/Dialog/react/index.ts

@@ -0,0 +1,5 @@
+export { ReactDialog } from './ReactDialog';
+export type { ReactDialogProps } from './ReactDialog';
+
+// Re-export event types from core for convenience
+export type { DialogOpenEvent, DialogCloseEvent, DialogCancelEvent } from '../core/Dialog';

package/src/components/Dialog/vue/VueDialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <ag-dialog
+    ref="dialogRef"
+    .open="open"
+    .noCloseOnEscape="noCloseOnEscape"
+    .noCloseOnBackdrop="noCloseOnBackdrop"
+    .showCloseButton="showCloseButton"
+    :heading="heading"
+    :description="description"
+    @dialog-open="handleDialogOpen"
+    @dialog-close="handleDialogClose"
+    @dialog-cancel="handleDialogCancel"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import "../core/Dialog";
+
+export interface VueDialogProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+}
+
+const props = withDefaults(defineProps<VueDialogProps>(), {
+  open: false,
+  noCloseOnEscape: false,
+  noCloseOnBackdrop: false,
+  showCloseButton: false,
+});
+
+const emit = defineEmits<{
+  "dialog-open": [event: Event];
+  "dialog-close": [event: Event];
+  "dialog-cancel": [event: Event];
+  "update:open": [value: boolean];
+}>();
+
+const dialogRef = ref<HTMLElement>();
+
+const handleDialogOpen = (event: Event) => {
+  emit("dialog-open", event);
+  emit("update:open", true);
+};
+
+const handleDialogClose = (event: Event) => {
+  emit("dialog-close", event);
+  emit("update:open", false);
+};
+
+const handleDialogCancel = (event: Event) => {
+  emit("dialog-cancel", event);
+  emit("update:open", false);
+};
+</script>

package/src/components/Dialog/vue/VueDialogFooter.vue

@@ -0,0 +1,9 @@
+<template>
+  <div slot="footer">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Simple slot component for dialog footer content
+</script>

package/src/components/Dialog/vue/VueDialogHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <div slot="header">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Simple slot component for dialog header content
+</script>

package/src/components/Dialog/vue/index.ts

@@ -0,0 +1,35 @@
+export { default } from './VueDialog.vue';
+export { default as VueDialog } from './VueDialog.vue';
+export { default as VueDialogHeader } from './VueDialogHeader.vue';
+export { default as VueDialogFooter } from './VueDialogFooter.vue';
+
+// Define props interface
+export interface VueDialogProps {
+  open?: boolean;
+  heading?: string;
+  description?: string;
+  noCloseOnEscape?: boolean;
+  noCloseOnBackdrop?: boolean;
+  showCloseButton?: boolean;
+}
+
+/**
+ * Extended props for VueDialog, including event handlers for dialog events.
+ */
+export interface VueDialogExtendedProps extends VueDialogProps {
+  /** Emitted when the dialog is opened */
+  onDialogOpen?: () => void;
+  /** Emitted when the dialog is closed */
+  onDialogClose?: () => void;
+  /** Emitted when the dialog is canceled */
+  onDialogCancel?: () => void;
+}
+
+// Define types separately since Vue component types are handled differently
+export interface VueDialogHeaderProps {
+  // No specific props for header
+}
+
+export interface VueDialogFooterProps {
+  // No specific props for footer
+}

package/src/components/Divider/Divider.ts

@@ -0,0 +1,2 @@
+export { AgDivider } from './core/_Divider';
+export type { DividerProps, DividerJustify, DividerSize, DividerVariant } from './core/_Divider';

package/src/components/Divider/core/Divider.ts

@@ -0,0 +1,13 @@
+import { AgDivider } from './_Divider.js';
+
+if (!customElements.get('ag-divider')) {
+  customElements.define('ag-divider', AgDivider);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-divider': AgDivider;
+  }
+}
+
+export * from './_Divider.js';