@arclux/arc-ui-angular 1.0.0

package/src/navigation/Drawer.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-drawer',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-drawer [open]="open" [attr.position]="position" [attr.heading]="heading" (arc-close)="arcClose.emit($event)"><ng-content /></arc-drawer>`,
+})
+export class Drawer {
+  @Input() open: boolean = false;
+  @Input() position: 'left' | 'right' = 'left';
+  @Input() heading: string = '';
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

package/src/navigation/Footer.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-footer',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-footer [compact]="compact" [border]="border"><ng-content /></arc-footer>`,
+})
+export class Footer {
+  @Input() compact: boolean = false;
+  @Input() border: boolean = true;
+}

package/src/navigation/Link.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-link',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-link [attr.href]="href" [attr.variant]="variant" [active]="active" [external]="external"><ng-content /></arc-link>`,
+})
+export class Link {
+  @Input() href: string = '';
+  @Input() variant: 'muted' | 'nav' = 'default';
+  @Input() active: boolean = false;
+  @Input() external: boolean = false;
+}

package/src/navigation/NavItem.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-nav-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-nav-item [attr.href]="href" [active]="active" [attr.description]="description"><ng-content /></arc-nav-item>`,
+})
+export class NavItem {
+  @Input() href: string = '';
+  @Input() active: boolean = false;
+  @Input() description: string = '';
+}

package/src/navigation/NavigationMenu.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-navigation-menu',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-navigation-menu [attr._items]="_items" [attr._openIndex]="_openIndex" [attr._mobileOpen]="_mobileOpen" [attr._mobileClosing]="_mobileClosing" [attr._mobileExpandedIndex]="_mobileExpandedIndex" (arc-mobile-menu-toggle)="arcMobileMenuToggle.emit($event)"><ng-content /></arc-navigation-menu>`,
+})
+export class NavigationMenu {
+  @Input() _items: string = [];
+  @Input() _openIndex: string = -1;
+  @Input() _mobileOpen: string = false;
+  @Input() _mobileClosing: string = false;
+  @Input() _mobileExpandedIndex: string = -1;
+  @Output() arcMobileMenuToggle = new EventEmitter<CustomEvent>();
+}

package/src/navigation/Pagination.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-pagination',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-pagination [attr.total]="total" [attr.current]="current" [attr.siblings]="siblings" (arc-change)="arcChange.emit($event)"><ng-content /></arc-pagination>`,
+})
+export class Pagination {
+  @Input() total: number = 1;
+  @Input() current: number = 1;
+  @Input() siblings: number = 1;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/ScrollSpy.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-scroll-spy',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-scroll-spy [attr.active]="active" [attr.offset]="offset" [attr._active]="_active" [attr._links]="_links" (arc-change)="arcChange.emit($event)"><ng-content /></arc-scroll-spy>`,
+})
+export class ScrollSpy {
+  @Input() active: string = '';
+  @Input() offset: number = 80;
+  @Input() _active: string = '';
+  @Input() _links: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/ScrollToTop.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-scroll-to-top',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-scroll-to-top [attr.threshold]="threshold" [smooth]="smooth" [attr.position]="position" [attr.offset]="offset" [attr._visible]="_visible"><ng-content /></arc-scroll-to-top>`,
+})
+export class ScrollToTop {
+  @Input() threshold: number = 300;
+  @Input() smooth: boolean = true;
+  @Input() position: 'bottom-right' | 'bottom-left' = 'bottom-right';
+  @Input() offset: string = 'var(--space-lg)';
+  @Input() _visible: string = false;
+}

package/src/navigation/Sidebar.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-sidebar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sidebar [attr.active]="active" [collapsed]="collapsed" [attr.width]="width" [glow]="glow" [attr._sections]="_sections"><ng-content /></arc-sidebar>`,
+})
+export class Sidebar {
+  @Input() active: string = '';
+  @Input() collapsed: boolean = false;
+  @Input() width: string = '260px';
+  @Input() glow: boolean = false;
+  @Input() _sections: string = [];
+}

package/src/navigation/SidebarLink.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-sidebar-link',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sidebar-link [attr.href]="href" [active]="active"><ng-content /></arc-sidebar-link>`,
+})
+export class SidebarLink {
+  @Input() href: string = '';
+  @Input() active: boolean = false;
+}

package/src/navigation/SidebarSection.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-sidebar-section',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sidebar-section [attr.heading]="heading" [collapsible]="collapsible" [open]="open" (arc-toggle)="arcToggle.emit($event)"><ng-content /></arc-sidebar-section>`,
+})
+export class SidebarSection {
+  @Input() heading: string = '';
+  @Input() collapsible: boolean = false;
+  @Input() open: boolean = true;
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+}

