@arclux/arc-ui-angular 1.9.2 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.9.2",
+  "version": "1.10.1",
   "description": "Angular standalone component wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "@angular/core": ">=17.0.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.9.2"
+    "@arclux/arc-ui": "1.10.1"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Avatar.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-avatar',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-avatar [attr.src]="src" [attr.name]="name" [attr.size]="size" [attr.shape]="shape" [attr.status]="status"><ng-content /></arc-avatar>`,
+  template: `<arc-avatar [attr.src]="src" [attr.name]="name" [attr.size]="size" [attr.shape]="shape" [attr.status]="status" [attr._imgState]="_imgState"><ng-content /></arc-avatar>`,
 })
 export class Avatar {
   @Input() src: string = '';
@@ -15,4 +15,5 @@ export class Avatar {
   @Input() size: 'sm' | 'md' | 'lg' = 'md';
   @Input() shape: 'square' | 'rounded' = 'circle';
   @Input() status: 'online' | 'offline' | 'busy' | 'away' = '';
+  @Input() _imgState: string = 'loading';
 }

package/src/content/DataTable.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-data-table',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-data-table [attr.rows]="rows" [sortable]="sortable" [selectable]="selectable" [attr.sortColumn]="sortColumn" [attr.sortDirection]="sortDirection" [attr._columns]="_columns" [attr._selectedRows]="_selectedRows" (arc-sort)="arcSort.emit($event)" (arc-select-all)="arcSelectAll.emit($event)" (arc-row-select)="arcRowSelect.emit($event)"><ng-content /></arc-data-table>`,
+  template: `<arc-data-table [attr.rows]="rows" [sortable]="sortable" [selectable]="selectable" [attr.sortColumn]="sortColumn" [attr.sortDirection]="sortDirection" [virtual]="virtual" [attr.rowHeight]="rowHeight" [attr._columns]="_columns" [attr._selectedRows]="_selectedRows" [attr._startIndex]="_startIndex" [attr._visibleCount]="_visibleCount" (arc-sort)="arcSort.emit($event)" (arc-select-all)="arcSelectAll.emit($event)" (arc-row-select)="arcRowSelect.emit($event)"><ng-content /></arc-data-table>`,
 })
 export class DataTable {
   @Input() rows: unknown[] = [];
@@ -15,8 +15,12 @@ export class DataTable {
   @Input() selectable: boolean = false;
   @Input() sortColumn: string = '';
   @Input() sortDirection: string = 'asc';
+  @Input() virtual: boolean = false;
+  @Input() rowHeight: number = 40;
   @Input() _columns: string = [];
   @Input() _selectedRows: string = 'new Set()';
+  @Input() _startIndex: string = 0;
+  @Input() _visibleCount: string = 0;
   @Output() arcSort = new EventEmitter<CustomEvent>();
   @Output() arcSelectAll = new EventEmitter<CustomEvent>();
   @Output() arcRowSelect = new EventEmitter<CustomEvent>();

package/src/content/Image.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-image',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-image [attr.src]="src" [attr.alt]="alt" [attr.aspect]="aspect" [attr.fit]="fit" [attr.loading]="loading" [attr.fallback]="fallback" [attr._state]="_state" (arc-load)="arcLoad.emit($event)" (arc-error)="arcError.emit($event)"><ng-content /></arc-image>`,
+})
+export class Image {
+  @Input() src: string = '';
+  @Input() alt: string = '';
+  @Input() aspect: '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16' = '';
+  @Input() fit: 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
+  @Input() loading: string = 'lazy';
+  @Input() fallback: string = '';
+  @Input() _state: string = 'loading';
+  @Output() arcLoad = new EventEmitter<CustomEvent>();
+  @Output() arcError = new EventEmitter<CustomEvent>();
+}

