agnosticui-core 2.0.0-alpha.2

package/src/components/EmptyState/core/_EmptyState.ts

@@ -0,0 +1,233 @@
+import { hasSlotContent } from '../../../utils/slot';
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export type EmptyStateProps = {
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  size?: 'sm' | 'md' | 'lg';
+  bordered?: boolean;
+  rounded?: boolean;
+};
+
+export class AgEmptyState extends LitElement implements EmptyStateProps {
+  @property({ type: String })
+  declare title: string;
+
+  @property({ type: String })
+  declare subtitle: string;
+
+  @property({ type: String, attribute: 'button-text' })
+  declare buttonText: string;
+
+  @property({ type: String, reflect: true })
+  declare size: 'sm' | 'md' | 'lg';
+
+  @property({ type: Boolean })
+  declare bordered: boolean;
+
+  @property({ type: Boolean })
+  declare rounded: boolean;
+
+  @property({ type: Boolean, state: true })
+  private _hasIconSlot = false;
+
+  @property({ type: Boolean, state: true })
+  private _hasActionsSlot = false;
+
+  constructor() {
+    super();
+    this.title = '';
+    this.subtitle = '';
+    this.buttonText = '';
+    this.size = 'md';
+    this.bordered = false;
+    this.rounded = false;
+  }
+
+  private _handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const slotName = slot.name;
+
+    if (slotName === 'icon') {
+      this._hasIconSlot = hasSlotContent(slot);
+    } else if (slotName === 'actions') {
+      this._hasActionsSlot = hasSlotContent(slot);
+    }
+
+    this.requestUpdate();
+  }
+
+  override firstUpdated() {
+    // Initial check for slot content
+    // We need to defer this check to avoid "change in update" warning
+    setTimeout(() => {
+      const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]') as HTMLSlotElement;
+      const actionsSlot = this.shadowRoot?.querySelector('slot[name="actions"]') as HTMLSlotElement;
+
+      const hadIconSlot = this._hasIconSlot;
+      const hadActionsSlot = this._hasActionsSlot;
+
+      this._hasIconSlot = hasSlotContent(iconSlot);
+      this._hasActionsSlot = hasSlotContent(actionsSlot);
+
+      // Only request update if something changed
+      if (hadIconSlot !== this._hasIconSlot || hadActionsSlot !== this._hasActionsSlot) {
+        this.requestUpdate();
+      }
+    }, 0);
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: var(--ag-space-8);
+      background: var(--ag-background-secondary);
+    }
+
+    .empty-bordered {
+      background: transparent;
+      border: var(--ag-border-width-1) solid var(--ag-border-subtle);
+    }
+
+    .empty-rounded {
+      border-radius: var(--ag-radius-lg);
+    }
+
+    /* Icon sizing and containment */
+    .icon {
+      margin-block-end: var(--ag-space-1);
+      color: var(--ag-neutral-400);
+    }
+
+    .icon-inner {
+      width: var(--ag-empty-icon-size, var(--ag-space-10));
+      height: var(--ag-empty-icon-size, var(--ag-space-10));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-inner > ::slotted(*) {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    :host([size="sm"]) {
+      --ag-empty-icon-size: var(--ag-space-8);
+    }
+
+    :host([size="lg"]) {
+      --ag-empty-icon-size: var(--ag-space-12);
+    }
+
+    /* Title */
+    .title {
+      font-size: var(--ag-font-size-xl);
+      margin-block-start: 0;
+      margin-block-end: var(--ag-space-2);
+      line-height: var(--ag-line-height-lg);
+    }
+
+    :host([size="sm"]) .title {
+      font-size: var(--ag-font-size-lg);
+    }
+
+    :host([size="lg"]) .title {
+      font-size: var(--ag-font-size-2x);
+    }
+
+    /* Subtitle */
+    .subtitle {
+      font-size: var(--ag-font-size-base);
+      color: var(--ag-text-muted);
+      /* The title will provide enough gap */
+      margin-block-start: 0;
+      margin-block-end: var(--ag-space-4);
+      line-height: var(--ag-line-height-base);
+    }
+
+    :host([size="sm"]) .subtitle {
+      font-size: var(--ag-font-size-sm);
+      margin-block-end: var(--ag-space-3);
+    }
+
+    :host([size="lg"]) .subtitle {
+      font-size: var(--ag-font-size-md);
+      margin-block-end: var(--ag-space-6);
+    }
+
+    /* Actions */
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ag-space-2);
+      justify-content: center;
+    }
+  `;
+
+  render() {
+    const classes = [
+      'empty',
+      this.bordered ? 'empty-bordered' : '',
+      this.rounded ? 'empty-rounded' : ''
+    ].filter(Boolean).join(' ');
+
+return html`
+      <!-- Main container with a part for the whole component -->
+      <div class="${classes}" role="region" aria-label="Empty state" part="ag-empty-state">
+
+        <!-- Icon section part -->
+        <div class="icon" part="ag-icon">
+          <div class="icon-inner" part="ag-icon-inner">
+            <slot name="icon" part="ag-icon-slot" @slotchange=${this._handleSlotChange}></slot>
+            ${!this._hasIconSlot ? html`
+              <!-- Fallback SVG part -->
+              <svg
+                part="ag-icon-svg"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+              </svg>
+            ` : ''}
+          </div>
+        </div>
+
+        <!-- Title part -->
+        ${this.title ? html`<h3 class="title" part="ag-title">${this.title}</h3>` : ''}
+
+        <!-- Subtitle part -->
+        ${this.subtitle ? html`<p class="subtitle" part="ag-subtitle">${this.subtitle}</p>` : ''}
+
+        <!-- Actions container part -->
+        <div class="actions" part="ag-actions">
+          <slot name="actions" part="ag-actions-slot" @slotchange=${this._handleSlotChange}>
+            ${this.buttonText && !this._hasActionsSlot
+              ? html`
+                <!-- Fallback button part -->
+                <button type="button" part="ag-actions-button">${this.buttonText}</button>
+              `
+              : ''}
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/EmptyState/react/ReactEmptyState.tsx

