agnosticui-core 2.0.0-alpha.2

package/src/components/Accordion/vue/VueAccordionItem.vue

@@ -0,0 +1,90 @@
+<template>
+  <ag-accordion-item
+    ref="accordionItemRef"
+    .open="open"
+    .disabled="disabled"
+    .useChevron="useChevron"
+    .useX="useX"
+    .useMinus="useMinus"
+    .noIndicator="noIndicator"
+    .background="background"
+    .bordered="bordered"
+    :headingLevel="headingLevel"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-accordion-item>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import "../core/Accordion";
+
+// Re-export event types
+export type {
+  AccordionItemToggleEvent,
+  AccordionItemToggleEventDetail,
+} from "../core/Accordion";
+
+// VueAccordionItem component
+export interface VueAccordionItemProps {
+  open?: boolean;
+  headingLevel?: number;
+  disabled?: boolean;
+  background?: boolean;
+  bordered?: boolean;
+  // Indicator variants (mutually exclusive, priority: noIndicator > useX > useMinus > useChevron)
+  useChevron?: boolean;
+  useX?: boolean;
+  useMinus?: boolean;
+  noIndicator?: boolean;
+}
+
+// Define props with defaults
+const props = withDefaults(defineProps<VueAccordionItemProps>(), {
+  open: false,
+  headingLevel: 3,
+  disabled: false,
+  background: false,
+  bordered: false,
+  useChevron: true,
+  useX: false,
+  useMinus: false,
+  noIndicator: false,
+});
+
+// Define emits
+const emit = defineEmits<{
+  // Custom event - emit detail payload
+  toggle: [detail: { open: boolean }];
+  // v-model support
+  "update:open": [value: boolean];
+}>();
+
+// Template ref
+const accordionItemRef = ref<HTMLElement>();
+
+// Event handlers - emit detail payload for custom event
+const handleToggle = (event: Event) => {
+  const detail = (event as CustomEvent).detail;
+  emit("toggle", detail);
+  // Also emit for v-model support
+  emit("update:open", detail.open);
+};
+
+// Setup event listeners
+onMounted(async () => {
+  // Wait for web components to be defined
+  await customElements.whenDefined("ag-accordion-item");
+
+  if (!accordionItemRef.value) return;
+
+  accordionItemRef.value.addEventListener("toggle", handleToggle);
+});
+
+onUnmounted(() => {
+  if (!accordionItemRef.value) return;
+
+  accordionItemRef.value.removeEventListener("toggle", handleToggle);
+});
+</script>

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

@@ -0,0 +1,31 @@
+export { default } from './VueAccordion.vue';
+export { default as VueAccordion } from './VueAccordion.vue';
+export { default as VueAccordionItem } from './VueAccordionItem.vue';
+export { default as VueAccordionHeader } from './VueAccordionHeader.vue';
+export { default as VueAccordionContent } from './VueAccordionContent.vue';
+
+// Define types separately since Vue component types are handled differently
+export interface VueAccordionProps {
+  // No specific props for the group container
+}
+
+export interface VueAccordionItemProps {
+  open?: boolean;
+  headingLevel?: number;
+  disabled?: boolean;
+  background?: boolean;
+  bordered?: boolean;
+  // Indicator variants (mutually exclusive, priority: noIndicator > useX > useMinus > useChevron)
+  useChevron?: boolean;
+  useX?: boolean;
+  useMinus?: boolean;
+  noIndicator?: boolean;
+}
+
+export interface VueAccordionHeaderProps {
+  // No specific props for header
+}
+
+export interface VueAccordionContentProps {
+  // No specific props for content
+}

package/src/components/Alert/core/Alert.ts

@@ -0,0 +1,14 @@
+import { AgAlert } from './_Alert.js';
+
+if (!customElements.get('ag-alert')) {
+  customElements.define('ag-alert', AgAlert);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-alert': AgAlert;
+  }
+}
+
+// Export everything from implementation
+export * from './_Alert.js';

package/src/components/Alert/core/_Alert.ts