package/src/content/List.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-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list [attr.variant]="variant" [attr.size]="size" [selectable]="selectable" [multiple]="multiple" [attr.value]="value" [attr._items]="_items" (arc-change)="arcChange.emit($event)" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list>`,
+})
+export class List {
+  @Input() variant: 'bordered' | 'separated' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() selectable: boolean = false;
+  @Input() multiple: boolean = false;
+  @Input() value: string = '';
+  @Input() _items: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/content/ListItem.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-list-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list-item [attr.value]="value" [selected]="selected" [disabled]="disabled" [attr.href]="href" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" [attr._hasDescription]="_hasDescription" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list-item>`,
+})
+export class ListItem {
+  @Input() value: string = '';
+  @Input() selected: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() href: string = '';
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
+  @Input() _hasDescription: string = false;
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/content/ScrollIndicator.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-indicator',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-scroll-indicator [attr.target]="target" [attr.position]="position" [attr.size]="size" [attr.color]="color" [attr._progress]="_progress"><ng-content /></arc-scroll-indicator>`,
+})
+export class ScrollIndicator {
+  @Input() target: string = '';
+  @Input() position: 'bottom' = 'top';
+  @Input() size: 'sm' | 'md' | 'lg' = 'sm';
+  @Input() color: 'gradient' = 'accent';
+  @Input() _progress: string = 0;
+}

package/src/content/Separator.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-separator',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-separator [attr.orientation]="orientation" [attr.label]="label" [attr.variant]="variant"><ng-content /></arc-separator>`,
+})
+export class Separator {
+  @Input() orientation: 'vertical' = 'horizontal';
+  @Input() label: string = '';
+  @Input() variant: 'dashed' | 'dotted' | 'fade' = 'line';
+}

package/src/content/VirtualList.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-virtual-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-virtual-list [attr.items]="items" [attr.itemHeight]="itemHeight" [attr.overscan]="overscan" [attr._startIndex]="_startIndex" [attr._visibleCount]="_visibleCount"><ng-content /></arc-virtual-list>`,
+})
+export class VirtualList {
+  @Input() items: unknown[] = [];
+  @Input() itemHeight: number = 40;
+  @Input() overscan: number = 5;
+  @Input() _startIndex: string = 0;
+  @Input() _visibleCount: string = 0;
+}

package/src/content/index.ts

@@ -37,3 +37,8 @@ export { Tag } from './Tag.js';
 export { Truncate } from './Truncate.js';
 export { CtaBanner } from './CtaBanner.js';
 export { IconLibrary } from './IconLibrary.js';
+export { Image } from './Image.js';
+export { ListItem } from './ListItem.js';
+export { ScrollIndicator } from './ScrollIndicator.js';
+export { Separator } from './Separator.js';
+export { VirtualList } from './VirtualList.js';

package/src/data/AnimatedNumber.ts

@@ -0,0 +1,20 @@
+// 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-animated-number',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-animated-number [attr.value]="value" [attr.duration]="duration" [attr.format]="format" [attr.prefix]="prefix" [attr.suffix]="suffix" [attr.decimals]="decimals" [attr.locale]="locale"><ng-content /></arc-animated-number>`,
+})
+export class AnimatedNumber {
+  @Input() value: number = 0;
+  @Input() duration: number = 1000;
+  @Input() format: string = 'number';
+  @Input() prefix: string = '';
+  @Input() suffix: string = '';
+  @Input() decimals: number = 0;
+  @Input() locale: string = 'en-US';
+}

package/src/data/Badge.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-badge',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-badge [attr.variant]="variant" [attr.size]="size" [attr.color]="color"><ng-content /></arc-badge>`,
+})
+export class Badge {
+  @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() color: string = '';
+}

package/src/data/DataTable.ts

@@ -0,0 +1,27 @@
+// 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-data-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-data-table [attr.rows]="rows" [sortable]="sortable" [selectable]="selectable" [attr.sortColumn]="sortColumn" [attr.sortDirection]="sortDirection" [virtual]="virtual" [attr.rowHeight]="rowHeight" [attr._columns]="_columns" [attr._selectedRows]="_selectedRows" [attr._startIndex]="_startIndex" [attr._visibleCount]="_visibleCount" (arc-sort)="arcSort.emit($event)" (arc-select-all)="arcSelectAll.emit($event)" (arc-row-select)="arcRowSelect.emit($event)"><ng-content /></arc-data-table>`,
+})
+export class DataTable {
+  @Input() rows: unknown[] = [];
+  @Input() sortable: boolean = false;
+  @Input() selectable: boolean = false;
+  @Input() sortColumn: string = '';
+  @Input() sortDirection: string = 'asc';
+  @Input() virtual: boolean = false;
+  @Input() rowHeight: number = 40;
+  @Input() _columns: string = [];
+  @Input() _selectedRows: string = 'new Set()';
+  @Input() _startIndex: string = 0;
+  @Input() _visibleCount: string = 0;
+  @Output() arcSort = new EventEmitter<CustomEvent>();
+  @Output() arcSelectAll = new EventEmitter<CustomEvent>();
+  @Output() arcRowSelect = new EventEmitter<CustomEvent>();
+}