@@ -0,0 +1,18 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { AgEmptyState, type EmptyStateProps } from '../core/EmptyState';
+
+export interface ReactEmptyStateProps extends EmptyStateProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export const ReactEmptyState = createComponent({
+  tagName: 'ag-empty-state',
+  elementClass: AgEmptyState,
+  react: React,
+  events: {
+    // No custom events for EmptyState
+  },
+});

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

@@ -0,0 +1,2 @@
+export { ReactEmptyState } from './ReactEmptyState';
+export type { ReactEmptyStateProps } from './ReactEmptyState';

package/src/components/EmptyState/vue/VueEmptyState.vue

@@ -0,0 +1,48 @@
+<template>
+  <ag-empty-state
+    ref="agComponent"
+    .bordered="bordered"
+    .rounded="rounded"
+    :title="title"
+    :subtitle="subtitle"
+    :buttonText="buttonText"
+    :size="size"
+    v-bind="$attrs"
+  >
+    <template v-if="$slots.icon">
+      <span slot="icon">
+        <slot name="icon" />
+      </span>
+    </template>
+    <template v-if="$slots.actions">
+      <span slot="actions">
+        <slot name="actions" />
+      </span>
+    </template>
+  </ag-empty-state>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import "../core/EmptyState";
+
+export interface VueEmptyStateProps {
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  size?: "sm" | "md" | "lg";
+  bordered?: boolean;
+  rounded?: boolean;
+}
+
+const props = withDefaults(defineProps<VueEmptyStateProps>(), {
+  title: "",
+  subtitle: "",
+  buttonText: "",
+  size: "md",
+  bordered: false,
+  rounded: false,
+});
+
+const agComponent = ref<HTMLElement>();
+</script>

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

@@ -0,0 +1,4 @@
+import VueEmptyState from './VueEmptyState.vue';
+import type { EmptyStateProps as VueEmptyStateProps } from '../core/_EmptyState';
+
+export { VueEmptyState, type VueEmptyStateProps };

package/src/components/Fieldset/core/Fieldset.ts

@@ -0,0 +1,22 @@
+/**
+ * AgnosticUI v2 Fieldset - Barrel File
+ *
+ * This file handles custom element registration and TypeScript declarations.
+ */
+
+import { AgFieldset } from './_Fieldset.js';
+
+// Manual registration with conditional check
+if (!customElements.get('ag-fieldset')) {
+  customElements.define('ag-fieldset', AgFieldset);
+}
+
+// TypeScript type mapping for autocomplete
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-fieldset': AgFieldset;
+  }
+}
+
+// Re-export everything from core
+export * from './_Fieldset.js';

package/src/components/Fieldset/core/_Fieldset.ts