@@ -0,0 +1,174 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../shared/CloseButton/CloseButton';
+
+export type AlertVariant = 'warning' | 'info' | 'success' | 'error' | 'danger' | 'primary' | 'default' | 'monochrome';
+
+// Event detail interfaces
+export interface AlertDismissEventDetail {
+  variant: AlertVariant;
+}
+
+// Event type definitions
+export type AlertDismissEvent = CustomEvent<AlertDismissEventDetail>;
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  bordered?: boolean;
+  rounded?: boolean;
+  borderedLeft?: boolean;
+  dismissible?: boolean;
+  // Event handlers
+  onAlertDismiss?: (event: AlertDismissEvent) => void;
+}
+
+export class AgAlert extends LitElement implements AlertProps {
+  @property({ type: String })
+  declare variant: AlertVariant;
+
+  @property({ type: Boolean })
+  declare bordered: boolean;
+
+  @property({ type: Boolean })
+  declare rounded: boolean;
+
+  @property({ type: Boolean })
+  declare borderedLeft: boolean;
+
+  @property({ type: Boolean })
+  declare dismissible: boolean;
+
+  @property({ attribute: false })
+  declare onAlertDismiss?: (event: AlertDismissEvent) => void;
+
+  constructor() {
+    super();
+    this.variant = 'default';
+    this.bordered = false;
+    this.rounded = false;
+    this.borderedLeft = false;
+    this.dismissible = false;
+  }
+
+  static styles = css`
+    .alert {
+      position: relative;
+      padding: var(--ag-space-3);
+      background-color: var(--ag-info-background);
+      color: var(--ag-info-text);
+      border-width: var(--ag-border-width-1);
+      border-style: solid;
+      border-color: transparent;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ag-space-2);
+    }
+    .alert-content {
+      flex: 1;
+    }
+    .alert-close {
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    }
+    .alert-rounded {
+      border-radius: var(--ag-radius-md);
+    }
+    .alert-bordered {
+      border-color: var(--ag-border);
+    }
+    .alert-border-left {
+      border-inline-start-width: var(--ag-border-width-3);
+      border-inline-start-color: var(--ag-border);
+    }
+    .alert-warning {
+      background-color: var(--ag-warning-background);
+      color: var(--ag-warning-text);
+    }
+    .alert-border-left.alert-warning {
+      border-inline-start-color: var(--ag-warning);
+    }
+    .alert-info {
+      background-color: var(--ag-info-background);
+      color: var(--ag-info-text);
+    }
+    .alert-border-left.alert-info {
+      border-inline-start-color: var(--ag-info);
+    }
+    .alert-success {
+      background-color: var(--ag-success-background);
+      color: var(--ag-success-text);
+    }
+    .alert-border-left.alert-success {
+      border-inline-start-color: var(--ag-success);
+    }
+    .alert-danger,
+    .alert-error {
+      background-color: var(--ag-danger-background);
+      color: var(--ag-danger-text);
+    }
+    .alert-border-left.alert-danger,
+    .alert-border-left.alert-error {
+      border-inline-start-color: var(--ag-danger);
+    }
+    .alert-primary {
+      background-color: var(--ag-primary-background);
+      color: var(--ag-primary-text);
+    }
+    .alert-border-left.alert-primary {
+      border-inline-start-color: var(--ag-primary);
+    }
+    .alert-monochrome {
+      background-color: var(--ag-background-primary-inverted);
+      color: var(--ag-text-primary-inverted);
+    }
+    .alert-border-left.alert-monochrome {
+      border-inline-start-color: var(--ag-text-primary);
+    }
+  `;
+
+  private _handleDismiss = () => {
+    // Dual-dispatch pattern for custom event
+    const dismissEvent = new CustomEvent<AlertDismissEventDetail>('alert-dismiss', {
+      detail: {
+        variant: this.variant
+      },
+      bubbles: true,
+      composed: true
+    });
+
+    // Dispatch DOM event first
+    this.dispatchEvent(dismissEvent);
+
+    // Then invoke callback if provided
+    if (this.onAlertDismiss) {
+      this.onAlertDismiss(dismissEvent);
+    }
+  };
+
+  render() {
+    const classes = [
+      'alert',
+      this.rounded ? 'alert-rounded' : '',
+      this.bordered ? 'alert-bordered' : '',
+      this.borderedLeft ? 'alert-border-left' : '',
+      `alert-${this.variant}`
+    ].filter(Boolean).join(' ');
+
+    return html`
+      <div class="${classes}" part="ag-alert" role="alert">
+        <div class="alert-content">
+          <slot></slot>
+        </div>
+        ${this.dismissible ? html`
+          <div class="alert-close">
+            <ag-close-button
+              @click=${this._handleDismiss}
+              aria-label="Dismiss alert"
+              size="sm"
+            ></ag-close-button>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}

package/src/components/Alert/react/ReactAlert.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import { AgAlert, type AlertProps, type AlertDismissEvent } from '../core/Alert';
+
+/**
+ * React-specific props interface derived from core AlertProps
+ * Extends core props including event handlers (onAlertDismiss)
+ */
+export interface ReactAlertProps extends AlertProps {
+  children?: React.ReactNode;
+}
+
+// Create component with @lit/react
+export const ReactAlert = createComponent({
+  tagName: 'ag-alert',
+  elementClass: AgAlert,
+  react: React,
+  events: {
+    onAlertDismiss: 'alert-dismiss' as EventName<AlertDismissEvent>,
+  },
+});
+
+// Re-export event types
+export type { AlertDismissEvent } from '../core/Alert';

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

@@ -0,0 +1,5 @@
+export { ReactAlert } from './ReactAlert';
+export type { ReactAlertProps } from './ReactAlert';
+
+// Re-export event types from core for convenience
+export type { AlertDismissEvent } from '../core/Alert';

package/src/components/Alert/vue/VueAlert.vue

@@ -0,0 +1,50 @@
+<template>
+  <ag-alert
+    ref="alertRef"
+    :variant="variant"
+    :bordered="bordered || undefined"
+    :rounded="rounded || undefined"
+    :borderedLeft="borderedLeft || undefined"
+    :dismissible="dismissible || undefined"
+    @alert-dismiss="handleDismiss"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-alert>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type {
+  AlertProps,
+  AlertVariant,
+  AlertDismissEventDetail,
+} from "../core/Alert";
+import "../core/Alert"; // Registers the ag-alert web component
+
+// Omit callback props (Vue uses emits instead)
+export interface VueAlertProps extends Omit<AlertProps, "onAlertDismiss"> {}
+
+// Define props with defaults
+withDefaults(defineProps<VueAlertProps>(), {
+  variant: "default" as AlertVariant,
+  bordered: false,
+  rounded: false,
+  borderedLeft: false,
+  dismissible: false,
+});
+
+// Define emits for all events
+const emit = defineEmits<{
+  "alert-dismiss": [detail: AlertDismissEventDetail];
+}>();
+
+// Template ref
+const alertRef = ref<HTMLElement>();
+
+// Bridge handler for custom event
+const handleDismiss = (event: Event) => {
+  const dismissEvent = event as CustomEvent<AlertDismissEventDetail>;
+  emit("alert-dismiss", dismissEvent.detail);
+};
+</script>

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

@@ -0,0 +1,3 @@
+export { default } from './VueAlert.vue';
+export { default as VueAlert } from './VueAlert.vue';
+export type { AlertProps as VueAlertProps } from '../core/_Alert';

package/src/components/AspectRatio/core/AspectRatio.ts

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

package/src/components/AspectRatio/core/_AspectRatio.ts

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export interface AspectRatioProps {
+  width: number;
+  height: number;
+  maxWidth?: number | undefined;
+}
+
+/**
+ * @summary Responsively resize a single block-level child to a specified aspect ratio.
+ * @slot - Single block child (e.g., iframe, video, img, div)
+ * @part ag-aspect-ratio - The wrapper that enforces the aspect ratio
+ */
+export class AgAspectRatio extends LitElement implements AspectRatioProps {
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    /* wrapper that enforces aspect ratio */
+    .ratio {
+      position: relative;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+      display: block;
+    }
+
+    /* Make slotted child fill the container */
+    ::slotted(*) {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border: 0;
+    }
+  `;
+
+  @property({ type: Number })
+  declare width: number;
+
+  @property({ type: Number })
+  declare height: number;
+
+  @property({ type: Number, attribute: 'max-width' })
+  declare maxWidth?: number | undefined;
+
+  constructor() {
+    super();
+    this.width = 1;
+    this.height = 1;
+    this.maxWidth = undefined;
+  }
+
+  private get _aspectStyle() {
+    const w = this.width || 1;
+    const h = this.height || 1;
+    const aspect = `${w} / ${h}`;
+    const styles: string[] = [];
+    styles.push(`aspect-ratio: ${aspect};`);
+    if (this.maxWidth !== undefined && this.maxWidth !== null) {
+      styles.push(`max-inline-size: ${this.maxWidth}px;`);
+      styles.push(`margin-inline-start: auto; margin-inline-end: auto;`);
+    }
+    return styles.join(' ');
+  }
+
+  render() {
+    return html`
+      <div part="ag-aspect-ratio" class="ratio" style=${this._aspectStyle}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/AspectRatio/index.ts

@@ -0,0 +1 @@
+export * from './core/AspectRatio.js';

package/src/components/AspectRatio/react/ReactAspectRatio.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { AgAspectRatio } from '../core/AspectRatio';
+
+export interface ReactAspectRatioProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+  width?: number;
+  height?: number;
+  maxWidth?: number;
+}
+
+export const ReactAspectRatio = createComponent({
+  tagName: 'ag-aspect-ratio',
+  elementClass: AgAspectRatio,
+  react: React,
+  events: {},
+}) as React.ForwardRefExoticComponent<
+  ReactAspectRatioProps & React.RefAttributes<AgAspectRatio>
+>;

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

@@ -0,0 +1 @@
+export * from './ReactAspectRatio';

package/src/components/AspectRatio/vue/VueAspectRatio.vue

@@ -0,0 +1,9 @@
+<template>
+  <ag-aspect-ratio v-bind="$attrs">
+    <slot />
+  </ag-aspect-ratio>
+</template>
+
+<script setup lang="ts">
+import '../core/AspectRatio';
+</script>

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

@@ -0,0 +1,3 @@
+import VueAspectRatio from './VueAspectRatio.vue';
+
+export { VueAspectRatio };

package/src/components/Avatar/core/Avatar.ts

@@ -0,0 +1,21 @@
+import { Avatar } from './_Avatar.js';
+import { AvatarGroup } from './AvatarGroup.js';
+
+if (!customElements.get('ag-avatar')) {
+  customElements.define('ag-avatar', Avatar);
+}
+
+if (!customElements.get('ag-avatar-group')) {
+  customElements.define('ag-avatar-group', AvatarGroup);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-avatar': Avatar;
+    'ag-avatar-group': AvatarGroup;
+  }
+}
+
+// Export everything from implementation
+export * from './_Avatar.js';
+export { AvatarGroup } from './AvatarGroup.js';

