@arclux/arc-ui-angular 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "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.1"
+    "@arclux/arc-ui": "1.10.0"
   },
   "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/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';
+}

package/src/feedback/LoadingOverlay.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-loading-overlay',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-loading-overlay [active]="active" [attr.message]="message" [global]="global"><ng-content /></arc-loading-overlay>`,
+})
+export class LoadingOverlay {
+  @Input() active: boolean = false;
+  @Input() message: string = '';
+  @Input() global: boolean = false;
+}

package/src/feedback/Popover.ts

@@ -11,7 +11,7 @@ import '@arclux/arc-ui';
 })
 export class Popover {
   @Input() open: boolean = false;
-  @Input() position: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+  @Input() position: string = 'bottom';
   @Input() trigger: string = '';
   @Output() arcClose = new EventEmitter<CustomEvent>();
 }

package/src/feedback/ProgressToast.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-progress-toast',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-progress-toast [attr.position]="position" [attr._toasts]="_toasts" (arc-complete)="arcComplete.emit($event)" (arc-cancel)="arcCancel.emit($event)"><ng-content /></arc-progress-toast>`,
+})
+export class ProgressToast {
+  @Input() position: 'bottom-right' | 'top-right' = 'bottom-right';
+  @Input() _toasts: string = [];
+  @Output() arcComplete = new EventEmitter<CustomEvent>();
+  @Output() arcCancel = new EventEmitter<CustomEvent>();
+}

package/src/feedback/Snackbar.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-snackbar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-snackbar [attr.position]="position" [attr.duration]="duration" [attr._snackbars]="_snackbars" (arc-action)="arcAction.emit($event)" (arc-dismiss)="arcDismiss.emit($event)"><ng-content /></arc-snackbar>`,
+})
+export class Snackbar {
+  @Input() position: 'bottom-center' | 'bottom-left' | 'bottom-right' = 'bottom-center';
+  @Input() duration: number = 5000;
+  @Input() _snackbars: string = [];
+  @Output() arcAction = new EventEmitter<CustomEvent>();
+  @Output() arcDismiss = new EventEmitter<CustomEvent>();
+}

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

package/src/index.ts

@@ -116,3 +116,43 @@ export { MenuItem } from './shared/MenuItem.js';
 export { Option } from './shared/Option.js';
 export { CtaBanner } from './content/CtaBanner.js';
 export { IconLibrary } from './content/IconLibrary.js';
+export { Image } from './content/Image.js';
+export { ListItem } from './content/ListItem.js';
+export { List } from './content/List.js';
+export { ScrollIndicator } from './content/ScrollIndicator.js';
+export { Separator } from './content/Separator.js';
+export { VirtualList } from './content/VirtualList.js';
+export { ButtonGroup } from './input/ButtonGroup.js';
+export { Fieldset } from './input/Fieldset.js';
+export { InputGroup } from './input/InputGroup.js';
+export { Label } from './input/Label.js';
+export { SwitchGroup } from './input/SwitchGroup.js';
+export { Hotkey } from './input/Hotkey.js';
+export { AnchorNav } from './navigation/AnchorNav.js';
+export { BottomNav } from './navigation/BottomNav.js';
+export { BreadcrumbMenu } from './navigation/BreadcrumbMenu.js';
+export { CommandBar } from './navigation/CommandBar.js';
+export { PageIndicator } from './navigation/PageIndicator.js';
+export { Rail } from './navigation/Rail.js';
+export { SkipLink } from './navigation/SkipLink.js';
+export { SpeedDial } from './navigation/SpeedDial.js';
+export { StepperNav } from './navigation/StepperNav.js';
+export { AspectGrid } from './layout/AspectGrid.js';
+export { Center } from './layout/Center.js';
+export { Cluster } from './layout/Cluster.js';
+export { Dock } from './layout/Dock.js';
+export { FloatBar } from './layout/FloatBar.js';
+export { Inset } from './layout/Inset.js';
+export { Masonry } from './layout/Masonry.js';
+export { ResponsiveSwitcher } from './layout/ResponsiveSwitcher.js';
+export { Sticky } from './layout/Sticky.js';
+export { Announcement } from './feedback/Announcement.js';
+export { Banner } from './feedback/Banner.js';
+export { Confirm } from './feedback/Confirm.js';
+export { ConnectionStatus } from './feedback/ConnectionStatus.js';
+export { GuidedTour } from './feedback/GuidedTour.js';
+export { InlineMessage } from './feedback/InlineMessage.js';
+export { LoadingOverlay } from './feedback/LoadingOverlay.js';
+export { ProgressToast } from './feedback/ProgressToast.js';
+export { Snackbar } from './feedback/Snackbar.js';
+export { Spotlight } from './feedback/Spotlight.js';

package/src/input/ButtonGroup.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-button-group',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-button-group [attr.orientation]="orientation" [attr.size]="size" [attr.variant]="variant"><ng-content /></arc-button-group>`,
+})
+export class ButtonGroup {
+  @Input() orientation: 'vertical' = 'horizontal';
+  @Input() size: string = 'md';
+  @Input() variant: string = '';
+}