@@ -0,0 +1,156 @@
+/**
+ * AgnosticUI v2 Fieldset - Core Implementation
+ *
+ * A semantic fieldset component that groups related form controls with an optional legend.
+ * Follows WAI-ARIA best practices for accessible form grouping.
+ *
+ * @element ag-fieldset
+ * @slot - Default slot for form controls and other content
+ * @csspart ag-fieldset - The fieldset element
+ * @csspart ag-legend - The legend element
+ * @csspart ag-content - The content wrapper div
+ */
+
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+/**
+ * Interface for AgFieldset properties.
+ *
+ * @property {string} legend - Optional legend text for the fieldset
+ * @property {boolean} bordered - Whether to apply borders and padding
+ * @property {'vertical' | 'horizontal'} layout - Layout mode for the fieldset content
+ * @property {boolean} legendHidden - Visually hide the legend while keeping it accessible
+ */
+export interface FieldsetProps {
+  /** Optional legend text for the fieldset. */
+  legend?: string;
+  /** Whether to apply borders and padding. */
+  bordered?: boolean;
+  /** Layout mode: 'vertical' (default) or 'horizontal'. */
+  layout?: 'vertical' | 'horizontal';
+  /** Visually hide the legend while keeping it accessible. */
+  legendHidden?: boolean;
+}
+
+/**
+ * AgFieldset - Groups related form controls with optional legend and layout options.
+ *
+ * The fieldset element semantically groups related form controls, and the legend element
+ * provides a descriptive title for the entire group. This is essential for accessibility,
+ * as screen readers announce the legend before each control, providing crucial context.
+ *
+ * Use Cases:
+ * - Multiple choice questions using radio buttons or checkboxes
+ * - Related questions or fields (e.g., date inputs, address details)
+ * - Any set of form controls that share a common purpose or context
+ *
+ * Accessibility:
+ * - Always include a legend (use legendHidden if you want to hide it visually)
+ * - The legend is announced by screen readers before each control in the fieldset
+ * - Proper semantic grouping helps users understand relationships between controls
+ *
+ * @element ag-fieldset
+ */
+export class AgFieldset extends LitElement implements FieldsetProps {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .ag-fieldset {
+      border: 0;
+      padding: 0;
+      margin: 0;
+      min-inline-size: auto;
+    }
+
+    .ag-fieldset--bordered {
+      border: var(--ag-border-width-1) solid var(--ag-border);
+      border-radius: var(--ag-radius-md);
+      padding: var(--ag-fieldset-padding, var(--ag-space-4));
+    }
+
+    .ag-fieldset--horizontal .ag-fieldset-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ag-fieldset-gap, var(--ag-space-4));
+      align-items: flex-start;
+    }
+
+    .ag-fieldset-legend {
+      font-weight: 600;
+      font-size: var(--ag-font-size-base);
+      color: var(--ag-text-primary);
+      padding: 0;
+    }
+
+    .ag-fieldset-legend--hidden {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+
+    .ag-fieldset-content {
+      display: block;
+    }
+  `;
+
+  @property({ type: String })
+  legend = '';
+
+  @property({ type: Boolean, reflect: true })
+  bordered = false;
+
+  @property({ type: String, reflect: true })
+  layout: 'vertical' | 'horizontal' = 'vertical';
+
+  @property({ type: Boolean, attribute: 'legend-hidden' })
+  legendHidden = false;
+
+  /**
+   * Validate layout prop on connection
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.layout !== 'vertical' && this.layout !== 'horizontal') {
+      this.layout = 'vertical';
+    }
+  }
+
+  render() {
+    const classes = [
+      'ag-fieldset',
+      this.bordered ? 'ag-fieldset--bordered' : '',
+      this.layout === 'horizontal' ? 'ag-fieldset--horizontal' : ''
+    ].filter(Boolean).join(' ');
+
+    const legendClasses = [
+      'ag-fieldset-legend',
+      this.legendHidden ? 'ag-fieldset-legend--hidden' : ''
+    ].filter(Boolean).join(' ');
+
+    return html`
+      <fieldset
+        class="${classes}"
+        part="ag-fieldset"
+      >
+        ${this.legend ? html`
+          <legend class="${legendClasses}" part="ag-legend">
+            ${this.legend}
+          </legend>
+        ` : ''}
+
+        <div class="ag-fieldset-content" part="ag-content">
+          <slot></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+}

