agnosticui-core 2.0.0-alpha.2

package/src/components/Timeline/core/_Timeline.ts

@@ -0,0 +1,409 @@
+// v2/lib/src/components/Timeline/core/_Timeline.ts
+import { LitElement, html, css, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+/**
+ * Props interface for AgTimeline component
+ */
+export interface AgTimelineProps {
+  /** Orientation of the timeline */
+  orientation?: 'horizontal' | 'vertical';
+  /** Visual variant for styling connectors and markers */
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+  /** Whether to use compact spacing */
+  compact?: boolean;
+  /** ARIA label for the timeline */
+  ariaLabel?: string | null;
+}
+
+/**
+ * AgTimeline - A semantic timeline component for displaying chronological events
+ *
+ * @element ag-timeline
+ *
+ * @slot - Default slot for ag-timeline-item elements
+ *
+ * @csspart ag-timeline-container - The main timeline container (ul element)
+ *
+ * @cssprop --ag-timeline-connector-color - Color of connector lines (default: var(--ag-border))
+ * @cssprop --ag-timeline-connector-width - Width of connector lines (default: 2px)
+ * @cssprop --ag-timeline-vertical-spacing - Spacing between timeline items in vertical orientation (default: var(--ag-space-4))
+ */
+export class AgTimeline extends LitElement implements AgTimelineProps {
+  // ──────────────────────────────────────────────────────────────
+  // Public Properties
+  // ──────────────────────────────────────────────────────────────
+  @property({ type: String, reflect: true })
+  declare orientation: 'horizontal' | 'vertical';
+
+  @property({ type: String, reflect: true })
+  declare variant: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+
+  @property({ type: Boolean })
+  declare compact: boolean;
+
+  @property({ type: String, attribute: 'aria-label' })
+  declare ariaLabel: string | null;
+
+  // ──────────────────────────────────────────────────────────────
+  // Constructor
+  // ──────────────────────────────────────────────────────────────
+  constructor() {
+    super();
+    this.orientation = 'horizontal';
+    this.variant = '';
+    this.compact = false;
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Styles
+  // ──────────────────────────────────────────────────────────────
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .timeline-container {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      position: relative;
+    }
+
+    slot {
+      display: contents;
+    }
+
+    /* Horizontal orientation (default) */
+    :host([orientation="horizontal"]) .timeline-container {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    /* Vertical orientation */
+    :host([orientation="vertical"]) .timeline-container {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  `;
+
+  // ──────────────────────────────────────────────────────────────
+  // Lifecycle
+  // ──────────────────────────────────────────────────────────────
+  override updated(changedProperties: Map<PropertyKey, unknown>) {
+    super.updated(changedProperties);
+
+    // Update child items when properties change
+    if (changedProperties.has('orientation') || changedProperties.has('variant')) {
+      this._updateChildItems();
+    }
+  }
+
+  private _updateChildItems() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true })
+      .filter(el => el.tagName.toLowerCase() === 'ag-timeline-item') as AgTimelineItem[];
+
+    items.forEach((item, index) => {
+      // Pass orientation down to children
+      item.setAttribute('orientation', this.orientation);
+      if (this.variant) {
+        item.setAttribute('variant', this.variant);
+      }
+      // Mark first and last items for styling
+      item.toggleAttribute('first', index === 0);
+      item.toggleAttribute('last', index === items.length - 1);
+    });
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Main Render
+  // ──────────────────────────────────────────────────────────────
+  override render() {
+    return html`
+      <ul 
+        class="timeline-container"
+        part="ag-timeline-container"
+        role="list"
+        aria-label=${this.ariaLabel ?? nothing}
+      >
+        <slot @slotchange=${this._updateChildItems}></slot>
+      </ul>
+    `;
+  }
+}
+
+/**
+ * Props interface for AgTimelineItem component
+ */
+export interface AgTimelineItemProps {
+  /** Inherited from parent timeline */
+  orientation?: 'horizontal' | 'vertical';
+  /** Inherited from parent timeline */
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+  /** ARIA label for the marker icon */
+  markerAriaLabel?: string;
+}
+
+/**
+ * AgTimelineItem - Individual item within a timeline
+ * 
+ * @element ag-timeline-item
+ * 
+ * @slot ag-start - Content positioned at the start (e.g., date/label)
+ * @slot ag-marker - Content for the center marker (e.g., icon)
+ * @slot ag-end - Content positioned at the end (e.g., description)
+ * 
+ * @csspart ag-item-container - The main item container (li element)
+ * @csspart ag-start - The start content wrapper
+ * @csspart ag-marker - The marker wrapper
+ * @csspart ag-end - The end content wrapper
+ * @csspart ag-connector - The connector line element
+ * 
+ * @cssprop --ag-timeline-start-align - Vertical alignment of start content (default: start)
+ * @cssprop --ag-timeline-end-align - Vertical alignment of end content (default: start)
+ */
+export class AgTimelineItem extends LitElement {
+  // ──────────────────────────────────────────────────────────────
+  // Public Properties
+  // ──────────────────────────────────────────────────────────────
+  @property({ type: String, reflect: true })
+  declare orientation: 'horizontal' | 'vertical';
+
+  @property({ type: String, reflect: true })
+  declare variant: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+
+  @property({ type: String, attribute: 'marker-aria-label' })
+  declare markerAriaLabel: string | null;
+
+  @property({ type: Boolean, reflect: true })
+  declare first: boolean;
+
+  @property({ type: Boolean, reflect: true })
+  declare last: boolean;
+
+  // ──────────────────────────────────────────────────────────────
+  // Constructor
+  // ──────────────────────────────────────────────────────────────
+  constructor() {
+    super();
+    this.orientation = 'horizontal';
+    this.variant = '';
+    this.first = false;
+    this.last = false;
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Styles
+  // ──────────────────────────────────────────────────────────────
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    :host([orientation="horizontal"]) {
+      flex: 1;
+    }
+
+    .item-container {
+      display: grid;
+      position: relative;
+      align-items: center;
+    }
+
+    /* Horizontal layout - 3x3 grid */
+    :host([orientation="horizontal"]) .item-container {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      grid-template-rows: auto auto auto;
+      justify-items: center;
+      align-items: center;
+    }
+
+    /* Vertical layout - 3x3 grid */
+    /* Vertical layout - Flush alignment */
+    :host([orientation="vertical"]) .item-container {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      /* Rows: connector-before (0), marker (auto), connector-after + spacing (minmax ensures minimum gap between items) */
+      grid-template-rows: 0 auto minmax(var(--ag-timeline-vertical-spacing, var(--ag-space-4)), 1fr);
+      align-items: start;
+      justify-items: center;
+    }
+
+    /* Start slot positioning */
+    .ag-start {
+      margin: var(--ag-space-1);
+      /* Reset line-height for slotted content */
+      line-height: normal;
+    }
+
+    :host([orientation="horizontal"]) .ag-start {
+      grid-column: 1 / 4;
+      grid-row: 1 / 2;
+      align-self: end;
+      justify-self: center;
+    }
+
+    :host([orientation="vertical"]) .ag-start {
+      grid-column: 1 / 2;
+      grid-row: 2 / 4;
+      align-self: var(--ag-timeline-start-align, start);
+      justify-self: end;
+      margin: 0 var(--ag-space-2) 0 0;
+    }
+
+    /* Marker slot positioning */
+    .ag-marker {
+      grid-column: 2 / 3;
+      grid-row: 2 / 3;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      /* Reset line-height for slotted content */
+      line-height: normal;
+    }
+
+    /* End slot positioning */
+    .ag-end {
+      margin: var(--ag-space-1);
+      /* Reset line-height for slotted content */
+      line-height: normal;
+    }
+
+    :host([orientation="horizontal"]) .ag-end {
+      grid-column: 1 / 4;
+      grid-row: 3 / 4;
+      align-self: start;
+      justify-self: center;
+    }
+
+    :host([orientation="vertical"]) .ag-end {
+      grid-column: 3 / 4;
+      grid-row: 2 / 4;
+      align-self: var(--ag-timeline-end-align, start);
+      justify-self: start;
+      margin: 0 0 0 var(--ag-space-2);
+    }
+
+    /* Connector lines */
+    .connector {
+      border: none;
+      background: var(--ag-timeline-connector-color, var(--ag-border));
+      margin: 0;
+    }
+
+    .connector-before {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+    }
+
+    .connector-after {
+      grid-column: 3 / 4;
+      grid-row: 2 / 3;
+    }
+
+    /* Horizontal connectors */
+    :host([orientation="horizontal"]) .connector {
+      width: 100%;
+      height: var(--ag-timeline-connector-width, 2px);
+    }
+
+    :host([orientation="horizontal"][first]) .connector-before {
+      border-radius: var(--ag-radius-full) 0 0 var(--ag-radius-full);
+    }
+
+    :host([orientation="horizontal"][last]) .connector-after {
+      border-radius: 0 var(--ag-radius-full) var(--ag-radius-full) 0;
+    }
+
+    /* Vertical connectors */
+    :host([orientation="vertical"]) .connector {
+      height: 100%;
+      width: var(--ag-timeline-connector-width, 2px);
+    }
+
+    :host([orientation="vertical"]) .connector-before {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+
+    :host([orientation="vertical"]) .connector-after {
+      grid-column: 2 / 3;
+      grid-row: 2 / 4;
+      z-index: 0;
+    }
+
+    :host([orientation="vertical"][first]) .connector-before {
+      border-radius: var(--ag-radius-full) var(--ag-radius-full) 0 0;
+    }
+
+    :host([orientation="vertical"][last]) .connector-after {
+      border-radius: 0 0 var(--ag-radius-full) var(--ag-radius-full);
+    }
+
+    /* Hide first connector on first item */
+    :host([first]) .connector-before {
+      display: none;
+    }
+
+    /* Hide last connector on last item */
+    :host([last]) .connector-after {
+      display: none;
+    }
+
+    /* Variant colors */
+    :host([variant="primary"]) .connector {
+      background: var(--ag-primary);
+    }
+
+    :host([variant="success"]) .connector {
+      background: var(--ag-success);
+    }
+
+    :host([variant="warning"]) .connector {
+      background: var(--ag-warning);
+    }
+
+    :host([variant="danger"]) .connector {
+      background: var(--ag-danger);
+    }
+
+    :host([variant="monochrome"]) .connector {
+      background: var(--ag-text-muted);
+    }
+  `;
+
+  // ──────────────────────────────────────────────────────────────
+  // Main Render
+  // ──────────────────────────────────────────────────────────────
+  override render() {
+    return html`
+      <li class="item-container" part="ag-item-container" role="listitem">
+        <div class="connector connector-before" part="ag-connector" aria-hidden="true"></div>
+        
+        <div class="ag-start" part="ag-start">
+          <slot name="ag-start"></slot>
+        </div>
+        
+        <div 
+          class="ag-marker" 
+          part="ag-marker"
+          role=${this.markerAriaLabel ? 'img' : nothing}
+          aria-label=${this.markerAriaLabel ?? nothing}
+        >
+          <slot name="ag-marker"></slot>
+        </div>
+        
+        <div class="ag-end" part="ag-end">
+          <slot name="ag-end"></slot>
+        </div>
+        
+        <div class="connector connector-after" part="ag-connector" aria-hidden="true"></div>
+      </li>
+    `;
+  }
+}

package/src/components/Timeline/react/ReactTimeline.tsx

@@ -0,0 +1,34 @@
+// v2/lib/src/components/Timeline/react/Timeline.tsx
+import React from "react";
+import { createComponent } from "@lit/react";
+import {
+  AgTimeline as AgTimelineWC,
+  AgTimelineItem as AgTimelineItemWC,
+} from "../core/Timeline.js";
+import type { AgTimelineProps, AgTimelineItemProps } from "../core/Timeline.js";
+
+// Create React wrapper for Timeline
+export const ReactTimeline = createComponent({
+  tagName: "ag-timeline",
+  elementClass: AgTimelineWC,
+  react: React,
+  events: {
+    onSlotChange: "slotchange",
+  },
+});
+
+// Create React wrapper for TimelineItem
+export const ReactTimelineItem = createComponent({
+  tagName: "ag-timeline-item",
+  elementClass: AgTimelineItemWC,
+  react: React,
+});
+
+// Export types with better names for React context
+export type ReactTimelineProps = AgTimelineProps & {
+  children?: React.ReactNode;
+};
+
+export type ReactTimelineItemProps = AgTimelineItemProps & {
+  children?: React.ReactNode;
+};

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

@@ -0,0 +1,3 @@
+// v2/lib/src/components/Timeline/react/index.ts
+export { ReactTimeline, ReactTimelineItem } from './ReactTimeline.js';
+export type { ReactTimelineProps, ReactTimelineItemProps } from './ReactTimeline.js';

package/src/components/Timeline/vue/Timeline.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// v2/lib/src/components/Timeline/vue/Timeline.vue
+import { ref } from "vue";
+import "../core/Timeline.js"; // Import to register web components
+
+interface Props {
+  orientation?: "horizontal" | "vertical";
+  variant?: "primary" | "success" | "warning" | "danger" | "monochrome" | "";
+  compact?: boolean;
+  responsive?: boolean;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: "horizontal",
+  variant: "",
+  compact: false,
+  responsive: false,
+  ariaLabel: undefined,
+});
+
+const timelineRef = ref<HTMLElement>();
+</script>
+
+<template>
+  <ag-timeline
+    ref="timelineRef"
+    :orientation="orientation"
+    :variant="variant"
+    :compact="compact"
+    :responsive="responsive"
+    :aria-label="ariaLabel"
+  >
+    <slot />
+  </ag-timeline>
+</template>

package/src/components/Timeline/vue/TimelineItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// v2/lib/src/components/Timeline/vue/TimelineItem.vue
+import "../core/Timeline.js"; // Import to register web components
+
+interface Props {
+  markerAriaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  markerAriaLabel: undefined,
+});
+</script>
+
+<template>
+  <ag-timeline-item :marker-aria-label="markerAriaLabel">
+    <span
+      v-if="$slots['ag-start']"
+      slot="ag-start"
+    >
+      <slot name="ag-start"></slot>
+    </span>
+    <span
+      v-if="$slots['ag-marker']"
+      slot="ag-marker"
+    >
+      <slot name="ag-marker"></slot>
+    </span>
+    <span
+      v-if="$slots['ag-end']"
+      slot="ag-end"
+    >
+      <slot name="ag-end"></slot>
+    </span>
+  </ag-timeline-item>
+</template>

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

@@ -0,0 +1,7 @@
+// v2/lib/src/components/Timeline/vue/index.ts
+export { default as VueTimeline } from './Timeline.vue';
+export { default as VueTimelineItem } from './TimelineItem.vue';
+export type { 
+  AgTimelineProps as VueTimelineProps, 
+  AgTimelineItemProps as VueTimelineItemProps 
+} from '../core/Timeline.js';

package/src/components/Toast/core/Toast.ts

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