agnosticui-core 2.0.0-alpha.2

package/src/components/Button/vue/VueButton.vue

@@ -0,0 +1,98 @@
+<template>
+  <ag-button
+    ref="buttonRef"
+    .disabled="disabled"
+    .loading="loading"
+    .toggle="toggle"
+    .pressed="pressed"
+    .bordered="bordered"
+    .ghost="ghost"
+    .link="link"
+    .grouped="grouped"
+    .ariaLabel="ariaLabel"
+    :type="type"
+    :variant="variant"
+    :size="size"
+    :shape="shape"
+    @click="handleClick"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @toggle="handleToggle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-button>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type {
+  ButtonProps,
+  ButtonToggleEvent,
+  ButtonToggleEventDetail,
+} from "../core/Button";
+import "../core/Button"; // Registers the ag-button web component
+
+// Define props interface (omit function props since wrapper uses emits)
+export interface VueButtonProps
+  extends Omit<ButtonProps, "onClick" | "onFocus" | "onBlur" | "onToggle"> {}
+
+// Define props with defaults
+const props = withDefaults(defineProps<VueButtonProps>(), {
+  type: "button",
+  disabled: false,
+  loading: false,
+  toggle: false,
+  pressed: false,
+  variant: "",
+  size: "md",
+  shape: "",
+  bordered: false,
+  ghost: false,
+  link: false,
+  grouped: false,
+  ariaLabel: "",
+});
+
+// Define emits
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+  toggle: [detail: ButtonToggleEventDetail];
+  "update:pressed": [pressed: boolean];
+}>();
+
+// Template ref
+const buttonRef = ref<HTMLElement>();
+
+// Event handlers
+const handleClick = (event: MouseEvent) => {
+  emit("click", event);
+};
+
+const handleFocus = (event: FocusEvent) => {
+  emit("focus", event);
+};
+
+const handleBlur = (event: FocusEvent) => {
+  emit("blur", event);
+};
+
+const handleToggle = (event: Event) => {
+  const toggleEvent = event as ButtonToggleEvent;
+  emit("toggle", toggleEvent.detail);
+  emit("update:pressed", toggleEvent.detail.pressed);
+};
+
+// Watch for pressed prop changes and sync with web component
+// This ensures two-way binding works correctly
+watch(
+  () => props.pressed,
+  (newPressed) => {
+    if (buttonRef.value && props.toggle) {
+      (buttonRef.value as any).pressed = newPressed;
+    }
+  }
+);
+</script>

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

@@ -0,0 +1,13 @@
+export { default } from './VueButton.vue';
+export { default as VueButton } from './VueButton.vue';
+
+// Define props interface
+export interface VueButtonProps {
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+  loading?: boolean;
+  toggle?: boolean;
+  pressed?: boolean;
+  ariaLabel?: string;
+  ariaDescribedby?: string;
+}

package/src/components/ButtonFx/core/ButtonFx.ts

@@ -0,0 +1,14 @@
+import '../../Button/core/Button.js';
+import { ButtonFx } from './_ButtonFx';
+
+if (!customElements.get('ag-button-fx')) {
+  customElements.define('ag-button-fx', ButtonFx);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-button-fx': ButtonFx;
+  }
+}
+
+export * from './_ButtonFx.js';

package/src/components/ButtonFx/core/_ButtonFx.ts