package/src/components/Fieldset/react/ReactFieldset.tsx

@@ -0,0 +1,19 @@
+import { createComponent } from "@lit/react";
+import React from "react";
+import { AgFieldset } from "../core/Fieldset";
+import { type FieldsetProps } from "../core/_Fieldset";
+
+export interface ReactFieldsetProps extends FieldsetProps {
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}
+
+export const ReactFieldset = createComponent({
+  tagName: "ag-fieldset",
+  elementClass: AgFieldset,
+  react: React,
+  events: {
+    // No custom events for Fieldset
+  },
+});

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

@@ -0,0 +1,2 @@
+export { ReactFieldset } from './ReactFieldset';
+export type { ReactFieldsetProps } from './ReactFieldset';

package/src/components/Fieldset/vue/VueFieldset.vue

@@ -0,0 +1,56 @@
+<template>
+  <ag-fieldset
+    ref="agComponent"
+    :legend="legend"
+    :bordered="bordered || undefined"
+    :layout="layout"
+    :legend-hidden="legendHidden || undefined"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-fieldset>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, type PropType } from "vue";
+import type { FieldsetProps } from "../core/_Fieldset";
+import "../core/Fieldset"; // Registers the ag-fieldset web component
+
+export default defineComponent({
+  name: "VueFieldset",
+  props: {
+    legend: {
+      type: String,
+      default: "",
+    },
+    bordered: {
+      type: Boolean,
+      default: false,
+    },
+    layout: {
+      type: String as PropType<"vertical" | "horizontal">,
+      default: "vertical" as "vertical" | "horizontal",
+    },
+    legendHidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const agComponent = ref<(HTMLElement & FieldsetProps) | null>(null);
+
+    onMounted(async () => {
+      // Ensure the web component is defined
+      await customElements.whenDefined("ag-fieldset");
+    });
+
+    return {
+      agComponent,
+      legend: props.legend,
+      bordered: props.bordered,
+      layout: props.layout,
+      legendHidden: props.legendHidden,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,4 @@
+import VueFieldset from './VueFieldset.vue';
+import type { FieldsetProps as VueFieldsetProps } from '../core/_Fieldset';
+
+export { VueFieldset, type VueFieldsetProps };

package/src/components/Flex/core/FlexCol.ts

@@ -0,0 +1,20 @@
+import { FlexContainer } from './_FlexContainer.js';
+
+export class FlexCol extends FlexContainer {
+  // Override default direction without setting in constructor
+  // This avoids setting attributes during construction which React 19 doesn't allow
+  protected _direction: 'row' | 'row-reverse' | 'column' | 'column-reverse' = 'column';
+}
+
+if (!customElements.get('ag-flex-col')) {
+  customElements.define('ag-flex-col', FlexCol);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-flex-col': FlexCol;
+  }
+}
+
+// Re-export base types
+export * from './_FlexContainer.js';

package/src/components/Flex/core/FlexContainer.ts

@@ -0,0 +1,13 @@
+import { FlexContainer } from './_FlexContainer.js';
+
+if (!customElements.get('ag-flex-container')) {
+  customElements.define('ag-flex-container', FlexContainer);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-flex-container': FlexContainer;
+  }
+}
+
+export * from './_FlexContainer.js';

package/src/components/Flex/core/FlexInline.ts

@@ -0,0 +1,21 @@
+import { FlexContainer } from './_FlexContainer.js';
+
+export class FlexInline extends FlexContainer {
+  constructor() {
+    super();
+    this.inline = true;
+  }
+}
+
+if (!customElements.get('ag-flex-inline')) {
+  customElements.define('ag-flex-inline', FlexInline);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-flex-inline': FlexInline;
+  }
+}
+
+// Re-export base types
+export * from './_FlexContainer.js';

package/src/components/Flex/core/FlexRow.ts

@@ -0,0 +1,20 @@
+import { FlexContainer } from './_FlexContainer.js';
+
+export class FlexRow extends FlexContainer {
+  // Override default direction without setting in constructor
+  // This avoids setting attributes during construction which React 19 doesn't allow
+  protected _direction: 'row' | 'row-reverse' | 'column' | 'column-reverse' = 'row';
+}
+
+if (!customElements.get('ag-flex-row')) {
+  customElements.define('ag-flex-row', FlexRow);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-flex-row': FlexRow;
+  }
+}
+
+// Re-export base types
+export * from './_FlexContainer.js';