package/src/input/Fieldset.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-fieldset',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-fieldset [attr.legend]="legend" [attr.description]="description" [disabled]="disabled" [attr.error]="error" [attr.variant]="variant" [attr._hasLegend]="_hasLegend" [attr._hasActions]="_hasActions"><ng-content /></arc-fieldset>`,
+})
+export class Fieldset {
+  @Input() legend: string = '';
+  @Input() description: string = '';
+  @Input() disabled: boolean = false;
+  @Input() error: string = '';
+  @Input() variant: 'card' = 'default';
+  @Input() _hasLegend: string = false;
+  @Input() _hasActions: string = false;
+}

package/src/input/Hotkey.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-hotkey',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-hotkey [attr.keys]="keys" [disabled]="disabled" [global]="global" (arc-trigger)="arcTrigger.emit($event)"><ng-content /></arc-hotkey>`,
+})
+export class Hotkey {
+  @Input() keys: string = '';
+  @Input() disabled: boolean = false;
+  @Input() global: boolean = false;
+  @Output() arcTrigger = new EventEmitter<CustomEvent>();
+}

package/src/input/InputGroup.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-input-group',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-input-group [attr.size]="size" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix"><ng-content /></arc-input-group>`,
+})
+export class InputGroup {
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
+}

package/src/input/Label.ts

@@ -0,0 +1,19 @@
+// 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-label',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-label [attr.for]="for" [required]="required" [attr.size]="size" [disabled]="disabled" [attr._hasDescription]="_hasDescription" [attr._hasTooltip]="_hasTooltip"><ng-content /></arc-label>`,
+})
+export class Label {
+  @Input() for: string = '';
+  @Input() required: boolean = false;
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() disabled: boolean = false;
+  @Input() _hasDescription: string = false;
+  @Input() _hasTooltip: string = false;
+}

package/src/input/SwitchGroup.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-switch-group',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-switch-group [attr.label]="label" [attr.orientation]="orientation" [attr.size]="size" [disabled]="disabled"><ng-content /></arc-switch-group>`,
+})
+export class SwitchGroup {
+  @Input() label: string = '';
+  @Input() orientation: 'horizontal' = 'vertical';
+  @Input() size: string = 'md';
+  @Input() disabled: boolean = false;
+}

package/src/layout/AspectGrid.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-aspect-grid',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-aspect-grid [attr.columns]="columns" [attr.ratio]="ratio" [attr.gap]="gap"><ng-content /></arc-aspect-grid>`,
+})
+export class AspectGrid {
+  @Input() columns: number = 3;
+  @Input() ratio: string = '1/1';
+  @Input() gap: 'sm' | 'md' | 'lg' = 'md';
+}

package/src/layout/Center.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-center',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-center [attr.maxWidth]="maxWidth" [intrinsic]="intrinsic" [text]="text"><ng-content /></arc-center>`,
+})
+export class Center {
+  @Input() maxWidth: string = '60ch';
+  @Input() intrinsic: boolean = false;
+  @Input() text: boolean = false;
+}

package/src/layout/Cluster.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-cluster',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-cluster [attr.gap]="gap" [attr.align]="align" [attr.justify]="justify"><ng-content /></arc-cluster>`,
+})
+export class Cluster {
+  @Input() gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @Input() align: 'start' | 'center' | 'end' = 'center';
+  @Input() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' = 'start';
+}

package/src/layout/Dock.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-dock',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-dock [attr.position]="position" [autoHide]="autoHide" [open]="open" [attr._hovered]="_hovered"><ng-content /></arc-dock>`,
+})
+export class Dock {
+  @Input() position: 'bottom' | 'left' | 'right' = 'bottom';
+  @Input() autoHide: boolean = false;
+  @Input() open: boolean = false;
+  @Input() _hovered: string = false;
+}

package/src/layout/FloatBar.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-float-bar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-float-bar [open]="open" [attr.position]="position"><ng-content /></arc-float-bar>`,
+})
+export class FloatBar {
+  @Input() open: boolean = false;
+  @Input() position: 'top' = 'bottom';
+}

package/src/layout/Inset.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-inset',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-inset [attr.space]="space" [bleed]="bleed"><ng-content /></arc-inset>`,
+})
+export class Inset {
+  @Input() space: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
+  @Input() bleed: boolean = false;
+}

