agnosticui-core 2.0.0-alpha.2

package/src/components/Combobox/react/ReactCombobox.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { AgCombobox, type ComboboxProps, type ComboboxOption, type ComboboxChangeEvent, type ComboboxSelectEvent, type ComboboxSearchEvent, type ComboboxOpenEvent, type ComboboxCloseEvent } from '../core/Combobox';
+
+/**
+ * React-specific props for Combobox
+ *
+ * Following AgnosticUI v2 event conventions:
+ * - Custom events are mapped via @lit/react's events object
+ * - Native events (focus, blur) work automatically
+ */
+export interface ReactComboboxProps extends ComboboxProps {
+  children?: React.ReactNode;
+  className?: string;
+  // Custom event handlers
+  onChange?: (event: ComboboxChangeEvent) => void;
+  onSelect?: (event: ComboboxSelectEvent) => void;
+  onSearch?: (event: ComboboxSearchEvent) => void;
+  onOpen?: (event: ComboboxOpenEvent) => void;
+  onClose?: (event: ComboboxCloseEvent) => void;
+  // Native events work automatically
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+}
+
+// Create Combobox component with @lit/react
+export const ReactCombobox = createComponent({
+  tagName: 'ag-combobox',
+  elementClass: AgCombobox,
+  react: React,
+  events: {
+    // Map custom events to React event handlers
+    onChange: 'change',
+    onSelect: 'select',
+    onSearch: 'search',
+    onOpen: 'open',
+    onClose: 'close',
+    // Native events (focus, blur) work automatically, don't need mapping
+  },
+});
+
+// Export types for convenience
+export type { ComboboxOption, ComboboxChangeEvent, ComboboxSelectEvent, ComboboxSearchEvent, ComboboxOpenEvent, ComboboxCloseEvent };

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

@@ -0,0 +1,2 @@
+export { ReactCombobox } from './ReactCombobox';
+export type { ReactComboboxProps, ComboboxOption, ComboboxChangeEvent, ComboboxSelectEvent, ComboboxSearchEvent, ComboboxOpenEvent, ComboboxCloseEvent } from './ReactCombobox';

package/src/components/Combobox/vue/VueCombobox.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { ComboboxProps, ComboboxOption } from "../core/Combobox";
+import "../core/Combobox"; // Registers the ag-combobox web component
+
+/**
+ * Vue Combobox Props
+ * Following AgnosticUI v2 event conventions:
+ * - Omit callback props (Vue uses emits)
+ * - Support v-model:value via update:value emit
+ */
+export interface VueComboboxProps
+  extends Omit<
+    ComboboxProps,
+    | "onChange"
+    | "onSelect"
+    | "onSearch"
+    | "onOpen"
+    | "onClose"
+    | "onFocus"
+    | "onBlur"
+  > {}
+
+// Define props with defaults
+const props = withDefaults(defineProps<VueComboboxProps>(), {
+  options: () => [],
+  value: undefined,
+  defaultValue: undefined,
+  placeholder: "",
+  label: "",
+  labelPosition: "top",
+  labelHidden: false,
+  noLabel: false,
+  ariaLabel: null,
+  helpText: "",
+  errorMessage: "",
+  autocomplete: "list",
+  filterMode: "startsWith",
+  clearable: false,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  size: "default",
+  variant: "default",
+  multiple: false,
+  maxOptionsVisible: 3,
+  closeOnSelect: true,
+  loading: false,
+  loadingText: "Loading...",
+  noResultsText: "No results found",
+});
+
+// Define emits
+const emit = defineEmits<{
+  change: [detail: { value: string; option: ComboboxOption | null }];
+  select: [detail: { option: ComboboxOption; value: string }];
+  search: [detail: { searchTerm: string }];
+  open: [detail: { open: boolean }];
+  close: [detail: { open: boolean }];
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+  "update:value": [value: string];
+}>();
+
+// Template ref
+const comboboxRef = ref<HTMLElement>();
+
+// Event handlers
+const handleChange = (event: Event) => {
+  const customEvent = event as CustomEvent<{
+    value: string;
+    option: ComboboxOption | null;
+  }>;
+  emit("change", customEvent.detail);
+  // Update v-model
+  emit("update:value", customEvent.detail.value);
+};
+
+const handleSelect = (event: Event) => {
+  const customEvent = event as CustomEvent<{
+    option: ComboboxOption;
+    value: string;
+  }>;
+  emit("select", customEvent.detail);
+};
+
+const handleSearch = (event: Event) => {
+  const customEvent = event as CustomEvent<{ searchTerm: string }>;
+  emit("search", customEvent.detail);
+};
+
+const handleOpen = (event: Event) => {
+  const customEvent = event as CustomEvent<{ open: boolean }>;
+  emit("open", customEvent.detail);
+};
+
+const handleClose = (event: Event) => {
+  const customEvent = event as CustomEvent<{ open: boolean }>;
+  emit("close", customEvent.detail);
+};
+
+const handleFocus = (event: FocusEvent) => {
+  emit("focus", event);
+};
+
+const handleBlur = (event: FocusEvent) => {
+  emit("blur", event);
+};
+
+// Expose public methods
+defineExpose({
+  focus: () => (comboboxRef.value as any)?.focus?.(),
+  blur: () => (comboboxRef.value as any)?.blur?.(),
+  open: () => (comboboxRef.value as any)?.open?.(),
+  close: () => (comboboxRef.value as any)?.close?.(),
+  toggle: () => (comboboxRef.value as any)?.toggle?.(),
+  selectOption: (optionOrValue: ComboboxOption | string) =>
+    (comboboxRef.value as any)?.selectOption?.(optionOrValue),
+  clearSelection: () => (comboboxRef.value as any)?.clearSelection?.(),
+});
+</script>
+
+<template>
+  <ag-combobox
+    ref="comboboxRef"
+    .labelHidden="labelHidden"
+    .labelPosition="labelPosition"
+    .noLabel="noLabel"
+    .disabled="disabled"
+    .invalid="invalid"
+    .clearable="clearable"
+    .readonly="readonly"
+    .required="required"
+    .loading="loading"
+    .multiple="multiple"
+    .closeOnSelect="closeOnSelect"
+    .options="options"
+    .value="value"
+    .defaultValue="defaultValue"
+    .maxOptionsVisible="maxOptionsVisible"
+    :placeholder="placeholder"
+    :label="label"
+    :ariaLabel="ariaLabel"
+    :helpText="helpText"
+    :errorMessage="errorMessage"
+    :autocomplete="autocomplete"
+    :filterMode="filterMode"
+    :size="size"
+    :variant="variant"
+    :loadingText="loadingText"
+    :noResultsText="noResultsText"
+    @change="handleChange"
+    @select="handleSelect"
+    @search="handleSearch"
+    @open="handleOpen"
+    @close="handleClose"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  >
+    <slot></slot>
+  </ag-combobox>
+</template>

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