package/src/navigation/SpyLink.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-spy-link',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-spy-link [attr.target]="target"><ng-content /></arc-spy-link>`,
+})
+export class SpyLink {
+  @Input() target: string = '';
+}

package/src/navigation/Tab.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tab',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tab [attr.label]="label"><ng-content /></arc-tab>`,
+})
+export class Tab {
+  @Input() label: string = '';
+}

package/src/navigation/Tabs.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tabs',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tabs [attr.items]="items" [attr.selected]="selected" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
+})
+export class Tabs {
+  @Input() items: unknown[] = [];
+  @Input() selected: number = 0;
+  @Input() _tabs: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/TopBar.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-top-bar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-top-bar [attr.heading]="heading" [fixed]="fixed" [menuOpen]="menuOpen" [attr.mobileMenu]="mobileMenu" [attr.menuPosition]="menuPosition"><ng-content /></arc-top-bar>`,
+})
+export class TopBar {
+  @Input() heading: string = '';
+  @Input() fixed: boolean = false;
+  @Input() menuOpen: boolean = false;
+  @Input() mobileMenu: string = 'sidebar';
+  @Input() menuPosition: string = 'left';
+}

package/src/navigation/TreeItem.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tree-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tree-item [attr.label]="label" [attr.icon]="icon" [expanded]="expanded"><ng-content /></arc-tree-item>`,
+})
+export class TreeItem {
+  @Input() label: string = '';
+  @Input() icon: string = '';
+  @Input() expanded: boolean = false;
+}

package/src/navigation/TreeView.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tree-view',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tree-view [attr._items]="_items" [attr._selected]="_selected" (arc-toggle)="arcToggle.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-tree-view>`,
+})
+export class TreeView {
+  @Input() _items: string = [];
+  @Input() _selected: string = 'null';
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+  @Output() arcSelect = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Accordion.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-accordion',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-accordion [attr._items]="_items" [attr._openItems]="_openItems"><ng-content /></arc-accordion>`,
+})
+export class Accordion {
+  @Input() _items: string = [];
+  @Input() _openItems: string = 'new Set()';
+}

package/src/reactive/AccordionItem.ts

@@ -0,0 +1,14 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-accordion-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-accordion-item [attr.question]="question"><ng-content /></arc-accordion-item>`,
+})
+export class AccordionItem {
+  @Input() question: string = '';
+}

package/src/reactive/Alert.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-alert',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-alert [attr.variant]="variant" [dismissible]="dismissible" [attr.heading]="heading" (arc-dismiss)="arcDismiss.emit($event)"><ng-content /></arc-alert>`,
+})
+export class Alert {
+  @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';
+  @Input() dismissible: boolean = false;
+  @Input() heading: string = '';
+  @Output() arcDismiss = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Button.ts

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-button',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-button [attr.variant]="variant" [attr.size]="size" [attr.href]="href" [disabled]="disabled" [attr.type]="type"><ng-content /></arc-button>`,
+})
+export class Button {
+  @Input() variant: 'primary' | 'secondary' | 'ghost' = 'primary';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() href: string = '';
+  @Input() disabled: boolean = false;
+  @Input() type: string = 'button';
+}

package/src/reactive/Calendar.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-calendar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-calendar [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.month]="month" [attr.year]="year" [attr._focusedDay]="_focusedDay" (arc-navigate)="arcNavigate.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-calendar>`,
+})
+export class Calendar {
+  @Input() value: string = '';
+  @Input() min: string = '';
+  @Input() max: string = '';
+  @Input() month: number = 'now.getMonth()';
+  @Input() year: number = 'now.getFullYear()';
+  @Input() _focusedDay: string = 'null';
+  @Output() arcNavigate = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Carousel.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-carousel',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-carousel [autoPlay]="autoPlay" [attr.interval]="interval" [loop]="loop" [showDots]="showDots" [showArrows]="showArrows" [attr._current]="_current" [attr._total]="_total" (arc-change)="arcChange.emit($event)"><ng-content /></arc-carousel>`,
+})
+export class Carousel {
+  @Input() autoPlay: boolean = false;
+  @Input() interval: number = 5000;
+  @Input() loop: boolean = true;
+  @Input() showDots: boolean = true;
+  @Input() showArrows: boolean = true;
+  @Input() _current: string = 0;
+  @Input() _total: string = 0;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Checkbox.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-checkbox',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-checkbox [checked]="checked" [indeterminate]="indeterminate" [disabled]="disabled" [attr.label]="label" [attr.name]="name" [attr.value]="value" (arc-change)="arcChange.emit($event)"><ng-content /></arc-checkbox>`,
+})
+export class Checkbox {
+  @Input() checked: boolean = false;
+  @Input() indeterminate: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() name: string = '';
+  @Input() value: string = '';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Chip.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-chip',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-chip [selected]="selected" [disabled]="disabled" [attr.value]="value" (arc-change)="arcChange.emit($event)"><ng-content /></arc-chip>`,
+})
+export class Chip {
+  @Input() selected: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() value: string = '';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Collapsible.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-collapsible',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-collapsible [open]="open" [attr.heading]="heading" (arc-toggle)="arcToggle.emit($event)"><ng-content /></arc-collapsible>`,
+})
+export class Collapsible {
+  @Input() open: boolean = false;
+  @Input() heading: string = '';
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+}