@@ -0,0 +1,325 @@
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { AgButton, type ButtonProps } from '../../Button/core/_Button.js';
+import { motionStyles } from '../../../styles/motion.styles.js';
+import type { FxProps } from '../../../types/fx.js';
+
+// Combined props for ButtonFx
+export interface ButtonFxProps extends ButtonProps, FxProps {}
+
+/**
+ * ButtonFx - Button with CSS animation effects
+ *
+ * Extends AgButton to add optional CSS-only animation effects.
+ * Inherits all Button functionality and styling.
+ *
+ * Features:
+ * - 9 CSS-only FX effects
+ * - Full control over button hover states
+ * - Automatic reduced-motion support
+ * - Can override Button's default hover behaviors
+ */
+export class ButtonFx extends AgButton implements FxProps {
+  static styles = [
+    motionStyles,
+    AgButton.styles,
+    css`
+      /* ========================================
+         OVERRIDE PARENT HOVER BACKGROUNDS
+         These compete with FX effects like highlight-sweep, slide-in, etc.
+         We need to keep these using :host() for variant attribute selectors
+         ======================================== */
+
+      :host([variant="primary"]) button:hover {
+        background: var(--ag-primary-dark);
+      }
+
+      :host([variant="secondary"]) button:hover {
+        background: var(--ag-neutral-500);
+      }
+
+      :host([variant="success"]) button:hover {
+        background: var(--ag-success-dark);
+      }
+
+      :host([variant="warning"]) button:hover {
+         background: var(--ag-warning-dark);
+      }
+
+      :host([variant="danger"]) button:hover {
+        background: var(--ag-danger);
+      }
+
+      :host([variant="monochrome"]) button:hover {
+        background: var(--ag-background-secondary-inverted);
+      }
+
+      /* ========================================
+         FX EFFECT CLASSES
+         Classes are applied directly to button element
+         Note: Keyframes are imported from motionStyles
+         ======================================== */
+
+      /* Hover-triggered effects */
+      button.ag-fx-bounce:hover {
+        animation: ag-fx-bounce var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      button.ag-fx-pulse:hover {
+        animation: ag-fx-pulse var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      button.ag-fx-jelly:hover {
+        animation: ag-fx-jelly var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Active/press-triggered effects */
+      button.ag-fx-press-pop:active {
+        animation: ag-fx-press-pop var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Entrance effect - plays once on mount */
+      button.ag-fx-slide-in {
+        animation: ag-fx-slide-in var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* ========================================
+         ADDITIONAL EFFECT CLASSES
+         ======================================== */
+
+      /* Grow */
+      button.ag-fx-grow:hover {
+        animation: ag-fx-grow var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease) forwards;
+      }
+
+      /* Shrink */
+      button.ag-fx-shrink:hover {
+        animation: ag-fx-shrink var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease) forwards;
+      }
+
+      /* Push */
+      button.ag-fx-push:hover {
+        animation: ag-fx-push var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Background slide */
+      button.ag-fx-bg-slide {
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* Background (bottom to top) and Side (left to right) slides share */
+      button.ag-fx-side-slide::before,
+      button.ag-fx-bg-slide::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        inset-inline-start: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.25);
+        /* Use ease-out for slides to prevent spring overshoot which causes visual glitches */
+        transition: transform var(--ag-fx-duration, 200ms) ease-out;
+      }
+
+      button.ag-fx-bg-slide::before {
+        transform: translateY(100%);
+      }
+
+      button.ag-fx-bg-slide:hover::before {
+        transform: translateY(0);
+      }
+
+      /* Side slide */
+      button.ag-fx-side-slide {
+        position: relative;
+        overflow: hidden;
+      }
+
+      button.ag-fx-side-slide::before {
+        transform: translateX(-100%);
+      }
+
+      button.ag-fx-side-slide:hover::before {
+        transform: translateX(0);
+      }
+
+      /* RTL Support - flip side-slide direction */
+      :host-context([dir="rtl"]) button.ag-fx-side-slide::before {
+        transform: translateX(100%);
+      }
+
+      /* Press shadow - animates shadow on active/press with variant colors */
+      :host([variant="primary"]) button.ag-fx-press-shadow {
+        box-shadow: 0 4px 0 rgba(5, 80, 174, 0.5);
+        position: relative;
+        top: 0;
+        transition: top 0.1s, box-shadow 0.1s;
+      }
+
+      :host([variant="primary"]) button.ag-fx-press-shadow:active {
+        top: 4px;
+        box-shadow: 0 0px 0 rgba(5, 80, 174, 0.5);
+      }
+
+      :host([variant="success"]) button.ag-fx-press-shadow {
+        box-shadow: 0 4px 0 rgba(var(--ag-success-rgb), 0.5);
+        position: relative;
+        top: 0;
+        transition: top 0.1s, box-shadow 0.1s;
+      }
+
+      :host([variant="success"]) button.ag-fx-press-shadow:active {
+        top: 4px;
+        box-shadow: 0 0px 0 rgba(var(--ag-success-rgb), 0.5);
+      }
+
+      :host([variant="warning"]) button.ag-fx-press-shadow {
+        box-shadow: 0 4px 0 rgba(var(--ag-warning-rgb), 0.5);
+        position: relative;
+        top: 0;
+        transition: top 0.1s, box-shadow 0.1s;
+      }
+
+      :host([variant="warning"]) button.ag-fx-press-shadow:active {
+        top: 4px;
+        box-shadow: 0 0px 0 rgba(var(--ag-warning-rgb), 0.5);
+      }
+
+      :host([variant="danger"]) button.ag-fx-press-shadow {
+        box-shadow: 0 4px 0 rgba(var(--ag-danger-rgb), 0.5);
+        position: relative;
+        top: 0;
+        transition: top 0.1s, box-shadow 0.1s;
+      }
+
+      :host([variant="danger"]) button.ag-fx-press-shadow:active {
+        top: 4px;
+        box-shadow: 0 0px 0 rgba(var(--ag-danger-rgb), 0.5);
+      }
+
+      /* Fallback for other variants without RGB tokens */
+      :host([variant="secondary"]) button.ag-fx-press-shadow,
+      :host([variant="monochrome"]) button.ag-fx-press-shadow,
+      :host(:not([variant])) button.ag-fx-press-shadow {
+        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
+        position: relative;
+        top: 0;
+        transition: top 0.1s, box-shadow 0.1s;
+      }
+
+      :host([variant="secondary"]) button.ag-fx-press-shadow:active,
+      :host([variant="monochrome"]) button.ag-fx-press-shadow:active,
+      :host(:not([variant])) button.ag-fx-press-shadow:active {
+        top: 4px;
+        box-shadow: 0 0px 0 rgba(0, 0, 0, 0.2);
+      }
+
+      /* Shake */
+      button.ag-fx-shake:hover {
+        animation: ag-fx-shake var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Wobble */
+      button.ag-fx-wobble:hover {
+        animation: ag-fx-wobble var(--ag-fx-duration, 200ms) var(--ag-fx-ease, ease);
+      }
+
+      /* Pulse-Wobble Sequential */
+      button.ag-fx-pulse-wobble:hover {
+        animation: ag-fx-pulse-wobble var(--ag-fx-duration, 400ms) var(--ag-fx-ease-spring-md);
+      }
+
+      /* Disabled FX */
+      button.ag-fx-disabled {
+        animation: none !important;
+      }
+
+      button.ag-fx-disabled::after {
+        animation: none !important;
+      }
+
+      /* Automatic reduced-motion support */
+      @media (prefers-reduced-motion: reduce) {
+        button.ag-fx-bounce,
+        button.ag-fx-pulse,
+        button.ag-fx-jelly,
+        button.ag-fx-press-pop,
+        button.ag-fx-slide-in {
+          animation-duration: 0.01ms !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `
+  ];
+
+  // FX props
+  @property({ type: String, reflect: true })
+  declare fx?: string;
+
+  @property({ type: String, attribute: 'fx-speed' })
+  declare fxSpeed: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  @property({ type: String, attribute: 'fx-ease' })
+  declare fxEase: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'spring-sm' | 'spring-md' | 'spring-lg';
+
+  @property({ type: Boolean, reflect: true, attribute: 'fx-disabled' })
+  declare fxDisabled: boolean;
+
+  constructor() {
+    super();
+    // Initialize reactive properties in constructor to avoid class field shadowing
+    this.fxSpeed = 'md';
+    this.fxEase = 'ease';
+    this.fxDisabled = false;
+  }
+
+  firstUpdated() {
+    // Apply initial FX setup after first render
+    this._applyFxClasses();
+    this._applyFxCustomProperties();
+  }
+
+  updated(changedProperties: Map<PropertyKey, unknown>) {
+    super.updated(changedProperties);
+
+    // Apply FX classes to the button element when props change
+    if (changedProperties.has('fx') || changedProperties.has('fxDisabled')) {
+      this._applyFxClasses();
+    }
+
+    // Set CSS custom properties for duration and easing
+    if (changedProperties.has('fxSpeed') || changedProperties.has('fxEase')) {
+      this._applyFxCustomProperties();
+    }
+  }
+
+  private _applyFxClasses() {
+    const buttonEl = this.shadowRoot?.querySelector('button');
+    if (buttonEl) {
+      // Remove all existing fx classes from button
+      buttonEl.classList.forEach((className: string) => {
+        if (className.startsWith('ag-fx-')) {
+          buttonEl.classList.remove(className);
+        }
+      });
+
+      // Add new fx class to button
+      if (this.fx) {
+        buttonEl.classList.add(`ag-fx-${this.fx}`);
+      }
+
+      if (this.fxDisabled) {
+        buttonEl.classList.add('ag-fx-disabled');
+      }
+    }
+  }
+
+  private _applyFxCustomProperties() {
+    const buttonEl = this.shadowRoot?.querySelector('button');
+    if (buttonEl instanceof HTMLElement) {
+      buttonEl.style.setProperty('--ag-fx-duration', `var(--ag-fx-duration-${this.fxSpeed})`);
+      buttonEl.style.setProperty('--ag-fx-ease', `var(--ag-fx-ease-${this.fxEase})`);
+    }
+  }
+}