@@ -0,0 +1,14 @@
+export { default } from './VueCombobox.vue';
+export { default as VueCombobox } from './VueCombobox.vue';
+
+// Re-export types from core for convenience
+export type {
+  ComboboxOption,
+  ComboboxProps,
+  ComboboxFilterMode,
+  ComboboxChangeEvent,
+  ComboboxSelectEvent,
+  ComboboxSearchEvent,
+  ComboboxOpenEvent,
+  ComboboxCloseEvent,
+} from '../core/Combobox';

package/src/components/CopyButton/core/CopyButton.ts

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

package/src/components/CopyButton/core/_CopyButton.ts

@@ -0,0 +1,297 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '../../IconButton/core/IconButton.js';
+
+/**
+ * @slot icon-copy - Custom icon to show in the default (not copied) state
+ * @slot icon-copied - Custom icon to show in the copied state
+ * @slot icon-error - Custom icon to show when copy fails
+ * 
+ * Note: If providing custom icons, both icon-copy and icon-copied slots must be provided together. Providing only one will throw an error.
+ * 
+ * @csspart button - The icon button element
+ * @csspart icon - The icon container (all states)
+ * @csspart icon-copy - The copy icon (default state)
+ * @csspart icon-copied - The checkmark icon (copied state)
+ * @csspart icon-error - The error icon (error state)
+ * 
+ * @fires copy - Fired when text is successfully copied. Detail: { text: string }
+ * @fires copy-error - Fired when copy fails. Detail: { error: Error }
+ */
+export class AgCopyButton extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+
+    /* Stacked icon slots for smooth cross-fade between states */
+    .ag-icon-stack {
+      position: relative;
+      /* Make this a block-level box so the parent IconButton's flex centering
+         can reliably center the stacked slots. Inline alignment can interfere
+         with flex layout in some browsers, causing the "pushed down" effect. */
+      display: block;
+      width: 1em;
+      height: 1em;
+    }
+
+    /* Each slot occupies the full stack and is centered */
+    .ag-icon-slot {
+      position: absolute;
+      inset: 0;
+      /* Use grid centering to avoid baseline/line-height shifts during transitions */
+      display: grid;
+      place-items: center;
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast, 150ms) ease-in-out;
+      will-change: opacity;
+      pointer-events: none;
+    }
+
+    .ag-icon-slot.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* Ensure slotted SVGs and fallback svgs size consistently to the IconButton's em-based icon box
+       Use 1em so icons scale with the IconButton font-size and avoid layout shifts during cross-fade */
+    .ag-icon-slot::slotted(svg),
+    .ag-icon-slot svg {
+      width: 1em;
+      height: 1em;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+      display: block;
+    }
+  `;
+
+  /**
+   * The text to copy to the clipboard
+   */
+  @property({ type: String })
+  declare text: string;
+
+  /**
+   * The label for the button (aria-label)
+   */
+  @property({ type: String })
+  declare label: string;
+
+  /**
+   * The label to show when the text has been copied
+   */
+  @property({ type: String, attribute: 'success-label' })
+  declare successLabel: string;
+
+  /**
+   * The label to show when copy fails
+   */
+  @property({ type: String, attribute: 'error-label' })
+  declare errorLabel: string;
+
+  /**
+   * Duration in milliseconds to show the success state
+   */
+  @property({ type: Number })
+  declare timeout: number;
+
+  /**
+   * Size of the button
+   */
+  @property({ type: String })
+  declare size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Variant of the button
+   */
+  @property({ type: String })
+  declare variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost' | 'monochrome';
+
+
+
+  @state()
+  private _isCopied = false;
+
+  @state()
+  private _hasError = false;
+
+  @state()
+  private _announcement = '';
+
+  private _timeoutId?: number;
+
+  constructor() {
+    super();
+    // Initialize reactive properties in constructor
+    this.text = '';
+    this.label = 'Copy to clipboard';
+    this.successLabel = 'Copied!';
+    this.errorLabel = 'Copy failed';
+    this.timeout = 1000;
+    this.size = 'md';
+    this.variant = 'ghost';
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
+  }
+
+  override firstUpdated() {
+    this._validateSlots();
+  }
+
+  private _validateSlots() {
+    const copySlot = this.querySelector('[slot="icon-copy"]');
+    const copiedSlot = this.querySelector('[slot="icon-copied"]');
+
+    const hasCopySlot = !!copySlot;
+    const hasCopiedSlot = !!copiedSlot;
+
+    // If one slot is provided but not the other, throw an error
+    if (hasCopySlot !== hasCopiedSlot) {
+      throw new Error(
+        'AgCopyButton: Both "icon-copy" and "icon-copied" slots must be provided together. ' +
+        `Currently provided: ${hasCopySlot ? 'icon-copy' : 'icon-copied'} only.`
+      );
+    }
+  }
+
+  private async _copyWithFallback(text: string): Promise<void> {
+    // Try modern Clipboard API first
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    // Fallback to execCommand for older browsers or non-secure contexts
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      const successful = document.execCommand('copy');
+      if (!successful) {
+        throw new Error('execCommand copy failed');
+      }
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  }
+
+  private _handleCopy() {
+    if (!this.text) return;
+
+    // Clear any existing timeout
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
+
+    // Reset error state
+    this._hasError = false;
+
+    this._copyWithFallback(this.text)
+      .then(() => {
+        this._isCopied = true;
+        this._announcement = this.successLabel;
+        this.dispatchEvent(new CustomEvent('copy', { 
+          detail: { text: this.text },
+          bubbles: true,
+          composed: true
+        }));
+
+        this._timeoutId = window.setTimeout(() => {
+          this._isCopied = false;
+          this._announcement = '';
+        }, this.timeout);
+      })
+      .catch((err: Error) => {
+        this._hasError = true;
+        this._announcement = this.errorLabel;
+        this.dispatchEvent(new CustomEvent('copy-error', { 
+          detail: { error: err },
+          bubbles: true,
+          composed: true
+        }));
+
+        this._timeoutId = window.setTimeout(() => {
+          this._hasError = false;
+          this._announcement = '';
+        }, this.timeout);
+      });
+  }
+
+  private _renderIcon() {
+    // Render all three named slots stacked and toggle visibility via CSS for a smooth cross-fade
+    return html`
+      <span class="ag-icon-stack" part="icon-stack">
+        <slot name="icon-error" part="icon icon-error" class="ag-icon-slot ${this._hasError ? 'visible' : ''}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+          </svg>
+        </slot>
+
+        <slot name="icon-copied" part="icon icon-copied" class="ag-icon-slot ${this._isCopied && !this._hasError ? 'visible' : ''}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+          </svg>
+        </slot>
+
+        <slot name="icon-copy" part="icon icon-copy" class="ag-icon-slot ${!this._isCopied && !this._hasError ? 'visible' : ''}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+          </svg>
+        </slot>
+      </span>
+    `;
+  }
+
+  render() {
+    const currentLabel = this._hasError 
+      ? this.errorLabel 
+      : this._isCopied 
+        ? this.successLabel 
+        : this.label;
+
+    return html`
+      <ag-icon-button
+        part="button"
+        .size="${this.size}"
+        .variant="${this.variant}"
+        .label="${currentLabel}"
+        @click="${this._handleCopy}"
+      >
+        ${this._renderIcon()}
+      </ag-icon-button>
+      
+      ${this._announcement 
+        ? html`<span class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+            ${this._announcement}
+          </span>`
+        : nothing
+      }
+    `;
+  }
+}

package/src/components/CopyButton/react/ReactCopyButton.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { createComponent, type EventName } from "@lit/react";
+import { AgCopyButton } from "../core/CopyButton.js";
+
+export interface ReactCopyButtonProps {
+  /**
+   * The text to copy to the clipboard
+   */
+  text?: string;
+
+  /**
+   * The label for the button (aria-label)
+   */
+  label?: string;
+
+  /**
+   * The label to show when the text has been copied
+   */
+  successLabel?: string;
+
+  /**
+   * The label to show when copy fails
+   */
+  errorLabel?: string;
+
+  /**
+   * Duration in milliseconds to show the success state
+   */
+  timeout?: number;
+
+  /**
+   * Size of the button
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Variant of the button
+   */
+  variant?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger"
+    | "ghost"
+    | "monochrome";
+
+  /**
+   * Children for custom icon slots
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Additional CSS class name
+   */
+  className?: string;
+
+  /**
+   * Element ID
+   */
+  id?: string;
+
+  /**
+   * Event handler for successful copy
+   */
+  onCopy?: (event: CustomEvent<{ text: string }>) => void;
+
+  /**
+   * Event handler for copy failure
+   */
+  onCopyError?: (event: CustomEvent<{ error: Error }>) => void;
+}
+
+export const ReactCopyButton = createComponent({
+  tagName: "ag-copy-button",
+  elementClass: AgCopyButton,
+  react: React,
+  events: {
+    onCopy: "copy" as EventName<CustomEvent<{ text: string }>>,
+    onCopyError: "copy-error" as EventName<CustomEvent<{ error: Error }>>,
+  },
+});

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

@@ -0,0 +1,2 @@
+export { ReactCopyButton } from './ReactCopyButton.js';
+export type { ReactCopyButtonProps } from './ReactCopyButton.js';

package/src/components/CopyButton/vue/VueCopyButton.vue

@@ -0,0 +1,74 @@
+<template>
+  <ag-copy-button
+    ref="agComponent"
+    :text="text"
+    :label="label"
+    :success-label="successLabel"
+    :error-label="errorLabel"
+    :timeout="timeout"
+    :size="size"
+    :variant="variant"
+    v-bind="$attrs"
+    @copy="$emit('copy', $event)"
+    @copy-error="$emit('copy-error', $event)"
+  >
+    <span
+      v-if="$slots['icon-copy']"
+      slot="icon-copy"
+    >
+      <slot name="icon-copy" />
+    </span>
+    <span
+      v-if="$slots['icon-copied']"
+      slot="icon-copied"
+    >
+      <slot name="icon-copied" />
+    </span>
+    <span
+      v-if="$slots['icon-error']"
+      slot="icon-error"
+    >
+      <slot name="icon-error" />
+    </span>
+  </ag-copy-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { AgCopyButton } from "../core/CopyButton";
+import "../core/CopyButton"; // Registers <ag-copy-button> on wrapper load
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    label?: string;
+    successLabel?: string;
+    errorLabel?: string;
+    timeout?: number;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?:
+      | "primary"
+      | "secondary"
+      | "success"
+      | "warning"
+      | "danger"
+      | "ghost"
+      | "monochrome";
+  }>(),
+  {
+    label: "Copy to clipboard",
+    successLabel: "Copied!",
+    errorLabel: "Copy failed",
+    timeout: 1000,
+    size: "md",
+    variant: "ghost",
+  }
+);
+
+defineEmits<{
+  (e: "copy", event: CustomEvent<{ text: string }>): void;
+  (e: "copy-error", event: CustomEvent<{ error: Error }>): void;
+}>();
+
+const agComponent = ref<InstanceType<typeof AgCopyButton> | null>(null);
+</script>