package/src/data/List.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-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list [attr.variant]="variant" [attr.size]="size" [selectable]="selectable" [multiple]="multiple" [attr.value]="value" [attr._items]="_items" (arc-change)="arcChange.emit($event)" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list>`,
+})
+export class List {
+  @Input() variant: 'bordered' | 'separated' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() selectable: boolean = false;
+  @Input() multiple: boolean = false;
+  @Input() value: string = '';
+  @Input() _items: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/data/ListItem.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-list-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list-item [attr.value]="value" [selected]="selected" [disabled]="disabled" [attr.href]="href" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" [attr._hasDescription]="_hasDescription" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list-item>`,
+})
+export class ListItem {
+  @Input() value: string = '';
+  @Input() selected: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() href: string = '';
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
+  @Input() _hasDescription: string = false;
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/data/Meter.ts

@@ -0,0 +1,20 @@
+// 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-meter',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-meter [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.low]="low" [attr.high]="high" [attr.optimum]="optimum" [attr.label]="label"><ng-content /></arc-meter>`,
+})
+export class Meter {
+  @Input() value: number = 0;
+  @Input() min: number = 0;
+  @Input() max: number = 100;
+  @Input() low: number = 'undefined';
+  @Input() high: number = 'undefined';
+  @Input() optimum: number = 'undefined';
+  @Input() label: string = '';
+}

package/src/data/Stat.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-stat',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stat [attr.value]="value" [attr.label]="label" [attr.trend]="trend" [attr.change]="change"><ng-content /></arc-stat>`,
+})
+export class Stat {
+  @Input() value: string = '';
+  @Input() label: string = '';
+  @Input() trend: 'up' | 'down' | 'neutral' = '';
+  @Input() change: string = '';
+}

package/src/data/Step.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-step',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-step [attr.label]="label"><ng-content /></arc-step>`,
+})
+export class Step {
+  @Input() label: string = '';
+}

package/src/data/Stepper.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-stepper',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stepper [attr.active]="active" [attr._steps]="_steps"><ng-content /></arc-stepper>`,
+})
+export class Stepper {
+  @Input() active: number = 0;
+  @Input() _steps: string = [];
+}

package/src/data/Table.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-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-table [attr.columns]="columns" [attr.rows]="rows" [striped]="striped" [compact]="compact"><ng-content /></arc-table>`,
+})
+export class Table {
+  @Input() columns: unknown[] = [];
+  @Input() rows: unknown[] = [];
+  @Input() striped: boolean = false;
+  @Input() compact: boolean = false;
+}

package/src/data/Tag.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-tag',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tag [attr.variant]="variant" [attr.size]="size" [removable]="removable" [disabled]="disabled" [attr.color]="color" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-tag>`,
+})
+export class Tag {
+  @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() removable: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() color: string = '';
+  @Output() arcRemove = new EventEmitter<CustomEvent>();
+}

package/src/data/Timeline.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-timeline',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline [attr._items]="_items"><ng-content /></arc-timeline>`,
+})
+export class Timeline {
+  @Input() _items: string = [];
+}

package/src/data/TimelineItem.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-timeline-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline-item [attr.heading]="heading" [attr.date]="date"><ng-content /></arc-timeline-item>`,
+})
+export class TimelineItem {
+  @Input() heading: string = '';
+  @Input() date: string = '';
+}

package/src/data/ValueCard.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-value-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-value-card [attr.icon]="icon" [attr.heading]="heading" [attr.description]="description"><ng-content /></arc-value-card>`,
+})
+export class ValueCard {
+  @Input() icon: string = '';
+  @Input() heading: string = '';
+  @Input() description: string = '';
+}

package/src/feedback/Announcement.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-announcement',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-announcement [attr.politeness]="politeness" [attr.message]="message"><ng-content /></arc-announcement>`,
+})
+export class Announcement {
+  @Input() politeness: string = 'polite';
+  @Input() message: string = '';
+}