package/src/layout/Masonry.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-masonry',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-masonry [attr.columns]="columns" [attr.gap]="gap"><ng-content /></arc-masonry>`,
+})
+export class Masonry {
+  @Input() columns: number = 3;
+  @Input() gap: 'sm' | 'md' | 'lg' = 'md';
+}

package/src/layout/ResponsiveSwitcher.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-responsive-switcher',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-responsive-switcher [attr.threshold]="threshold" [attr.gap]="gap"><ng-content /></arc-responsive-switcher>`,
+})
+export class ResponsiveSwitcher {
+  @Input() threshold: string = '600px';
+  @Input() gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+}

package/src/layout/Sticky.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-sticky',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sticky [attr.offset]="offset" [stuck]="stuck" (arc-stuck)="arcStuck.emit($event)"><ng-content /></arc-sticky>`,
+})
+export class Sticky {
+  @Input() offset: string = '0px';
+  @Input() stuck: boolean = false;
+  @Output() arcStuck = new EventEmitter<CustomEvent>();
+}

package/src/navigation/AnchorNav.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-anchor-nav',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-anchor-nav [attr.orientation]="orientation" [attr.value]="value" [attr.items]="items" (arc-change)="arcChange.emit($event)"><ng-content /></arc-anchor-nav>`,
+})
+export class AnchorNav {
+  @Input() orientation: 'vertical' = 'horizontal';
+  @Input() value: string = '';
+  @Input() items: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/BottomNav.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-bottom-nav',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-bottom-nav [attr.items]="items" [attr.value]="value" (arc-change)="arcChange.emit($event)"><ng-content /></arc-bottom-nav>`,
+})
+export class BottomNav {
+  @Input() items: string = [];
+  @Input() value: string = '';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/BreadcrumbMenu.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-breadcrumb-menu',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-breadcrumb-menu [attr.items]="items" [attr._openIndex]="_openIndex" (arc-navigate)="arcNavigate.emit($event)"><ng-content /></arc-breadcrumb-menu>`,
+})
+export class BreadcrumbMenu {
+  @Input() items: string = [];
+  @Input() _openIndex: number = -1;
+  @Output() arcNavigate = new EventEmitter<CustomEvent>();
+}

package/src/navigation/CommandBar.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-command-bar',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-command-bar [attr.placeholder]="placeholder" [attr.value]="value" [attr.icon]="icon" (arc-input)="arcInput.emit($event)" (arc-submit)="arcSubmit.emit($event)"><ng-content /></arc-command-bar>`,
+})
+export class CommandBar {
+  @Input() placeholder: string = 'Search…';
+  @Input() value: string = '';
+  @Input() icon: string = 'magnifying-glass';
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcSubmit = new EventEmitter<CustomEvent>();
+}

package/src/navigation/PageIndicator.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-page-indicator',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-page-indicator [attr.count]="count" [attr.value]="value" [clickable]="clickable" (arc-change)="arcChange.emit($event)"><ng-content /></arc-page-indicator>`,
+})
+export class PageIndicator {
+  @Input() count: number = 0;
+  @Input() value: number = 0;
+  @Input() clickable: boolean = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/Rail.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-rail',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-rail [attr.items]="items" [attr.value]="value" [expanded]="expanded" (arc-change)="arcChange.emit($event)"><ng-content /></arc-rail>`,
+})
+export class Rail {
+  @Input() items: string = [];
+  @Input() value: string = '';
+  @Input() expanded: boolean = false;
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/SkipLink.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-skip-link',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-skip-link [attr.target]="target"><ng-content /></arc-skip-link>`,
+})
+export class SkipLink {
+  @Input() target: string = '#main';
+}

package/src/navigation/SpeedDial.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-speed-dial',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-speed-dial [open]="open" [attr.direction]="direction" [attr.position]="position" [attr.items]="items" (arc-action)="arcAction.emit($event)" (arc-close)="arcClose.emit($event)"><ng-content /></arc-speed-dial>`,
+})
+export class SpeedDial {
+  @Input() open: boolean = false;
+  @Input() direction: 'down' | 'left' | 'right' = 'up';
+  @Input() position: 'bottom-right' | 'bottom-left' = 'bottom-right';
+  @Input() items: string = [];
+  @Output() arcAction = new EventEmitter<CustomEvent>();
+  @Output() arcClose = new EventEmitter<CustomEvent>();
+}

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