agnosticui-core 2.0.0-alpha.2

package/src/components/ScrollToButton/core/_ScrollToButton.ts

@@ -0,0 +1,335 @@
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+// Import the core Button component to ensure it's registered
+import '../../Button/core/Button.js';
+
+export interface ScrollToButtonProps {
+  label?: string;
+  showLabel?: boolean;
+  icon?: boolean;
+  scrollThreshold?: number;
+  target?: 'top' | 'bottom' | string | HTMLElement;
+  direction?: 'up' | 'down' | 'auto';
+  smoothScroll?: boolean;
+  visible?: boolean;
+  size?: 'x-sm' | 'sm' | 'md' | 'lg' | 'xl';
+  shape?: 'capsule' | 'rounded' | 'circle' | 'square' | 'rounded-square' | '';
+}
+
+/**
+ * @element ag-scroll-to-button
+ * @slot icon - Optional slot for custom icon projection
+ * 
+ * @csspart ag-scrollto-button - The button wrapper element
+ * @csspart ag-button - The inner ag-button element (exported from nested component)
+ * @csspart ag-button-content - The flex container holding icon and label
+ * @csspart ag-icon-wrapper - The wrapper around the icon slot (for flex ordering and positioning)
+ * @csspart ag-label - The label text span element
+ * 
+ * @example Icon and Label Positioning
+ * You can control icon placement relative to the label using CSS flex properties on the ag-button-content part:
+ * 
+ * ```css
+ * // Icon on the right side
+ * ag-scroll-to-button::part(ag-button-content) {
+ *   flex-direction: row-reverse;
+ * }
+ * 
+ * // Icon above label (vertical)
+ * ag-scroll-to-button::part(ag-button-content) {
+ *   flex-direction: column;
+ * }
+ * 
+ * // Icon below label
+ * ag-scroll-to-button::part(ag-button-content) {
+ *   flex-direction: column-reverse;
+ * }
+ * 
+ * // Customize spacing between icon and label
+ * ag-scroll-to-button::part(ag-button-content) {
+ *   gap: 1rem;
+ * }
+ * 
+ * // Style the icon wrapper independently
+ * ag-scroll-to-button::part(ag-icon-wrapper) {
+ *   background: white;
+ *   border-radius: 50%;
+ *   padding: 0.5rem;
+ * }
+ * 
+ * // Style the label independently
+ * ag-scroll-to-button::part(ag-label) {
+ *   font-weight: bold;
+ *   text-transform: uppercase;
+ * }
+ * ```
+ */
+export class ScrollToButton extends LitElement implements ScrollToButtonProps {
+  static styles = css`
+    :host {
+      display: inline-block;
+      position: fixed;
+      bottom: var(--ag-space-8, 2rem);
+      inset-inline-end: var(--ag-space-8, 2rem);
+      z-index: var(--ag-z-index-sticky, 900);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--ag-motion-slow, 0.4s) ease-in-out,
+                  visibility var(--ag-motion-slow, 0.4s) ease-in-out;
+    }
+
+    :host([visible]) {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        transition: none;
+      }
+    }
+
+    @media print {
+      :host {
+        display: none !important;
+      }
+    }
+
+    /* Ensure button is large enough for touch targets */
+    ag-button {
+      min-width: 44px;
+      min-height: 44px;
+    }
+
+    /* Default flex layout for icon + label */
+    .button-content {
+      display: flex;
+      align-items: center;
+      gap: var(--ag-space-2, 0.5rem);
+      flex-direction: row;
+    }
+
+    /* Icon wrapper for part targeting */
+    .icon-wrapper {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Label wrapper for part targeting */
+    .label {
+      display: inline-block;
+    }
+  `;
+
+  @property({ type: String })
+  declare label: string;
+
+  @property({ type: Boolean })
+  declare showLabel: boolean;
+
+  @property({ type: Boolean })
+  declare icon: boolean;
+
+  @property({ type: Number })
+  declare scrollThreshold: number;
+
+  @property({ type: String })
+  declare target: 'top' | 'bottom' | string;
+
+  @property({ type: String })
+  declare direction: 'up' | 'down' | 'auto';
+
+  @property({ type: Boolean })
+  declare smoothScroll: boolean;
+
+  @property({ type: Boolean, reflect: true })
+  declare visible: boolean;
+
+  @property({ type: String })
+  declare size: 'x-sm' | 'sm' | 'md' | 'lg' | 'xl';
+
+  @property({ type: String })
+  declare shape: 'capsule' | 'rounded' | 'circle' | 'square' | 'rounded-square' | '';
+
+  // Private property to store HTMLElement target
+  private _targetElement: HTMLElement | null = null;
+
+  constructor() {
+    super();
+    this.label = 'Back to Top';
+    this.showLabel = false;
+    this.icon = true;
+    this.scrollThreshold = 400;
+    this.target = 'top';
+    this.direction = 'auto';
+    this.smoothScroll = true;
+    this.visible = false;
+    this.size = 'md';
+    this.shape = '';
+  }
+
+  private _handleScroll = () => {
+    this.visible = window.scrollY > this.scrollThreshold;
+  };
+
+  private _getScrollBehavior(): ScrollBehavior {
+    // Respect prefers-reduced-motion
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return this.smoothScroll && !prefersReducedMotion ? 'smooth' : 'auto';
+  }
+
+  private _getScrollTarget(): number {
+    // If target is an HTMLElement (set programmatically)
+    if (this._targetElement) {
+      return this._targetElement.offsetTop;
+    }
+
+    // Handle string targets
+    if (typeof this.target === 'string') {
+      switch (this.target) {
+        case 'top':
+          return 0;
+        case 'bottom':
+          return document.documentElement.scrollHeight - window.innerHeight;
+        default: {
+          // Try to find element by ID
+          const element = document.getElementById(this.target);
+          if (element) {
+            return element.offsetTop;
+          }
+          // Try as selector
+          const selected = document.querySelector(this.target);
+          if (selected instanceof HTMLElement) {
+            return selected.offsetTop;
+          }
+          // Default to top if target not found
+          // eslint-disable-next-line no-console
+          console.warn(`ScrollToButton: Target "${this.target}" not found, scrolling to top`);
+          return 0;
+        }
+      }
+    }
+
+    return 0;
+  }
+
+  private _getDirection(): 'up' | 'down' {
+    if (this.direction !== 'auto') {
+      return this.direction;
+    }
+
+    // Auto-detect based on target
+    if (this._targetElement) {
+      return this._targetElement.offsetTop < window.scrollY ? 'up' : 'down';
+    }
+
+    if (typeof this.target === 'string') {
+      switch (this.target) {
+        case 'bottom':
+          return 'down';
+        case 'top':
+        default:
+          return 'up';
+      }
+    }
+
+    return 'up';
+  }
+
+  private _scrollToTarget() {
+    const top = this._getScrollTarget();
+    const behavior = this._getScrollBehavior();
+
+    window.scrollTo({
+      top,
+      behavior,
+    });
+  }
+
+  // Public method to set HTMLElement target
+  public setTargetElement(element: HTMLElement | null) {
+    this._targetElement = element;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('scroll', this._handleScroll, { passive: true });
+    // Initial check
+    this._handleScroll();
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('scroll', this._handleScroll);
+    super.disconnectedCallback();
+  }
+
+  private _renderDefaultIcon() {
+    const direction = this._getDirection();
+    
+    if (direction === 'down') {
+      // Arrow Down
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
+        </svg>
+      `;
+    }
+
+    // Arrow Up (default)
+    return html`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+      </svg>
+    `;
+  }
+
+  render() {
+    // Show label if explicitly enabled OR if icon is disabled (fallback)
+    const shouldShowLabel = this.showLabel || !this.icon;
+    // Use isCircle only when there's no visible label text and only showing icon
+    const isIconOnly = this.icon && !shouldShowLabel;
+    
+    return html`
+      <ag-button
+        mode="primary"
+        size="${this.size}"
+        shape="${this.shape || (isIconOnly ? 'circle' : '')}"
+        @click="${this._scrollToTarget}"
+        aria-label="${this.label}"
+        part="ag-scrollto-button"
+        exportparts="ag-button"
+        role="button"
+      >
+        <div class="button-content" part="ag-button-content">
+          ${this.icon ? html`
+            <span class="ag-icon-wrapper" part="ag-icon-wrapper">
+              <slot name="icon">
+                ${this._renderDefaultIcon()}
+              </slot>
+            </span>
+          ` : ''}
+          ${shouldShowLabel ? html`
+            <span class="label" part="ag-label">${this.label}</span>
+          ` : ''}
+        </div>
+      </ag-button>
+    `;
+  }
+}

package/src/components/ScrollToButton/react/ReactScrollToButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+// Import from the registration file to ensure custom element is defined
+import { ScrollToButton as ScrollToButtonLit } from "../core/ScrollToButton.js";
+
+export interface ScrollToButtonProps {
+  label?: string;
+  showLabel?: boolean;
+  icon?: boolean;
+  scrollThreshold?: number;
+  target?: "top" | "bottom" | string;
+  direction?: "up" | "down" | "auto";
+  smoothScroll?: boolean;
+  visible?: boolean;
+  size?: "x-sm" | "sm" | "md" | "lg" | "xl";
+  shape?: "capsule" | "rounded" | "circle" | "square" | "rounded-square" | "";
+  children?: React.ReactNode;
+}
+
+export const ReactScrollToButton = createComponent({
+  tagName: "ag-scroll-to-button",
+  elementClass: ScrollToButtonLit,
+  react: React,
+  events: {},
+});

package/src/components/ScrollToButton/vue/VueScrollToButton.vue

@@ -0,0 +1,103 @@
+<template>
+  <ag-scroll-to-button
+    :label="label"
+    :showLabel="showLabel"
+    :icon="icon"
+    :scrollThreshold="scrollThreshold"
+    :target="target"
+    :direction="direction"
+    :smoothScroll="smoothScroll"
+    :visible="visible"
+    :size="size"
+    :shape="shape"
+  >
+    <template v-if="$slots.icon">
+      <span slot="icon">
+        <slot name="icon" />
+      </span>
+    </template>
+  </ag-scroll-to-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import "../core/ScrollToButton.js"; // Registers the ag-scroll-to-button web component
+
+export default defineComponent({
+  name: "VueScrollToButton",
+  props: {
+    /**
+     * Accessible label for the button
+     */
+    label: {
+      type: String,
+      default: "Back to Top",
+    },
+    /**
+     * Show the label text alongside the icon
+     */
+    showLabel: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Show/hide the default icon
+     */
+    icon: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Scroll threshold in pixels before showing the button
+     */
+    scrollThreshold: {
+      type: Number,
+      default: 400,
+    },
+    /**
+     * Scroll target: "top", "bottom", or element ID/selector
+     */
+    target: {
+      type: String as PropType<"top" | "bottom" | string>,
+      default: "top",
+    },
+    /**
+     * Arrow direction (auto-detects by default)
+     */
+    direction: {
+      type: String as PropType<"up" | "down" | "auto">,
+      default: "auto",
+    },
+    /**
+     * Enable smooth scrolling animation
+     */
+    smoothScroll: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Controls button visibility (usually controlled internally by scroll position)
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Button size
+     */
+    size: {
+      type: String as PropType<"x-sm" | "sm" | "md" | "lg" | "xl">,
+      default: "md",
+    },
+    /**
+     * Button shape
+     */
+    shape: {
+      type: String as PropType<
+        "capsule" | "rounded" | "circle" | "square" | "rounded-square" | ""
+      >,
+      default: "",
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,11 @@
+import VueScrollToButton from './VueScrollToButton.vue';
+import type { ScrollToButtonProps } from '../core/_ScrollToButton.js';
+
+// Export the Vue component
+export { VueScrollToButton };
+
+// Export the TypeScript interface
+export type { ScrollToButtonProps as VueScrollToButtonProps };
+
+// Default export for convenience
+export default VueScrollToButton;

package/src/components/Select/core/Select.ts

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