agnosticui-core 2.0.0-alpha.2

package/src/components/IconButton/svelte/SvelteIconButtonDemo.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+  import '../core/_IconButton';
+
+  let closePressed = false;
+  let menuPressed = false;
+  let saving = false;
+  let actions: string[] = [];
+
+  function handleClose() {
+    closePressed = !closePressed;
+    addAction(`Close button ${closePressed ? 'pressed' : 'released'}`);
+  }
+
+  function handleMenu() {
+    menuPressed = !menuPressed;
+    addAction(`Menu button ${menuPressed ? 'opened' : 'closed'}`);
+  }
+
+  async function handleSave() {
+    if (saving) return;
+
+    saving = true;
+    addAction('Save started...');
+
+    // Simulate async operation
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    saving = false;
+    addAction('Save completed!');
+  }
+
+  function handleEdit() {
+    addAction('Edit button clicked');
+  }
+
+  function handleDelete() {
+    if (confirm('Are you sure you want to delete this item?')) {
+      addAction('Item deleted');
+    }
+  }
+
+  function addAction(message: string) {
+    actions = [
+      `${new Date().toLocaleTimeString()}: ${message}`,
+      ...actions.slice(0, 9) // Keep last 10 actions
+    ];
+  }
+
+  function clearActions() {
+    actions = [];
+  }
+</script>
+
+<div class="demo-container">
+  <h2>IconButton Svelte Integration Demo</h2>
+
+  <div class="demo-section">
+    <h3>Basic Icon Buttons</h3>
+    <div class="button-group">
+      <ag-icon-button
+        label="Close"
+        unicode="×"
+        variant="ghost"
+        on:icon-button-click={handleClose}
+      ></ag-icon-button>
+
+      <ag-icon-button
+        label="Menu"
+        unicode="☰"
+        pressed={menuPressed}
+        on:icon-button-click={handleMenu}
+      ></ag-icon-button>
+
+      <ag-icon-button
+        label="Edit"
+        unicode="✎"
+        variant="primary"
+        on:icon-button-click={handleEdit}
+      ></ag-icon-button>
+
+      <ag-icon-button
+        label="Delete"
+        unicode="🗑"
+        variant="danger"
+        on:icon-button-click={handleDelete}
+      ></ag-icon-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Custom Icon with SVG</h3>
+    <div class="button-group">
+      <ag-icon-button
+        label="Settings"
+        variant="secondary"
+        on:icon-button-click={() => addAction('Settings opened')}
+      >
+        <svg viewBox="0 0 24 24" style="width: 1em; height: 1em; fill: currentColor;">
+          <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11.03L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11.03C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
+        </svg>
+      </ag-icon-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Different Sizes</h3>
+    <div class="button-group">
+      <ag-icon-button
+        label="Extra small"
+        unicode="×"
+        size="xs"
+        on:icon-button-click={() => addAction('XS button clicked')}
+      ></ag-icon-button>
+      <ag-icon-button
+        label="Small"
+        unicode="×"
+        size="sm"
+        on:icon-button-click={() => addAction('Small button clicked')}
+      ></ag-icon-button>
+      <ag-icon-button
+        label="Medium"
+        unicode="×"
+        size="md"
+        on:icon-button-click={() => addAction('Medium button clicked')}
+      ></ag-icon-button>
+      <ag-icon-button
+        label="Large"
+        unicode="×"
+        size="lg"
+        on:icon-button-click={() => addAction('Large button clicked')}
+      ></ag-icon-button>
+      <ag-icon-button
+        label="Extra large"
+        unicode="×"
+        size="xl"
+        on:icon-button-click={() => addAction('XL button clicked')}
+      ></ag-icon-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Loading State</h3>
+    <div class="button-group">
+      <ag-icon-button
+        label="Save"
+        unicode="💾"
+        loading={saving}
+        disabled={saving}
+        variant="primary"
+        on:icon-button-click={handleSave}
+      >
+        <span slot="loading" style="font-size: 0.75em;">Saving...</span>
+      </ag-icon-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Disabled State</h3>
+    <div class="button-group">
+      <ag-icon-button
+        label="Disabled button"
+        unicode="🚫"
+        disabled={true}
+        on:icon-button-click={() => addAction('This should not fire')}
+      ></ag-icon-button>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3>Action Log</h3>
+    <div class="action-log">
+      <button on:click={clearActions} class="clear-button" disabled={actions.length === 0}>
+        Clear Log
+      </button>
+      {#if actions.length === 0}
+        <p class="empty-state">No actions yet. Click some buttons above!</p>
+      {:else}
+        <ul>
+          {#each actions as action}
+            <li>{action}</li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .demo-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .demo-section {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    background: #fafafa;
+  }
+
+  .demo-section h3 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .action-log {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 1rem;
+    background: white;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .clear-button {
+    padding: 0.5rem 1rem;
+    background: #f0f0f0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 1rem;
+  }
+
+  .clear-button:hover:not(:disabled) {
+    background: #e0e0e0;
+  }
+
+  .clear-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .empty-state {
+    color: #666;
+    font-style: italic;
+    margin: 0;
+  }
+
+  .action-log ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .action-log li {
+    padding: 0.25rem 0;
+    border-bottom: 1px solid #f0f0f0;
+    font-family: monospace;
+    font-size: 0.9rem;
+  }
+
+  .action-log li:last-child {
+    border-bottom: none;
+  }
+
+  /* Custom styling for our icon buttons */
+  :global(ag-icon-button) {
+    --ag-icon-button-padding: 0.5rem;
+    --ag-icon-button-border-radius: 0.25rem;
+    --ag-icon-button-font-size: 1rem;
+  }
+
+  /* Variant-specific styling */
+  :global(ag-icon-button[variant="primary"]) {
+    --ag-icon-button-background: #0066cc;
+    --ag-icon-button-color: white;
+    --ag-icon-button-background-hover: #0052a3;
+  }
+
+  :global(ag-icon-button[variant="danger"]) {
+    --ag-icon-button-background: transparent;
+    --ag-icon-button-color: #d73a49;
+    --ag-icon-button-background-hover: rgba(215, 58, 73, 0.1);
+    --ag-icon-button-border-hover: 1px solid #d73a49;
+  }
+
+  :global(ag-icon-button[variant="secondary"]) {
+    --ag-icon-button-background: #f6f8fa;
+    --ag-icon-button-color: #24292f;
+    --ag-icon-button-border: 1px solid #d0d7de;
+    --ag-icon-button-background-hover: #f3f4f6;
+  }
+</style>

package/src/components/IconButton/svelte/types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Svelte TypeScript definitions for ag-icon-button web component
+ */
+
+declare global {
+  namespace svelteHTML {
+    interface IntrinsicElements {
+      'ag-icon-button': {
+        /** Required accessible name for the button */
+        label: string;
+
+        /** Icon identifier or name (for icon systems) */
+        icon?: string;
+
+        /** Unicode symbol for simple icons (×, ☰, etc.) */
+        unicode?: string;
+
+        /** Button size variant */
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+        /** Visual variant */
+        variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+
+        /** Button type */
+        type?: 'button' | 'submit' | 'reset';
+
+        /** Disabled state */
+        disabled?: boolean;
+
+        /** Pressed state for toggle buttons */
+        pressed?: boolean;
+
+        /** Loading state */
+        loading?: boolean;
+
+        /** Additional HTML attributes */
+        [key: `data-${string}`]: string;
+        class?: string;
+        id?: string;
+        style?: string;
+        tabindex?: number;
+
+        /** Custom event handlers */
+        'on:icon-button-click'?: (event: CustomEvent<{
+          label: string;
+          pressed: boolean;
+          originalEvent: MouseEvent | TouchEvent;
+        }>) => void;
+
+        'on:icon-button-activate'?: (event: CustomEvent<{
+          label: string;
+          pressed: boolean;
+          originalEvent: KeyboardEvent;
+        }>) => void;
+
+        /** Standard DOM event handlers */
+        'on:blur'?: (event: FocusEvent) => void;
+        'on:focus'?: (event: FocusEvent) => void;
+        'on:keydown'?: (event: KeyboardEvent) => void;
+        'on:keyup'?: (event: KeyboardEvent) => void;
+        'on:mousedown'?: (event: MouseEvent) => void;
+        'on:mouseup'?: (event: MouseEvent) => void;
+        'on:touchstart'?: (event: TouchEvent) => void;
+        'on:touchend'?: (event: TouchEvent) => void;
+      };
+    }
+  }
+}
+
+export {};

package/src/components/IconButton/vue/VueIconButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <ag-icon-button
+    ref="iconButtonRef"
+    .disabled="disabled"
+    .pressed="pressed"
+    .loading="loading"
+    :label="ariaLabel || label"
+    :icon="icon"
+    :unicode="unicode"
+    :size="size"
+    :variant="variant"
+    :type="type"
+    @icon-button-click="handleClick"
+    @icon-button-activate="handleActivate"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-icon-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type {
+  IconButtonProps,
+  IconButtonClickEventDetail,
+  IconButtonActivateEventDetail,
+} from "../core/IconButton";
+import "../core/IconButton"; // Registers the ag-icon-button web component
+
+// Omit callback props (Vue uses emits instead)
+export interface VueIconButtonProps
+  extends Omit<IconButtonProps, "onIconButtonClick" | "onIconButtonActivate"> {
+  /** Additional ARIA label (will override label prop) */
+  ariaLabel?: string;
+}
+
+// Define props with defaults
+withDefaults(defineProps<VueIconButtonProps>(), {
+  size: "md",
+  variant: "ghost",
+  type: "button",
+  disabled: false,
+  pressed: false,
+  loading: false,
+});
+
+// Define emits for all events
+const emit = defineEmits<{
+  "icon-button-click": [detail: IconButtonClickEventDetail];
+  "icon-button-activate": [detail: IconButtonActivateEventDetail];
+}>();
+
+// Template ref
+const iconButtonRef = ref<HTMLElement>();
+
+// Bridge handlers for custom events
+const handleClick = (event: Event) => {
+  const clickEvent = event as CustomEvent<IconButtonClickEventDetail>;
+  emit("icon-button-click", clickEvent.detail);
+};
+
+const handleActivate = (event: Event) => {
+  const activateEvent = event as CustomEvent<IconButtonActivateEventDetail>;
+  emit("icon-button-activate", activateEvent.detail);
+};
+</script>

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

@@ -0,0 +1,2 @@
+export { default } from './VueIconButton.vue';
+export { default as VueIconButton } from './VueIconButton.vue';

package/src/components/IconButtonFx/core/IconButtonFx.ts

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

package/src/components/IconButtonFx/core/_IconButtonFx.ts

@@ -0,0 +1,228 @@
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { AgIconButton, type IconButtonProps } from '../../IconButton/core/_IconButton.js';
+import type {
+  IconButtonClickEvent,
+  IconButtonActivateEvent,
+} from '../../IconButton/core/_IconButton.js';
+import { motionStyles } from '../../../styles/motion.styles.js';
+import type { FxProps } from '../../../types/fx.js';
+
+// Re-export event types for convenience
+export type { IconButtonClickEvent, IconButtonActivateEvent };
+
+// Combined props for IconButtonFx
+export interface IconButtonFxProps extends IconButtonProps, FxProps {}
+
+/**
+ * IconButtonFx - IconButton with CSS animation effects
+ *
+ * Extends AgIconButton to add optional CSS-only animation effects.
+ * Inherits all IconButton functionality and styling.
+ *
+ * Features:
+ * - CSS-only FX effects (reuses motionStyles keyframes)
+ * - Full control over button hover states
+ * - Automatic reduced-motion support
+ * - Can override IconButton's default hover behaviors
+ */
+// @ts-ignore - TS2417: Lit supports arrays for static styles even when parent has single CSSResult
+export class IconButtonFx extends AgIconButton implements FxProps {
+  static styles = [
+    AgIconButton.styles,
+    motionStyles,
+    css`
+      /* ========================================
+         OVERRIDE PARENT HOVER BACKGROUNDS
+         These compete with FX effects
+         ======================================== */
+
+      :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-dark);
+      }
+
+      :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);
+      }
+
+      /* 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-grow 200ms var(--ag-fx-ease-spring-lg) 0ms,
+          ag-fx-wobble 200ms var(--ag-fx-ease-spring-md) 200ms;
+      }
+
+      /* 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,
+        button.ag-fx-grow,
+        button.ag-fx-shrink,
+        button.ag-fx-push,
+        button.ag-fx-shake,
+        button.ag-fx-wobble,
+        button.ag-fx-pulse-wobble {
+          animation-duration: 0.01ms !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `
+  ];
+
+  // FX props
+  @property({ type: String })
+  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;
+  }
+
+  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {
+    super.firstUpdated?.(changedProperties);
+    // Apply initial FX setup after first render
+    this._applyFxClasses();
+    this._applyFxCustomProperties();
+  }
+
+  override 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/IconButtonFx/react/ReactIconButtonFx.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createComponent, type EventName } from '@lit/react';
+import {
+  IconButtonFx,
+  type IconButtonFxProps,
+  type IconButtonClickEvent,
+  type IconButtonActivateEvent,
+} from '../core/IconButtonFx';
+
+export interface ReactIconButtonFxProps extends IconButtonFxProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export const ReactIconButtonFx = createComponent({
+  tagName: 'ag-icon-button-fx',
+  elementClass: IconButtonFx,
+  react: React,
+  events: {
+    onIconButtonClick: 'icon-button-click' as EventName<IconButtonClickEvent>,
+    onIconButtonActivate: 'icon-button-activate' as EventName<IconButtonActivateEvent>,
+  },
+});
+
+export type { IconButtonClickEvent, IconButtonActivateEvent } from '../core/_IconButtonFx';