@arclux/arc-ui-angular 1.9.2 → 1.10.1

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>();
+}

package/src/navigation/Tabs.ts

@@ -7,10 +7,9 @@ import '@arclux/arc-ui';
   selector: 'arc-tabs',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-tabs [attr.items]="items" [attr.selected]="selected" [attr.align]="align" [attr.variant]="variant" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
+  template: `<arc-tabs [attr.selected]="selected" [attr.align]="align" [attr.variant]="variant" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
 })
 export class Tabs {
-  @Input() items: unknown[] = [];
   @Input() selected: number = 0;
   @Input() align: 'center' | 'end' = 'start';
   @Input() variant: 'pills' = 'underline';

package/src/typography/CodeBlock.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-code-block',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-code-block [attr.language]="language" [attr.filename]="filename" [attr.code]="code" [attr.variant]="variant" [attr._highlightedHtml]="_highlightedHtml"><ng-content /></arc-code-block>`,
+})
+export class CodeBlock {
+  @Input() language: string = '';
+  @Input() filename: string = '';
+  @Input() code: string = '';
+  @Input() variant: 'window' | 'basic' = 'default';
+  @Input() _highlightedHtml: string = '';
+}

package/src/typography/Highlight.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-highlight',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-highlight [attr.text]="text" [attr.query]="query" [caseSensitive]="caseSensitive"><ng-content /></arc-highlight>`,
+})
+export class Highlight {
+  @Input() text: string = '';
+  @Input() query: string = '';
+  @Input() caseSensitive: boolean = false;
+}

package/src/typography/Kbd.ts

@@ -0,0 +1,13 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-kbd',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-kbd><ng-content /></arc-kbd>`,
+})
+export class Kbd {
+}

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