package/src/components/Avatar/core/AvatarGroup.ts

@@ -0,0 +1,75 @@
+/**
+ * AgnosticUI v2 AvatarGroup - Canonical Implementation
+ *
+ * ⚠️  IMMUTABLE CANONICAL VERSION ⚠️
+ *
+ * AvatarGroup component for displaying multiple avatars in an overlapping layout.
+ * Should be used as a wrapper for multiple ag-avatar elements.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Container component for grouping multiple Avatar components
+ * 
+ * @slot - Default slot for avatar elements
+ * @csspart ag-avatar-group - The main avatar group container element
+ * 
+ * @example
+ * ```html
+ * <ag-avatar-group>
+ *   <ag-avatar text="AB" variant="info" size="lg"></ag-avatar>
+ *   <ag-avatar text="RL" variant="info" size="lg"></ag-avatar>
+ *   <ag-avatar img-src="..." size="lg"></ag-avatar>
+ * </ag-avatar-group>
+ * ```
+ * 
+ * Note: To add borders for visual separation when avatars overlap, style the
+ * avatar's internal parts using CSS:
+ * ```css
+ * ag-avatar-group ag-avatar::part(ag-avatar) {
+ *   border: 2px solid white;
+ * }
+ * ```
+ */
+export class AvatarGroup extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .avatar-group {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    /* Overlap avatars except the first one */
+    ::slotted(ag-avatar:not(:first-child)) {
+      margin-inline-start: calc(-1 * 0.625rem);
+    }
+
+    /* Optional: Add z-index stacking so later avatars appear on top when hovered */
+    ::slotted(ag-avatar) {
+      transition: transform 0.2s ease;
+      position: relative;
+    }
+
+    ::slotted(ag-avatar:hover) {
+      transform: translateY(-2px);
+      z-index: 10;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="avatar-group" part="ag-avatar-group">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ag-avatar-group')) {
+  customElements.define('ag-avatar-group', AvatarGroup);
+}