package/src/reactive/ColorPicker.ts

@@ -0,0 +1,24 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-color-picker',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-color-picker [attr.value]="value" [attr.presets]="presets" [disabled]="disabled" [attr.label]="label" [attr._hue]="_hue" [attr._sat]="_sat" [attr._lit]="_lit" [attr._hexInput]="_hexInput" [attr._draggingArea]="_draggingArea" [attr._draggingHue]="_draggingHue" (arc-change)="arcChange.emit($event)"><ng-content /></arc-color-picker>`,
+})
+export class ColorPicker {
+  @Input() value: string = '#4d7ef7';
+  @Input() presets: unknown[] = [];
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() _hue: string = 225;
+  @Input() _sat: string = 92;
+  @Input() _lit: string = 64;
+  @Input() _hexInput: string = '#4d7ef7';
+  @Input() _draggingArea: string = false;
+  @Input() _draggingHue: string = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/Column.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-column',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-column [attr.key]="key" [attr.label]="label" [sortable]="sortable" [attr.width]="width"><ng-content /></arc-column>`,
+})
+export class Column {
+  @Input() key: string = '';
+  @Input() label: string = '';
+  @Input() sortable: boolean = false;
+  @Input() width: string = '';
+}

package/src/reactive/Combobox.ts

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-combobox',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-combobox [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [disabled]="disabled" [attr._query]="_query" [attr._open]="_open" [attr._activeIndex]="_activeIndex" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-combobox>`,
+})
+export class Combobox {
+  @Input() value: string = '';
+  @Input() placeholder: string = '';
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Input() _query: string = '';
+  @Input() _open: string = false;
+  @Input() _activeIndex: string = -1;
+  @Input() _options: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/reactive/CommandItem.ts

@@ -0,0 +1,15 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-command-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-command-item [attr.shortcut]="shortcut" [attr.icon]="icon"><ng-content /></arc-command-item>`,
+})
+export class CommandItem {
+  @Input() shortcut: string = '';
+  @Input() icon: string = '';
+}

package/src/reactive/CommandPalette.ts

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-command-palette',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-command-palette [open]="open" [attr.placeholder]="placeholder" [attr._query]="_query" [attr._focusedIndex]="_focusedIndex" [attr._items]="_items" (arc-select)="arcSelect.emit($event)" (arc-close)="arcClose.emit($event)"><ng-content /></arc-command-palette>`,
+})
+export class CommandPalette {
+  @Input() open: boolean = false;
+  @Input() placeholder: string = 'Type a command...';
+  @Input() _query: string = '';
+  @Input() _focusedIndex: string = 0;
+  @Input() _items: string = [];
+  @Output() arcSelect = new EventEmitter<CustomEvent>();
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

package/src/reactive/ContextMenu.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-context-menu',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-context-menu [open]="open" [attr._x]="_x" [attr._y]="_y" [attr._activeIndex]="_activeIndex" [attr._children]="_children" (arc-open)="arcOpen.emit($event)" (arc-close)="arcClose.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-context-menu>`,
+})
+export class ContextMenu {
+  @Input() open: boolean = false;
+  @Input() _x: string = 0;
+  @Input() _y: string = 0;
+  @Input() _activeIndex: string = -1;
+  @Input() _children: string = [];
+  @Output() arcOpen = new EventEmitter<CustomEvent>();
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+  @Output() arcSelect = new EventEmitter<CustomEvent>();
+}

package/src/reactive/CopyButton.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-copy-button',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-copy-button [attr.value]="value" [disabled]="disabled" [attr._copied]="_copied" (arc-copy)="arcCopy.emit($event)"><ng-content /></arc-copy-button>`,
+})
+export class CopyButton {
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+  @Input() _copied: string = false;
+  @Output() arcCopy = new EventEmitter<CustomEvent>();
+}