package/src/components/ButtonFx/react/ReactButtonFx.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { createComponent, type EventName } from "@lit/react";
+import {
+  ButtonFx,
+  type ButtonFxProps,
+} from "../core/ButtonFx";
+import type { ButtonToggleEvent } from "../../Button/core/Button";
+
+/**
+ * React-specific props interface derived from core ButtonFxProps
+ * Extends core props including event handlers (onToggle)
+ */
+export interface ReactButtonFxProps extends ButtonFxProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+  // Explicitly include event handler types for TS completeness
+  onClick?: (event: MouseEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+  onToggle?: (event: ButtonToggleEvent) => void;
+}
+
+// Create component with @lit/react
+export const ReactButtonFx = createComponent({
+  tagName: "ag-button-fx",
+  elementClass: ButtonFx,
+  react: React,
+  events: {
+    onToggle: "toggle" as EventName<ButtonToggleEvent>,
+  },
+});
+
+// Re-export types
+export type { ButtonFxProps } from "../core/ButtonFx";
+export type { FxProps } from "../../../types/fx";
+export type { ButtonToggleEvent } from "../../Button/core/Button";

package/src/components/ButtonFx/vue/VueButtonFx.vue

@@ -0,0 +1,107 @@
+<template>
+  <ag-button-fx
+    ref="buttonFxRef"
+    .disabled="disabled"
+    .loading="loading"
+    .toggle="toggle"
+    .pressed="pressed"
+    .bordered="bordered"
+    .ghost="ghost"
+    .link="link"
+    .grouped="grouped"
+    .ariaLabel="ariaLabel"
+    .fx="fx"
+    .fxDisabled="fxDisabled"
+    :type="type"
+    :variant="variant"
+    :size="size"
+    :shape="shape"
+    :fx-speed="fxSpeed"
+    :fx-ease="fxEase"
+    @click="handleClick"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @toggle="handleToggle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-button-fx>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type {
+  ButtonFxProps,
+} from "../core/_ButtonFx";
+import type {
+  ButtonToggleEvent,
+  ButtonToggleEventDetail,
+} from "../../Button/core/Button";
+import "../core/ButtonFx"; // Registers the ag-button-fx web component
+
+// Define props interface (omit function props since wrapper uses emits)
+export interface VueButtonFxProps
+  extends Omit<ButtonFxProps, "onClick" | "onFocus" | "onBlur" | "onToggle"> {}
+
+// Define props with defaults
+const props = withDefaults(defineProps<VueButtonFxProps>(), {
+  type: "button",
+  disabled: false,
+  loading: false,
+  toggle: false,
+  pressed: false,
+  variant: "",
+  size: "md",
+  shape: "",
+  bordered: false,
+  ghost: false,
+  link: false,
+  grouped: false,
+  ariaLabel: "",
+  fxSpeed: "md",
+  fxEase: "ease",
+  fxDisabled: false,
+});
+
+// Define emits
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+  toggle: [detail: ButtonToggleEventDetail];
+  "update:pressed": [pressed: boolean];
+}>();
+
+// Template ref
+const buttonFxRef = ref<HTMLElement>();
+
+// Event handlers
+const handleClick = (event: MouseEvent) => {
+  emit("click", event);
+};
+
+const handleFocus = (event: FocusEvent) => {
+  emit("focus", event);
+};
+
+const handleBlur = (event: FocusEvent) => {
+  emit("blur", event);
+};
+
+const handleToggle = (event: Event) => {
+  const toggleEvent = event as ButtonToggleEvent;
+  emit("toggle", toggleEvent.detail);
+  emit("update:pressed", toggleEvent.detail.pressed);
+};
+
+// Watch for pressed prop changes and sync with web component
+// This ensures two-way binding works correctly
+watch(
+  () => props.pressed,
+  (newPressed) => {
+    if (buttonFxRef.value && props.toggle) {
+      (buttonFxRef.value as any).pressed = newPressed;
+    }
+  }
+);
+</script>

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

@@ -0,0 +1,5 @@
+import VueButtonFx from './VueButtonFx.vue';
+import type { ButtonFxProps as VueButtonFxProps } from '../core/_ButtonFx';
+
+export { VueButtonFx };
+export type { VueButtonFxProps };

package/src/components/Card/core/Card.ts

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