@ng-cn/core 1.0.17 → 1.0.20

package/src/app/lib/components/ui/popover/popover-context.ts

@@ -16,6 +16,8 @@ export interface PopoverContextValue {
   triggerRef?: Signal<HTMLElement | null>;
   /** Set the trigger element reference */
   setTriggerRef?: (element: HTMLElement | null) => void;
+  /** Unique ID for aria-controls relationship */
+  contentId: string;
 }
 
 export const POPOVER_CONTEXT = new InjectionToken<PopoverContextValue>('POPOVER_CONTEXT');

package/src/app/lib/components/ui/popover/popover.component.ts

@@ -10,6 +10,8 @@ import { POPOVER_CONTEXT, type PopoverContextValue } from './popover-context';
 
 export type PopoverState = 'open' | 'closed';
 
+let idCounter = 0;
+
 /**
  * Props for the Popover component
  */
@@ -128,6 +130,8 @@ export class Popover implements PopoverContextValue {
   readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
 
   readonly open = signal(false);
+  /** Unique ID for aria-controls relationship */
+  readonly contentId = `popover-content-${++idCounter}`;
   /** Reference to the trigger element for positioning */
   readonly triggerRef = signal<HTMLElement | null>(null);
 

package/src/app/lib/components/ui/progress/progress.component.ts

@@ -102,9 +102,8 @@ export type ProgressProps = {
     '[attr.aria-label]': 'ariaLabel()',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': 'max()',
-    '[attr.aria-valuenow]': 'value()',
+    '[attr.aria-valuenow]': 'value() !== null ? value() : null',
     '[attr.aria-valuetext]': 'computedValueText()',
-    '[attr.aria-live]': '"polite"',
     '[attr.data-state]': 'state()',
     '[attr.data-value]': 'value()',
     '[attr.data-max]': 'max()',

package/src/app/lib/components/ui/resizable/resizable-handle.component.ts

@@ -165,7 +165,7 @@ export class ResizableHandle {
       if (!this.isDragging()) return;
 
       const currentPosition = this.context.direction() === 'horizontal' ? e.clientX : e.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };
@@ -194,7 +194,7 @@ export class ResizableHandle {
       const currentTouch = e.touches[0];
       const currentPosition =
         this.context.direction() === 'horizontal' ? currentTouch.clientX : currentTouch.clientY;
-      const delta = ((currentPosition - this.startPosition) / window.innerWidth) * 100;
+      const delta = ((currentPosition - this.startPosition) / (typeof window !== 'undefined' ? window.innerWidth : 1000)) * 100;
       this.context.onResize(delta);
       this.startPosition = currentPosition;
     };

package/src/app/lib/components/ui/scroll-area/scroll-area.component.ts

@@ -98,15 +98,16 @@ export class ScrollArea {
 
   protected readonly computedClass = computed(() => cn('relative overflow-hidden', this.class()));
 
-  protected readonly viewportClass = computed(() =>
-    cn(
+  protected readonly viewportClass = computed(() => {
+    const type = this.type();
+    return cn(
       'h-full w-full rounded-[inherit]',
       '[&>div]:!block',
-      // Hide native scrollbar
+      // Hide native scrollbar (custom ScrollBar component provides visual feedback)
       '[&::-webkit-scrollbar]:hidden',
       '[-ms-overflow-style:none]',
       '[scrollbar-width:none]',
-      'overflow-auto',
-    ),
-  );
+      type === 'always' ? 'overflow-scroll' : 'overflow-auto',
+    );
+  });
 }

package/src/app/lib/components/ui/segmented/segmented-item.component.ts

@@ -13,6 +13,7 @@ import { segmentedItemVariants } from './segmented-variants';
   selector: 'SegmentedItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"segmented-item"',
     '[class]': 'computedClass()',
     '[attr.role]': 'itemRole()',
     '[attr.aria-selected]': 'itemRole() === "tab" ? isSelected() : null',

package/src/app/lib/components/ui/segmented/segmented.component.ts

@@ -33,6 +33,7 @@ import { segmentedVariants, type SegmentedVariants } from './segmented-variants'
   selector: 'Segmented',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"segmented"',
     '[class]': 'computedClass()',
     role: 'tablist',
     '[attr.aria-orientation]': '"horizontal"',

package/src/app/lib/components/ui/select/select-content.component.ts

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn, Presence } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { SELECT_CONTEXT } from './select-context';
 
@@ -9,25 +9,29 @@ import { SELECT_CONTEXT } from './select-context';
  */
 @Component({
   selector: 'SelectContent',
+  imports: [Presence],
   template: `
-    <div
-      [class]="dropdownClass()"
-      [attr.id]="context?.contentId"
-      [attr.data-state]="context?.open() ? 'open' : 'closed'"
-      [attr.data-side]="side()"
-      [attr.data-align]="align()"
-      role="listbox"
-      aria-label="Options"
-      (keydown.escape)="onEscape()"
-    >
-      <div [class]="viewportClass()">
-        <ng-content />
+    <Presence [present]="context?.open() ?? false">
+      <div
+        [class]="dropdownClass()"
+        [attr.id]="context?.contentId"
+        [attr.data-state]="context?.open() ? 'open' : 'closed'"
+        [attr.data-side]="side()"
+        [attr.data-align]="align()"
+        [attr.aria-activedescendant]="focusedItemId()"
+        role="listbox"
+        (keydown.escape)="onEscape()"
+        (keydown)="onKeydown($event)"
+      >
+        <div [class]="viewportClass()">
+          <ng-content />
+        </div>
       </div>
-    </div>
+    </Presence>
   `,
   host: {
     class: 'contents',
-    'data-slot': 'select-content',
+    'attr.data-slot': '"select-content"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -59,6 +63,15 @@ export class SelectContent {
   /** Viewport class */
   protected readonly viewportClass = computed(() => cn('max-h-60 overflow-y-auto p-1'));
 
+  /** ID of the currently focused item for aria-activedescendant */
+  protected readonly focusedItemId = computed(() => {
+    if (!this.context) return null;
+    const values = this.context.itemValues();
+    const focusedIndex = this.context.focusedIndex();
+    const focusedValue = values[focusedIndex];
+    return focusedValue ? `select-item-${focusedValue}` : null;
+  });
+
   protected onEscape(): void {
     this.context?.setOpen(false);
     const trigger = this.context?.triggerElement();
@@ -66,4 +79,11 @@ export class SelectContent {
       setTimeout(() => trigger.focus());
     }
   }
+
+  /** Handle printable character keys for typeahead search */
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      this.context?.handleTypeahead(event.key);
+    }
+  }
 }

package/src/app/lib/components/ui/select/select-context.ts

@@ -31,6 +31,16 @@ export interface SelectContext {
   required?: () => boolean;
   /** Name for form submission */
   name?: () => string;
+  /** Map of item value → display label for typeahead */
+  itemLabels: WritableSignal<Map<string, string>>;
+  /** Accumulated typeahead characters */
+  typeaheadBuffer: WritableSignal<string>;
+  /** Timeout handle for clearing the typeahead buffer */
+  typeaheadTimeout: WritableSignal<ReturnType<typeof setTimeout> | null>;
+  /** Handle a typed character for typeahead search */
+  handleTypeahead: (char: string) => void;
+  /** Focus the first item whose label starts with query (case-insensitive) */
+  focusMatchingItem: (query: string) => void;
 }
 
 export interface SelectGroupContext {

package/src/app/lib/components/ui/select/select-item.component.ts

@@ -47,6 +47,7 @@ import { SELECT_CONTEXT } from './select-context';
   host: {
     '[class]': 'computedClass()',
     role: 'option',
+    '[attr.id]': 'itemId()',
     '[attr.aria-selected]': 'isSelected()',
     '[attr.data-state]': 'isSelected() ? "checked" : "unchecked"',
     '[attr.data-disabled]': 'disabled() ? "" : null',
@@ -55,7 +56,7 @@ import { SELECT_CONTEXT } from './select-context';
     '[attr.tabindex]': 'disabled() ? -1 : 0',
     '(click)': 'select()',
     '(keydown)': 'onKeyDown($event)',
-    'data-slot': 'select-item',
+    'attr.data-slot': '"select-item"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -72,6 +73,9 @@ export class SelectItem implements OnInit, OnDestroy {
 
   private readonly _context = inject(SELECT_CONTEXT, { optional: true });
 
+  /** Stable DOM id for aria-activedescendant */
+  readonly itemId = computed(() => `select-item-${this.value()}`);
+
   /** Whether this item is selected */
   protected readonly isSelected = computed(() => {
     return this._context?.value() === this.value();
@@ -94,17 +98,28 @@ export class SelectItem implements OnInit, OnDestroy {
   });
 
   ngOnInit(): void {
-    // Register this item
+    // Register this item's value
     this._context?.itemValues.update((values) => {
       if (!values.includes(this.value())) {
         return [...values, this.value()];
       }
       return values;
     });
+    // Register this item's label for typeahead
+    this._context?.itemLabels.update((m) => {
+      const label = this.textContent()?.nativeElement?.textContent?.trim() || this.value();
+      m.set(this.value(), label);
+      return m;
+    });
   }
   ngOnDestroy(): void {
-    // Unregister this item
+    // Unregister this item's value
     this._context?.itemValues.update((values) => values.filter((v) => v !== this.value()));
+    // Unregister this item's label
+    this._context?.itemLabels.update((m) => {
+      m.delete(this.value());
+      return m;
+    });
   }
 
   /** Handle keyboard navigation */
@@ -117,17 +132,20 @@ export class SelectItem implements OnInit, OnDestroy {
         event.preventDefault();
         this.select();
         break;
-      case 'ArrowDown':
+      case 'ArrowDown': {
         event.preventDefault();
         const currentIndex = this._context.focusedIndex();
         const itemCount = this._context.itemValues().length;
-        this._context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
+        this._context.focusItem((currentIndex + 1) % itemCount);
         break;
-      case 'ArrowUp':
+      }
+      case 'ArrowUp': {
         event.preventDefault();
         const idx = this._context.focusedIndex();
-        this._context.focusItem(Math.max(idx - 1, 0));
+        const count = this._context.itemValues().length;
+        this._context.focusItem(idx > 0 ? idx - 1 : count - 1);
         break;
+      }
       case 'Home':
         event.preventDefault();
         this._context.focusItem(0);

package/src/app/lib/components/ui/select/select-trigger.component.ts

@@ -57,7 +57,7 @@ import { SELECT_CONTEXT } from './select-context';
   `,
   host: {
     class: 'contents',
-    'data-slot': 'select-trigger',
+    'attr.data-slot': '"select-trigger"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -114,35 +114,28 @@ export class SelectTrigger {
       case 'ArrowDown':
         event.preventDefault();
         if (!this.context.open()) {
-          // Save trigger element
           const button = this.triggerButton()?.nativeElement;
-          if (button) {
-            this.context.triggerElement.set(button);
-          }
+          if (button) this.context.triggerElement.set(button);
           this.context.setOpen(true);
           setTimeout(() => this.context?.focusItem(0));
         } else {
-          // Move to next item
           const currentIndex = this.context.focusedIndex();
           const itemCount = this.context.itemValues().length;
-          this.context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
+          this.context.focusItem((currentIndex + 1) % itemCount);
         }
         break;
       case 'ArrowUp':
         event.preventDefault();
         if (!this.context.open()) {
-          // Save trigger element
           const button = this.triggerButton()?.nativeElement;
-          if (button) {
-            this.context.triggerElement.set(button);
-          }
+          if (button) this.context.triggerElement.set(button);
           this.context.setOpen(true);
           const lastIndex = this.context.itemValues().length - 1;
           setTimeout(() => this.context?.focusItem(lastIndex));
         } else {
-          // Move to previous item
           const currentIndex = this.context.focusedIndex();
-          this.context.focusItem(Math.max(currentIndex - 1, 0));
+          const itemCount = this.context.itemValues().length;
+          this.context.focusItem(currentIndex > 0 ? currentIndex - 1 : itemCount - 1);
         }
         break;
       case 'Escape':

package/src/app/lib/components/ui/select/select.component.ts

@@ -199,6 +199,11 @@ export class Select {
   private readonly _isDisabled = signal<boolean>(false);
 
   private readonly ariaIds = this._ariaIdService.generateMenuIds('select');
+  /** Internal typeahead signals */
+  private readonly _itemLabels = signal<Map<string, string>>(new Map());
+  private readonly _typeaheadBuffer = signal<string>('');
+  private readonly _typeaheadTimeout = signal<ReturnType<typeof setTimeout> | null>(null);
+
   /** Context for child components */
   readonly context: SelectContext = {
     value: this._value,
@@ -232,6 +237,11 @@ export class Select {
       }
     },
     focusItem: (index: number) => this.focusItemByIndex(index),
+    itemLabels: this._itemLabels,
+    typeaheadBuffer: this._typeaheadBuffer,
+    typeaheadTimeout: this._typeaheadTimeout,
+    handleTypeahead: (char: string) => this.handleTypeahead(char),
+    focusMatchingItem: (query: string) => this.focusMatchingItem(query),
   };
 
   /** Focus an item by index */
@@ -248,4 +258,40 @@ export class Select {
       selectItem.focus();
     }
   }
+
+  /** Handle typeahead: accumulate char, clear after 500 ms, then focus matching item */
+  private handleTypeahead(char: string): void {
+    // Clear existing timeout
+    const existingTimeout = this._typeaheadTimeout();
+    if (existingTimeout !== null) {
+      clearTimeout(existingTimeout);
+    }
+
+    const newBuffer = this._typeaheadBuffer() + char;
+    this._typeaheadBuffer.set(newBuffer);
+
+    const timeout = setTimeout(() => {
+      this._typeaheadBuffer.set('');
+      this._typeaheadTimeout.set(null);
+    }, 500);
+    this._typeaheadTimeout.set(timeout);
+
+    this.focusMatchingItem(newBuffer);
+  }
+
+  /** Focus the first item whose label starts with query (case-insensitive) */
+  private focusMatchingItem(query: string): void {
+    const values = this.context.itemValues();
+    const labels = this._itemLabels();
+    const lowerQuery = query.toLowerCase();
+
+    const matchIndex = values.findIndex((v) => {
+      const label = labels.get(v) ?? v;
+      return label.toLowerCase().startsWith(lowerQuery);
+    });
+
+    if (matchIndex !== -1) {
+      this.focusItemByIndex(matchIndex);
+    }
+  }
 }

package/src/app/lib/components/ui/sheet/sheet-content.component.ts

@@ -83,13 +83,21 @@ import { sheetVariants, type SheetVariants } from './sheet-variants';
 })
 export class SheetContent implements OnDestroy {
   constructor() {
-    // Handle body scroll lock based on open state (browser-only via effect + afterNextRender)
+    let wasOpen = false;
+
+    // Handle body scroll lock and focus restoration based on open state
     effect(() => {
       const isOpen = this.context.open();
       if (isOpen) {
+        wasOpen = true;
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
+        // Restore focus whenever sheet closes (covers close button, overlay, Escape, programmatic)
+        if (wasOpen) {
+          this.restoreFocus();
+        }
+        wasOpen = false;
       }
     });
   }
@@ -105,13 +113,14 @@ export class SheetContent implements OnDestroy {
     cn(sheetVariants({ side: this.side() }), this.class()),
   );
 
-  /** Previous body overflow for restoration */
+  /** Previous body overflow/padding for restoration */
   private previousBodyOverflow = '';
+  private previousBodyPaddingRight = '';
 
   ngOnDestroy(): void {
     // Restore body scroll
     this.unlockBodyScroll();
-    // Restore focus to trigger element
+    // Restore focus to trigger element (fallback if not already called via effect)
     this.restoreFocus();
   }
 
@@ -120,25 +129,33 @@ export class SheetContent implements OnDestroy {
     this.close();
   }
   onEscapeKey(): void {
-    this.close();
+    // Guard: only close when the sheet is actually open (not during exit animation)
+    if (this.context.open()) {
+      this.close();
+    }
   }
   onClose(): void {
     this.close();
   }
 
   private lockBodyScroll(): void {
-    if (typeof document !== 'undefined') {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
       this.previousBodyOverflow = document.body.style.overflow;
+      this.previousBodyPaddingRight = document.body.style.paddingRight;
       document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = scrollbarWidth + 'px';
+      }
     }
   }
   private unlockBodyScroll(): void {
     if (typeof document !== 'undefined') {
       document.body.style.overflow = this.previousBodyOverflow;
+      document.body.style.paddingRight = this.previousBodyPaddingRight;
     }
   }
   private close(): void {
-    this.restoreFocus();
     this.context.setOpen(false);
   }
   private restoreFocus(): void {

package/src/app/lib/components/ui/slider/slider.component.ts

@@ -346,10 +346,10 @@ export class Slider implements ControlValueAccessor {
         newValue -= stepValue * increment;
         break;
       case 'ArrowUp':
-        newValue += stepValue;
+        newValue += stepValue * (this.inverted() ? -1 : 1);
         break;
       case 'ArrowDown':
-        newValue -= stepValue;
+        newValue -= stepValue * (this.inverted() ? -1 : 1);
         break;
       case 'PageUp':
         newValue += largeStep;

package/src/app/lib/components/ui/sonner/index.ts

@@ -0,0 +1,2 @@
+export { toast } from 'ngx-sonner';
+export { Sonner } from './sonner.component';

package/src/app/lib/components/ui/sonner/sonner.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgxSonnerToaster } from 'ngx-sonner';
+
+export { toast } from 'ngx-sonner';
+
+/**
+ * Sonner component - toast notification toaster.
+ * Wraps ngx-sonner's Toaster with shadcn/ui default styling.
+ * Place once near the root of your app.
+ *
+ * @example
+ * <!-- In app root template -->
+ * <Sonner />
+ *
+ * <!-- With custom position -->
+ * <Sonner position="top-right" />
+ *
+ * <!-- Then trigger toasts anywhere -->
+ * import { toast } from '@/lib/components/ui/sonner';
+ * toast('Hello world');
+ * toast.success('Saved!');
+ * toast.error('Something went wrong');
+ */
+@Component({
+  selector: 'Sonner',
+  imports: [NgxSonnerToaster],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'attr.data-slot': '"sonner"',
+    style: 'display: contents',
+  },
+  template: `
+    <ngx-sonner-toaster
+      [theme]="theme()"
+      [position]="position()"
+      [richColors]="richColors()"
+      [expand]="expand()"
+      [duration]="duration()"
+      [visibleToasts]="visibleToasts()"
+      [closeButton]="closeButton()"
+      [offset]="offset()"
+      [dir]="dir()"
+      [class]="toasterClass()"
+    />
+  `,
+})
+export class Sonner {
+  /** Visual theme */
+  readonly theme = input<'light' | 'dark' | 'system'>('system');
+  /** Position of the toaster */
+  readonly position = input<
+    'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  >('bottom-right');
+  /** Use rich colors for success/error/warning/info */
+  readonly richColors = input<boolean>(false);
+  /** Expand toasts by default */
+  readonly expand = input<boolean>(false);
+  /** Default duration in ms */
+  readonly duration = input<number>(4000);
+  /** Max visible toasts */
+  readonly visibleToasts = input<number>(3);
+  /** Show close button on each toast */
+  readonly closeButton = input<boolean>(false);
+  /** Offset from edge */
+  readonly offset = input<string | number | null>(null);
+  /** Text direction */
+  readonly dir = input<'ltr' | 'rtl' | 'auto'>('auto');
+  /** Additional CSS classes passed to the toaster */
+  readonly toasterClass = input<string>('toaster group');
+}

package/src/app/lib/components/ui/switch/switch.component.ts

@@ -103,9 +103,7 @@ export type SwitchProps = {
       [attr.data-disabled]="isDisabled() ? '' : null"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      [style.backgroundColor]="checked() ? checkedBgColor() : 'var(--color-input)'"
       (click)="toggle()"
-      (keydown)="onKeyDown($event)"
     >
       <span data-slot="switch-thumb" [class]="thumbClass()" [attr.data-state]="state()"></span>
     </button>
@@ -125,7 +123,7 @@ export type SwitchProps = {
   `,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'switch',
+    'attr.data-slot': '"switch"',
   },
   providers: [
     {
@@ -168,9 +166,6 @@ export class Switch implements ControlValueAccessor {
   readonly class = input<string>('');
   /** Additional CSS classes to apply to the inner track button */
   readonly buttonClass = input<string>('');
-  /** Background color for checked state (hex, rgb, or CSS color name) */
-  readonly checkedBgColor = input<string>('rgb(59, 130, 246)');
-
   /** Current state for data attribute */
   protected readonly state = computed(
     (): SwitchState => (this.checked() ? 'checked' : 'unchecked'),
@@ -246,12 +241,4 @@ export class Switch implements ControlValueAccessor {
     }
   }
 
-  /** Handle keyboard events */
-  protected onKeyDown(event: KeyboardEvent): void {
-    // Switch should only respond to Space (Enter is handled by button default)
-    if (event.key === ' ') {
-      // Let the click handler deal with it
-      return;
-    }
-  }
 }

package/src/app/lib/components/ui/tabs/tabs-list.component.ts

@@ -187,6 +187,13 @@ export class TabsList {
 
     if (handled) {
       event.preventDefault();
+      if (typeof document === 'undefined') return;
+
+      // Skip disabled tabs — scan in the movement direction
+      const direction =
+        event.key === 'ArrowLeft' || event.key === 'ArrowUp' || event.key === 'End' ? -1 : 1;
+      newIndex = this.findEnabledIndex(tabValues, newIndex, direction);
+
       const newValue = tabValues[newIndex];
 
       // In automatic mode, activate on focus; in manual mode, just focus
@@ -201,7 +208,20 @@ export class TabsList {
     }
   }
 
+  private findEnabledIndex(tabValues: string[], startIndex: number, direction: 1 | -1): number {
+    const length = tabValues.length;
+    let index = startIndex;
+    for (let i = 0; i < length; i++) {
+      const tabId = this.tabs.getTabId(tabValues[index]);
+      const el = typeof document !== 'undefined' ? document.getElementById(tabId) : null;
+      if (!el?.hasAttribute('data-disabled')) return index;
+      index = ((index + direction) + length) % length;
+    }
+    return startIndex;
+  }
+
   private updateIndicator(): void {
+    if (typeof document === 'undefined') return;
     const activeValue = this.tabs.value();
     if (!activeValue) return;
 

package/src/app/lib/components/ui/tabs/tabs-trigger.component.ts

@@ -83,7 +83,6 @@ export interface TabsTriggerProps {
     '[attr.aria-controls]': 'panelId()',
     '[attr.aria-disabled]': 'disabled() || null',
     '[attr.tabindex]': 'isActive() ? 0 : -1',
-    '[attr.disabled]': 'disabled() ? "" : null',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',