agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/SelectionButton/core/_SelectionButton.ts

@@ -0,0 +1,551 @@
+/**
+ * AgnosticUI v2 SelectionButton - Core Implementation
+ *
+ * A button-styled selection control that can function as either a radio or checkbox.
+ * Must be used within an ag-selection-button-group.
+ *
+ * @element ag-selection-button
+ * @slot - Default slot for button text/content
+ * @csspart container - The outer clickable label
+ * @csspart control - The hidden input element
+ * @csspart indicator - The selection indicator (inline, end side)
+ * @csspart content - The slotted content wrapper
+ */
+
+import { LitElement, html, css, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export type SelectionButtonTheme = 'success' | 'info' | 'error' | 'warning' | 'monochrome' | '';
+export type SelectionButtonSize = 'sm' | 'md' | 'lg';
+export type SelectionButtonShape = '' | 'rounded' | 'capsule';
+
+export interface SelectionButtonProps {
+  /** Unique value for this button (required) */
+  value: string;
+  /** Accessible label for this button (required) */
+  label: string;
+  /** Whether this button is selected */
+  checked?: boolean;
+  /** Whether this button is disabled */
+  disabled?: boolean;
+}
+
+// Internal props set by parent group
+interface SelectionButtonInternalProps {
+  /** Input type (set by parent group) */
+  _type?: 'radio' | 'checkbox';
+  /** Input name (set by parent group) */
+  _name?: string;
+  /** Theme (set by parent group) */
+  _theme?: SelectionButtonTheme;
+  /** Size (set by parent group) */
+  _size?: SelectionButtonSize;
+  /** Shape (set by parent group) */
+  _shape?: SelectionButtonShape;
+}
+
+export class AgSelectionButton extends LitElement implements SelectionButtonProps, SelectionButtonInternalProps {
+  static override styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .selection-button {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ag-space-2);
+      margin: 0;
+      font: inherit;
+      cursor: pointer;
+      transition:
+        background-color var(--ag-motion-fast) var(--ag-fx-ease-ease-out),
+        border-color var(--ag-motion-fast) var(--ag-fx-ease-ease-out),
+        color var(--ag-motion-fast) var(--ag-fx-ease-ease-out);
+    }
+
+    /* ========================================
+       SIZE VARIANTS
+       ======================================== */
+
+    /* Small */
+    .selection-button--sm {
+      height: var(--ag-space-9);
+      min-height: var(--ag-space-9);
+      font-size: var(--ag-font-size-xs);
+      padding-inline: calc(var(--ag-space-3) + var(--ag-space-3));
+      --_indicator-size: 0.75rem;
+      --_indicator-offset: var(--ag-space-1);
+    }
+
+    /* Medium (default) */
+    .selection-button--md {
+      height: var(--ag-space-10);
+      min-height: var(--ag-space-10);
+      font-size: var(--ag-font-size-sm);
+      padding-inline: calc(var(--ag-space-4) + var(--ag-space-4));
+      --_indicator-size: 0.875rem;
+      --_indicator-offset: var(--ag-space-1);
+    }
+
+    /* Large */
+    .selection-button--lg {
+      height: var(--ag-space-12);
+      min-height: var(--ag-space-12);
+      font-size: var(--ag-font-size-base);
+      padding-inline: calc(var(--ag-space-5) + var(--ag-space-5));
+      --_indicator-size: 1rem;
+      --_indicator-offset: var(--ag-space-1);
+    }
+
+    /* ========================================
+       SHAPE VARIANTS
+       ======================================== */
+
+    .selection-button--shape-default {
+      border-radius: 0;
+    }
+
+    .selection-button--shape-rounded {
+      border-radius: var(--ag-radius-md);
+    }
+
+    .selection-button--shape-capsule {
+      border-radius: var(--ag-radius-full);
+      /* 0.375rem is between --ag-space-1 (0.25rem) and --ag-space-2 (0.5rem) */
+      --_indicator-offset: 0.375rem;
+    }
+
+    /* ========================================
+       THEME VARIANTS - UNCHECKED STATE
+       Border/text uses theme color, transparent background
+       ======================================== */
+
+    /* Default (primary) - unchecked */
+    .selection-button--default {
+      background: transparent;
+      border: 1px solid var(--ag-primary);
+      color: var(--ag-primary-text);
+      --_indicator-bg: var(--ag-primary);
+    }
+
+    /* Success - unchecked */
+    .selection-button--success {
+      background: transparent;
+      border: 1px solid var(--ag-success);
+      color: var(--ag-success-text);
+      --_indicator-bg: var(--ag-success);
+    }
+
+    /* Info - unchecked */
+    .selection-button--info {
+      background: transparent;
+      border: 1px solid var(--ag-info);
+      color: var(--ag-info-text);
+      --_indicator-bg: var(--ag-info);
+    }
+
+    /* Warning - unchecked */
+    .selection-button--warning {
+      background: transparent;
+      border: 1px solid var(--ag-warning);
+      color: var(--ag-warning-text);
+      --_indicator-bg: var(--ag-warning);
+    }
+
+    /* Error - unchecked */
+    .selection-button--error {
+      background: transparent;
+      border: 1px solid var(--ag-danger);
+      color: var(--ag-danger-text);
+      --_indicator-bg: var(--ag-danger);
+    }
+
+    /* Monochrome - unchecked */
+    .selection-button--monochrome {
+      background: transparent;
+      border: 1px solid var(--ag-text-primary);
+      color: var(--ag-text-primary);
+      --_indicator-bg: var(--ag-text-primary);
+    }
+
+    /* ========================================
+       THEME VARIANTS - CHECKED STATE
+       Filled background with white text
+       ======================================== */
+
+    /* Default (primary) - checked */
+    .selection-button--default.selection-button--checked {
+      background: var(--ag-primary);
+      border-color: var(--ag-primary);
+      color: var(--ag-white);
+    }
+
+    /* Success - checked */
+    .selection-button--success.selection-button--checked {
+      background: var(--ag-success);
+      border-color: var(--ag-success);
+      color: var(--ag-white);
+    }
+
+    /* Info - checked */
+    .selection-button--info.selection-button--checked {
+      background: var(--ag-info);
+      border-color: var(--ag-info);
+      color: var(--ag-white);
+    }
+
+    /* Warning - checked */
+    .selection-button--warning.selection-button--checked {
+      background: var(--ag-warning);
+      border-color: var(--ag-warning);
+      color: var(--ag-neutral-900);
+    }
+
+    /* Error - checked */
+    .selection-button--error.selection-button--checked {
+      background: var(--ag-danger);
+      border-color: var(--ag-danger);
+      color: var(--ag-white);
+    }
+
+    /* Monochrome - checked */
+    .selection-button--monochrome.selection-button--checked {
+      background: var(--ag-background-primary-inverted);
+      border-color: var(--ag-background-primary-inverted);
+      color: var(--ag-text-primary-inverted);
+    }
+
+    /* ========================================
+       HOVER STATES
+       ======================================== */
+
+    /* Default - unchecked hover (fill with theme color) */
+    .selection-button--default:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-primary);
+      color: var(--ag-white);
+    }
+
+    /* Default - checked hover (darker shade) */
+    .selection-button--default.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-primary-dark);
+      border-color: var(--ag-primary-dark);
+    }
+
+    /* Success - unchecked hover */
+    .selection-button--success:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-success);
+      color: var(--ag-white);
+    }
+
+    /* Success - checked hover */
+    .selection-button--success.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-success-dark);
+      border-color: var(--ag-success-dark);
+    }
+
+    /* Info - unchecked hover */
+    .selection-button--info:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-info);
+      color: var(--ag-white);
+    }
+
+    /* Info - checked hover */
+    .selection-button--info.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-info-dark);
+      border-color: var(--ag-info-dark);
+    }
+
+    /* Warning - unchecked hover */
+    .selection-button--warning:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-warning);
+      color: var(--ag-neutral-900);
+    }
+
+    /* Warning - checked hover */
+    .selection-button--warning.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-warning-dark);
+      border-color: var(--ag-warning-dark);
+    }
+
+    /* Error - unchecked hover */
+    .selection-button--error:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-danger);
+      color: var(--ag-white);
+    }
+
+    /* Error - checked hover */
+    .selection-button--error.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-danger-dark);
+      border-color: var(--ag-danger-dark);
+    }
+
+    /* Monochrome - unchecked hover */
+    .selection-button--monochrome:hover:not(.selection-button--disabled):not(.selection-button--checked) {
+      background: var(--ag-background-primary-inverted);
+      color: var(--ag-text-primary-inverted);
+    }
+
+    /* Monochrome - checked hover */
+    .selection-button--monochrome.selection-button--checked:hover:not(.selection-button--disabled) {
+      background: var(--ag-background-secondary-inverted);
+      border-color: var(--ag-background-secondary-inverted);
+    }
+
+    /* ========================================
+       FOCUS STATE
+       ======================================== */
+
+    .selection-button:focus-within:not(.selection-button--disabled) {
+      outline: var(--ag-focus-width) solid var(--ag-focus-ring-color, rgba(var(--ag-focus), 0.5));
+      outline-offset: var(--ag-focus-offset);
+    }
+
+    /* ========================================
+       DISABLED STATE
+       ======================================== */
+
+    .selection-button--disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* ========================================
+       HIDDEN INPUT (screen reader accessible)
+       ======================================== */
+
+    .selection-button__input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* ========================================
+       INDICATOR (corner badge, top-right)
+       ======================================== */
+
+    .selection-button__indicator {
+      position: absolute;
+      top: var(--_indicator-offset);
+      inset-inline-end: var(--_indicator-offset);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--_indicator-size);
+      height: var(--_indicator-size);
+      opacity: 0;
+      transform: scale(0.6);
+      transition:
+        opacity var(--ag-motion-fast) ease-in-out,
+        transform var(--ag-motion-fast) var(--ag-fx-ease-ease-out);
+    }
+
+    .selection-button--checked .selection-button__indicator {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .selection-button__indicator-svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Content wrapper */
+    .selection-button__content {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* Visually hidden label for screen readers */
+    .selection-button__label-sr {
+      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;
+    }
+
+    /* ========================================
+       REDUCED MOTION
+       ======================================== */
+
+    @media (prefers-reduced-motion: reduce) {
+      .selection-button,
+      .selection-button__indicator {
+        transition: none;
+      }
+    }
+
+    /* ========================================
+       HIGH CONTRAST MODE
+       ======================================== */
+
+    @media (forced-colors: active) {
+      .selection-button--checked {
+        outline: 2px solid CanvasText;
+      }
+      .selection-button__indicator-svg circle {
+        fill: CanvasText;
+      }
+      .selection-button__indicator-svg path,
+      .selection-button__indicator-svg circle:last-child {
+        stroke: Canvas;
+        fill: Canvas;
+      }
+    }
+  `;
+
+  @property({ type: String, reflect: true })
+  declare value: string;
+
+  @property({ type: String })
+  declare label: string;
+
+  @property({ type: Boolean, reflect: true })
+  declare checked: boolean;
+
+  @property({ type: Boolean, reflect: true })
+  declare disabled: boolean;
+
+  // Internal props set by parent group
+  @property({ type: String, attribute: false })
+  declare _type: 'radio' | 'checkbox';
+
+  @property({ type: String, attribute: false })
+  declare _name: string;
+
+  @property({ type: String, attribute: false })
+  declare _theme: SelectionButtonTheme;
+
+  @property({ type: String, attribute: false })
+  declare _size: SelectionButtonSize;
+
+  @property({ type: String, attribute: false })
+  declare _shape: SelectionButtonShape;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.label = '';
+    this.checked = false;
+    this.disabled = false;
+    this._type = 'radio';
+    this._name = '';
+    this._theme = '';
+    this._size = 'md';
+    this._shape = '';
+  }
+
+  override focus() {
+    const label = this.shadowRoot?.querySelector('.selection-button') as HTMLElement | null;
+    label?.focus();
+  }
+
+  private _handleClick(e: Event) {
+    // Prevent label from forwarding click to input (we handle selection ourselves)
+    e.preventDefault();
+
+    if (this.disabled) {
+      return;
+    }
+
+    // For radio, always select; for checkbox, toggle
+    const newChecked = this._type === 'radio' ? true : !this.checked;
+
+    // Dispatch event to parent group
+    this.dispatchEvent(new CustomEvent('selection-button-change', {
+      detail: {
+        value: this.value,
+        checked: newChecked,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) return;
+
+    // Space or Enter to select/toggle
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this._handleClick(e);
+    }
+  }
+
+  private _renderIndicator() {
+    if (this._type === 'checkbox') {
+      // Circle with checkmark for checkbox
+      return html`
+        <svg class="selection-button__indicator-svg" viewBox="0 0 20 20" aria-hidden="true">
+          <circle cx="10" cy="10" r="10" fill="currentColor" />
+          <path d="M6 10l3 3 5-6" stroke="var(--ag-selection-button-indicator-check, var(--_indicator-bg))"
+                stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+        </svg>
+      `;
+    }
+    // Circle with dot for radio
+    return html`
+      <svg class="selection-button__indicator-svg" viewBox="0 0 20 20" aria-hidden="true">
+        <circle cx="10" cy="10" r="10" fill="currentColor" />
+        <circle cx="10" cy="10" r="4" fill="var(--ag-selection-button-indicator-dot, var(--_indicator-bg))" />
+      </svg>
+    `;
+  }
+
+  override render() {
+    // Map empty theme to 'default' for CSS class
+    const themeClass = this._theme || 'default';
+    const sizeClass = this._size || 'md';
+    const shapeClass = this._shape || 'default';
+
+    const containerClasses = [
+      'selection-button',
+      `selection-button--${themeClass}`,
+      `selection-button--${sizeClass}`,
+      `selection-button--shape-${shapeClass}`,
+      this.checked ? 'selection-button--checked' : '',
+      this.disabled ? 'selection-button--disabled' : '',
+    ].filter(Boolean).join(' ');
+
+    return html`
+      <label
+        class="${containerClasses}"
+        part="ag-selection-button-container"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeyDown}"
+      >
+        <input
+          type="${this._type}"
+          class="selection-button__input"
+          part="ag-selection-button-control"
+          name="${this._name || nothing}"
+          value="${this.value}"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          aria-checked="${this.checked ? 'true' : 'false'}"
+          tabindex="-1"
+        />
+        <span class="selection-button__label-sr">${this.label}</span>
+        <span class="selection-button__content" part="ag-selection-button-content">
+          <slot></slot>
+        </span>
+        <span class="selection-button__indicator" part="ag-selection-button-indicator" aria-hidden="true">
+          ${this._renderIndicator()}
+        </span>
+      </label>
+    `;
+  }
+}

package/src/components/SelectionButton/react/ReactSelectionButton.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { AgSelectionButton, type SelectionButtonProps } from '../core/SelectionButton';
+
+export interface ReactSelectionButtonProps extends SelectionButtonProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const ReactSelectionButton = createComponent({
+  tagName: 'ag-selection-button',
+  elementClass: AgSelectionButton,
+  react: React,
+});
+
+export type { SelectionButtonProps } from '../core/SelectionButton';

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

@@ -0,0 +1,4 @@
+export { ReactSelectionButton, type ReactSelectionButtonProps } from './ReactSelectionButton';
+
+// Re-export types from core for convenience
+export type { SelectionButtonProps } from '../core/SelectionButton';

package/src/components/SelectionButton/vue/VueSelectionButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <ag-selection-button
+    :value="value"
+    :label="label"
+    .checked="checked"
+    .disabled="disabled"
+    v-bind="$attrs"
+  >
+    <slot />
+  </ag-selection-button>
+</template>
+
+<script setup lang="ts">
+import '../core/SelectionButton';
+
+export interface VueSelectionButtonProps {
+  /** Unique value for this button (required) */
+  value: string;
+  /** Accessible label for this button (required) */
+  label: string;
+  /** Whether this button is selected */
+  checked?: boolean;
+  /** Whether this button is disabled */
+  disabled?: boolean;
+}
+
+withDefaults(defineProps<VueSelectionButtonProps>(), {
+  value: '',
+  label: '',
+  checked: false,
+  disabled: false,
+});
+</script>

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

@@ -0,0 +1,5 @@
+import VueSelectionButton from './VueSelectionButton.vue';
+import type { SelectionButtonProps as VueSelectionButtonProps } from '../core/_SelectionButton';
+
+export { VueSelectionButton };
+export type { VueSelectionButtonProps };

package/src/components/SelectionButtonGroup/core/SelectionButtonGroup.ts

@@ -0,0 +1,13 @@
+import { AgSelectionButtonGroup } from './_SelectionButtonGroup.js';
+
+if (!customElements.get('ag-selection-button-group')) {
+  customElements.define('ag-selection-button-group', AgSelectionButtonGroup);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-selection-button-group': AgSelectionButtonGroup;
+  }
+}
+
+export * from './_SelectionButtonGroup.js';