agnosticui-core 2.0.0-alpha.2

package/src/components/Tooltip/styled/MinimalTooltip.ts

@@ -0,0 +1,344 @@
+/**
+ * AgnosticUI v2 Minimal Tooltip - Self-contained styled component
+ *
+ * A clean, minimal tooltip with subtle styling and smooth animations.
+ * Based on the canonical Tooltip implementation with embedded styling.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { computePosition, autoUpdate, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';
+
+export class MinimalTooltip extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    #tooltip {
+      display: none;
+      position: absolute;
+      z-index: var(--ag-z-index-modal, 1000);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--ag-motion-fast, 0.15s) ease-in-out;
+
+      /* Minimal styling */
+      background: var(--tooltip-bg, #1f2937);
+      color: var(--tooltip-color, #ffffff);
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      max-inline-size: 250px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      line-height: 1.4;
+      text-align: center;
+    }
+
+    #tooltip[data-show] {
+      display: block;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    #arrow {
+      position: absolute;
+      background: var(--tooltip-bg, #1f2937);
+      width: var(--ag-space-2, 0.5rem);
+      height: var(--ag-space-2, 0.5rem);
+      transform: rotate(45deg);
+      z-index: -1;
+    }
+
+    /* Theme support using CSS variables from playground */
+    [data-theme="dark"] minimal-tooltip #tooltip,
+    :host-context([data-theme="dark"]) #tooltip {
+      --tooltip-bg: #374151;
+      --tooltip-color: #f9fafb;
+      --tooltip-border: #4b5563;
+    }
+
+    [data-theme="light"] minimal-tooltip #tooltip,
+    :host-context([data-theme="light"]) #tooltip,
+    #tooltip {
+      --tooltip-bg: #1f2937;
+      --tooltip-color: #ffffff;
+      --tooltip-border: #374151;
+    }
+
+    /* System preference fallback */
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) minimal-tooltip #tooltip,
+      :host-context(:root:not([data-theme])) #tooltip {
+        --tooltip-bg: #374151;
+        --tooltip-color: #f9fafb;
+        --tooltip-border: #4b5563;
+      }
+    }
+
+    /* High contrast mode */
+    @media (prefers-contrast: high) {
+      #tooltip {
+        border: 1px solid var(--tooltip-color, #ffffff);
+        font-weight: 600;
+      }
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      #tooltip {
+        transition: none;
+      }
+    }
+  `;
+
+  @property({ type: String })
+  declare content: string;
+
+  @property({ type: String, reflect: true })
+  declare placement: Placement;
+
+  @property({ type: Number })
+  declare distance: number;
+
+  @property({ type: Number })
+  declare skidding: number;
+
+  @property({ type: String })
+  declare trigger: string;
+
+  @property({ type: Boolean, reflect: true })
+  declare disabled: boolean;
+
+  @state()
+  private declare _open: boolean;
+
+  @query('#tooltip')
+  tooltipElement: HTMLElement | undefined;
+
+  @query('#arrow')
+  arrowElement: HTMLElement | undefined;
+
+  private _cleanup: (() => void) | undefined;
+  private _hideTimeout: number | undefined;
+
+  constructor() {
+    super();
+    this.content = '';
+    this.placement = 'top';
+    this.distance = 8;
+    this.skidding = 0;
+    this.trigger = 'hover focus';
+    this.disabled = false;
+    this._open = false;
+  }
+
+  firstUpdated() {
+    this._setupEventListeners();
+    this._setupARIA();
+  }
+
+  private _setupEventListeners() {
+    const triggerElement = this.firstElementChild as HTMLElement;
+    if (!triggerElement) return;
+
+    if (this.trigger.includes('hover')) {
+      this.addEventListener('mouseenter', this._handleMouseEnter);
+      this.addEventListener('mouseleave', this._handleMouseLeave);
+    }
+    if (this.trigger.includes('focus')) {
+      triggerElement.addEventListener('focus', this._handleFocus);
+      triggerElement.addEventListener('blur', this._handleBlur);
+    }
+    if (this.trigger.includes('click')) {
+      triggerElement.addEventListener('click', this._handleClick);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._removeEventListeners();
+    document.removeEventListener('keydown', this._handleDocumentKeyDown);
+  }
+
+  private _setupARIA() {
+    const triggerElement = this.firstElementChild as HTMLElement;
+    if (triggerElement) {
+      triggerElement.setAttribute('aria-describedby', 'tooltip');
+    }
+  }
+
+  private _removeEventListeners() {
+    const triggerElement = this.firstElementChild as HTMLElement;
+    if (triggerElement) {
+      this.removeEventListener('mouseenter', this._handleMouseEnter);
+      this.removeEventListener('mouseleave', this._handleMouseLeave);
+      triggerElement.removeEventListener('focus', this._handleFocus);
+      triggerElement.removeEventListener('blur', this._handleBlur);
+      triggerElement.removeEventListener('click', this._handleClick);
+    }
+  }
+
+  private _handleMouseEnter = () => {
+    if (!this.disabled) {
+      clearTimeout(this._hideTimeout);
+      this.show();
+    }
+  };
+
+  private _handleMouseLeave = () => {
+    if (!this.disabled) {
+      this._hideTimeout = window.setTimeout(() => {
+        this.hide();
+      }, 100);
+    }
+  };
+
+  private _handleFocus = () => {
+    if (!this.disabled) {
+      this.show();
+    }
+  };
+
+  private _handleBlur = () => {
+    if (!this.disabled) {
+      this.hide();
+    }
+  };
+
+  private _handleClick = () => {
+    if (!this.disabled) {
+      if (this._open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+  };
+
+  private _handleDocumentKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this._open) {
+      this.hide();
+    }
+  };
+
+  updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('_open')) {
+      if (this._open) {
+        document.addEventListener('keydown', this._handleDocumentKeyDown);
+        this.updateComplete.then(() => {
+          this._startPositioning();
+        });
+        this.dispatchEvent(new CustomEvent('show'));
+      } else {
+        this._stopPositioning();
+        document.removeEventListener('keydown', this._handleDocumentKeyDown);
+        this.dispatchEvent(new CustomEvent('hide'));
+      }
+    }
+  }
+
+  private _startPositioning() {
+    const tooltipElement = this.shadowRoot?.querySelector('#tooltip') as HTMLElement;
+    const arrowElement = this.shadowRoot?.querySelector('#arrow') as HTMLElement;
+
+    if (!tooltipElement || !arrowElement) return;
+
+    const triggerElement = this.firstElementChild as HTMLElement;
+    if (!triggerElement) return;
+
+    this._updatePosition();
+
+    this._cleanup = autoUpdate(triggerElement, tooltipElement, () => {
+      this._updatePosition();
+    });
+  }
+
+  private _stopPositioning() {
+    this._cleanup?.();
+    this._cleanup = undefined;
+  }
+
+  private async _updatePosition() {
+    const tooltipElement = this.shadowRoot?.querySelector('#tooltip') as HTMLElement;
+    const arrowElement = this.shadowRoot?.querySelector('#arrow') as HTMLElement;
+
+    if (!tooltipElement || !arrowElement) return;
+
+    const triggerElement = this.firstElementChild as HTMLElement;
+    if (!triggerElement) return;
+
+    const { x, y, placement, middlewareData } = await computePosition(
+      triggerElement,
+      tooltipElement,
+      {
+        placement: this.placement,
+        middleware: [
+          offset({ mainAxis: this.distance, crossAxis: this.skidding }),
+          flip(),
+          shift({ padding: 8 }),
+          arrow({ element: arrowElement }),
+        ],
+      }
+    );
+
+    Object.assign(tooltipElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+
+    const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {};
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[placement.split('-')[0]];
+
+    Object.assign(arrowElement.style, {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      right: '',
+      bottom: '',
+      [staticSide as string]: '-4px',
+    });
+  }
+
+  show = () => {
+    if (this._open || this.disabled) return;
+    this._open = true;
+  }
+
+  hide = () => {
+    if (!this._open) return;
+    this._open = false;
+  }
+
+  toggle = () => {
+    this._open ? this.hide() : this.show();
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+      <div
+        id="tooltip"
+        part="base"
+        role="tooltip"
+        class="tooltip"
+        ?data-show=${this._open}
+        @mouseenter="${() => clearTimeout(this._hideTimeout)}"
+        @mouseleave="${this.hide}"
+      >
+        <slot name="content">${this.content}</slot>
+        <div id="arrow" part="arrow"></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('minimal-tooltip', MinimalTooltip);

package/src/components/Tooltip/styled/index.ts

@@ -0,0 +1,2 @@
+// Self-contained styled tooltip components
+export { MinimalTooltip } from './MinimalTooltip.js';

package/src/components/Tooltip/vue/VueTooltip.vue

@@ -0,0 +1,86 @@
+<template>
+  <ag-tooltip
+    ref="tooltipRef"
+    :content="content"
+    :placement="placement"
+    :distance="distance"
+    :skidding="skidding"
+    :trigger="trigger"
+    .disabled="disabled"
+    @show="handleShow"
+    @hide="handleHide"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type {
+  TooltipProps,
+  TooltipShowEventDetail,
+  TooltipHideEventDetail,
+} from "../core/Tooltip";
+import "../core/Tooltip"; // Registers the ag-tooltip web component
+
+// Omit callback props (Vue uses emits instead)
+export interface VueTooltipProps
+  extends Omit<TooltipProps, "onShow" | "onHide"> {}
+
+// Define props with defaults
+withDefaults(defineProps<VueTooltipProps>(), {
+  content: "",
+  placement: "top",
+  distance: 8,
+  skidding: 0,
+  trigger: "hover focus",
+  disabled: false,
+});
+
+// Define emits for all events
+const emit = defineEmits<{
+  show: [detail: TooltipShowEventDetail];
+  hide: [detail: TooltipHideEventDetail];
+}>();
+
+// Template ref
+const tooltipRef = ref<
+  HTMLElement & {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+  }
+>();
+
+// Bridge handlers for custom events
+const handleShow = (event: Event) => {
+  const showEvent = event as CustomEvent<TooltipShowEventDetail>;
+  emit("show", showEvent.detail);
+};
+
+const handleHide = (event: Event) => {
+  const hideEvent = event as CustomEvent<TooltipHideEventDetail>;
+  emit("hide", hideEvent.detail);
+};
+
+// Expose imperative methods
+const show = () => {
+  tooltipRef.value?.show();
+};
+
+const hide = () => {
+  tooltipRef.value?.hide();
+};
+
+const toggle = () => {
+  tooltipRef.value?.toggle();
+};
+
+// Expose methods for parent components
+defineExpose({
+  show,
+  hide,
+  toggle,
+});
+</script>

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

@@ -0,0 +1,31 @@
+export { default } from './VueTooltip.vue';
+export { default as VueTooltip } from './VueTooltip.vue';
+
+// Import types from core to ensure consistency
+import type { TooltipProps, TooltipShowEvent, TooltipHideEvent } from '../core/Tooltip';
+
+/**
+ * Vue-specific props interface derived from core TooltipProps
+ *
+ * This ensures Vue wrapper stays in sync with core component API.
+ * We omit onShow/onHide from base props since Vue uses @show/@hide event binding.
+ */
+export interface VueTooltipProps extends Omit<TooltipProps, 'onShow' | 'onHide'> {
+  // All core props are inherited: content, placement, distance, skidding, trigger, disabled
+}
+
+/**
+ * Props interface with event handlers for programmatic usage
+ * (Storybook, testing, imperative APIs)
+ *
+ * The core component dispatches 'show' and 'hide' events:
+ *   this.dispatchEvent(new CustomEvent('show'))  → onShow handler
+ *   this.dispatchEvent(new CustomEvent('hide'))  → onHide handler
+ */
+export interface VueTooltipPropsWithEvents extends VueTooltipProps {
+  onShow?: (event: TooltipShowEvent) => void;
+  onHide?: (event: TooltipHideEvent) => void;
+}
+
+// Re-export event types for consumer convenience
+export type { TooltipShowEvent, TooltipHideEvent } from '../core/Tooltip';

package/src/components/VisuallyHidden/core/VisuallyHidden.ts

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

package/src/components/VisuallyHidden/core/_VisuallyHidden.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @summary A component for visually hiding content while keeping it screen-reader accessible.
+ * @slot - The content to be visually hidden.
+ */
+export class VisuallyHidden extends LitElement {
+  static styles = css`
+    :host {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/components/VisuallyHidden/react/ReactVisuallyHidden.tsx

@@ -0,0 +1,14 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { VisuallyHidden } from '../core/VisuallyHidden';
+
+export interface ReactVisuallyHiddenProps {
+  children?: React.ReactNode;
+}
+
+export const ReactVisuallyHidden = createComponent({
+  tagName: 'ag-visually-hidden',
+  elementClass: VisuallyHidden,
+  react: React,
+  events: {},
+});

package/src/components/VisuallyHidden/vue/VueVisuallyHidden.vue

@@ -0,0 +1,10 @@
+<template>
+  <ag-visually-hidden>
+    <slot />
+  </ag-visually-hidden>
+</template>
+
+<script setup lang="ts">
+// By importing the barrel file, we register the web component with Vue
+import '../core/VisuallyHidden';
+</script>

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

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

package/src/components/react/index.ts

@@ -0,0 +1,50 @@
+// Re-export all React components from AgnosticUI Core
+export * from '../Accordion/react';
+export * from '../Alert/react';
+export * from '../AspectRatio/react';
+export * from '../Avatar/react';
+export * from '../Badge/react';
+export * from '../Breadcrumb/react';
+export * from '../Button/react';
+export * from '../Card/react';
+export * from '../Checkbox/react';
+export * from '../Collapsible/react';
+export * from '../Combobox/react';
+export * from '../Dialog/react';
+export * from '../Divider/react';
+export * from '../Drawer/react';
+export * from '../EmptyState/react';
+export * from '../Fieldset/react';
+export * from '../Flex/react';
+export * from '../Header/react';
+export * from '../Icon/react';
+export * from '../IconButton/react';
+export * from '../Input/react';
+export * from '../Kbd/react';
+export * from '../Link/react';
+export * from '../Loader/react';
+export * from '../Menu/react';
+export * from '../Pagination/react';
+export * from '../Popover/react';
+export * from '../Progress/react';
+export * from '../ProgressRing/react/ReactProgressRing';
+export * from '../Radio/react';
+export * from '../Rating/react';
+export * from '../Select/react';
+export * from '../SkeletonLoader/react';
+export * from '../Slider/react';
+export * from '../Spinner/react';
+export * from '../Tabs/react';
+export * from '../Tag/react';
+export * from '../Toast/react';
+export * from '../Toggle/react';
+export * from '../Tooltip/react';
+export * from '../Timeline/react';
+export * from '../ScrollToButton/react/ReactScrollToButton';
+export * from '../Mark/react/ReactMark';
+export * from '../MessageBubble/react/ReactMessageBubble';
+export * from '../IntlFormatter/react/ReactIntlFormatter';
+export * from '../VisuallyHidden/react/ReactVisuallyHidden';
+export * from '../ScrollProgress/react/ReactScrollProgress';
+export * from '../ButtonFx/react/ReactButtonFx';
+export * from '../IconButtonFx/react/ReactIconButtonFx';

package/src/components/shared/CloseButton/CloseButton.ts

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