package/src/feedback/Banner.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-banner',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-banner [attr.variant]="variant" [dismissible]="dismissible" [sticky]="sticky" (arc-dismiss)="arcDismiss.emit($event)"><ng-content /></arc-banner>`,
+})
+export class Banner {
+  @Input() variant: string = 'info';
+  @Input() dismissible: boolean = false;
+  @Input() sticky: boolean = false;
+  @Output() arcDismiss = new EventEmitter<CustomEvent>();
+}

package/src/feedback/CommandPalette.ts

@@ -7,13 +7,12 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-command-palette [open]="open" [attr.placeholder]="placeholder" [attr._query]="_query" [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/feedback/Confirm.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-confirm',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-confirm [open]="open" [attr.heading]="heading" [attr.message]="message" [attr.variant]="variant" (arc-confirm)="arcConfirm.emit($event)" (arc-cancel)="arcCancel.emit($event)"><ng-content /></arc-confirm>`,
+})
+export class Confirm {
+  @Input() open: boolean = false;
+  @Input() heading: string = '';
+  @Input() message: string = '';
+  @Input() variant: string = 'default';
+  @Output() arcConfirm = new EventEmitter<CustomEvent>();
+  @Output() arcCancel = new EventEmitter<CustomEvent>();
+}

package/src/feedback/ConnectionStatus.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-connection-status',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-connection-status [attr.online]="online" [attr._visible]="_visible" (arc-online)="arcOnline.emit($event)" (arc-offline)="arcOffline.emit($event)"><ng-content /></arc-connection-status>`,
+})
+export class ConnectionStatus {
+  @Input() online: string = 'navigator.onLine';
+  @Input() _visible: string = false;
+  @Output() arcOnline = new EventEmitter<CustomEvent>();
+  @Output() arcOffline = new EventEmitter<CustomEvent>();
+}

package/src/feedback/Dialog.ts

@@ -13,7 +13,7 @@ export class Dialog {
   @Input() open: boolean = false;
   @Input() heading: string = '';
   @Input() message: string = '';
-  @Input() variant: 'danger' = 'default';
+  @Input() variant: string = 'default';
   @Output() arcConfirm = new EventEmitter<CustomEvent>();
   @Output() arcCancel = new EventEmitter<CustomEvent>();
 }

package/src/feedback/DropdownMenu.ts

@@ -7,11 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-dropdown-menu',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-dropdown-menu [open]="open" [attr._focusedIndex]="_focusedIndex" [attr._children]="_children" (arc-close)="arcClose.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-dropdown-menu>`,
+  template: `<arc-dropdown-menu [open]="open" [attr._children]="_children" (arc-close)="arcClose.emit($event)" (arc-select)="arcSelect.emit($event)"><ng-content /></arc-dropdown-menu>`,
 })
 export class DropdownMenu {
   @Input() open: boolean = false;
-  @Input() _focusedIndex: string = -1;
   @Input() _children: string = [];
   @Output() arcClose = new EventEmitter<CustomEvent>();
   @Output() arcSelect = new EventEmitter<CustomEvent>();

package/src/feedback/GuidedTour.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-guided-tour',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-guided-tour [attr.steps]="steps" [attr.active]="active" [open]="open" (arc-change)="arcChange.emit($event)" (arc-complete)="arcComplete.emit($event)" (arc-dismiss)="arcDismiss.emit($event)"><ng-content /></arc-guided-tour>`,
+})
+export class GuidedTour {
+  @Input() steps: string = [];
+  @Input() active: string = 0;
+  @Input() open: boolean = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcComplete = new EventEmitter<CustomEvent>();
+  @Output() arcDismiss = new EventEmitter<CustomEvent>();
+}

package/src/feedback/HoverCard.ts

@@ -10,7 +10,7 @@ import '@arclux/arc-ui';
   template: `<arc-hover-card [attr.position]="position" [attr.openDelay]="openDelay" [attr.closeDelay]="closeDelay" [attr._visible]="_visible" (arc-open)="arcOpen.emit($event)" (arc-close)="arcClose.emit($event)"><ng-content /></arc-hover-card>`,
 })
 export class HoverCard {
-  @Input() position: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+  @Input() position: string = 'bottom';
   @Input() openDelay: number = 400;
   @Input() closeDelay: number = 300;
   @Input() _visible: string = false;

package/src/feedback/InlineMessage.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-inline-message',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-inline-message [attr.variant]="variant"><ng-content /></arc-inline-message>`,
+})
+export class InlineMessage {
+  @Input() variant: string = 'info';
+}