@arclux/arc-ui-angular 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.4.0",
+  "version": "1.5.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.4.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-accordion',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-accordion [attr._items]="_items" [attr._openItems]="_openItems"><ng-content /></arc-accordion>`,
+  template: `<arc-accordion [multiple]="multiple" [attr._items]="_items" [attr._openItems]="_openItems"><ng-content /></arc-accordion>`,
 })
 export class Accordion {
+  @Input() multiple: boolean = false;
   @Input() _items: string = [];
   @Input() _openItems: string = 'new Set()';
 }

package/src/content/Avatar.ts

@@ -7,10 +7,12 @@ 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"><ng-content /></arc-avatar>`,
+  template: `<arc-avatar [attr.src]="src" [attr.name]="name" [attr.size]="size" [attr.shape]="shape" [attr.status]="status"><ng-content /></arc-avatar>`,
 })
 export class Avatar {
   @Input() src: string = '';
   @Input() name: string = '';
   @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() shape: 'square' | 'rounded' = 'circle';
+  @Input() status: 'online' | 'offline' | 'busy' | 'away' = '';
 }

package/src/content/Badge.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-badge',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-badge [attr.variant]="variant" [attr.color]="color"><ng-content /></arc-badge>`,
+  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/content/Callout.ts

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

package/src/content/Card.ts

@@ -7,9 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-card',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-card [attr.href]="href" [attr._hasFooter]="_hasFooter"><ng-content /></arc-card>`,
+  template: `<arc-card [attr.href]="href" [attr.padding]="padding" [interactive]="interactive" [attr._hasFooter]="_hasFooter"><ng-content /></arc-card>`,
 })
 export class Card {
   @Input() href: string = '';
+  @Input() padding: 'none' | 'sm' | 'lg' = 'md';
+  @Input() interactive: boolean = false;
   @Input() _hasFooter: string = false;
 }

package/src/content/Divider.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-divider',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-divider [attr.variant]="variant" [attr.align]="align" [vertical]="vertical"><ng-content /></arc-divider>`,
+  template: `<arc-divider [attr.variant]="variant" [attr.align]="align" [vertical]="vertical" [attr.label]="label"><ng-content /></arc-divider>`,
 })
 export class Divider {
   @Input() variant: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' = 'subtle';
   @Input() align?: 'left' | 'right';
   @Input() vertical: boolean = false;
+  @Input() label: string = '';
 }

package/src/content/Skeleton.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-skeleton',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-skeleton [attr.variant]="variant" [attr.width]="width" [attr.height]="height"><ng-content /></arc-skeleton>`,
+  template: `<arc-skeleton [attr.variant]="variant" [attr.width]="width" [attr.height]="height" [attr.count]="count"><ng-content /></arc-skeleton>`,
 })
 export class Skeleton {
   @Input() variant: 'text' | 'circle' | 'rect' = 'text';
   @Input() width: string = '';
   @Input() height: string = '';
+  @Input() count: number = 1;
 }

package/src/content/Stat.ts

@@ -7,9 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-stat',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-stat [attr.value]="value" [attr.label]="label"><ng-content /></arc-stat>`,
+  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/content/Tag.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-tag',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-tag [attr.variant]="variant" [removable]="removable" [disabled]="disabled" [attr.color]="color" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-tag>`,
+  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 = '';

package/src/feedback/Alert.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-alert [attr.variant]="variant" [compact]="compact" [dismissible]="dismissible" [attr.heading]="heading" (arc-dismiss)="arcDismiss.emit($event)"><ng-content /></arc-alert>`,
 })
 export class Alert {
   @Input() variant: string = 'info';
+  @Input() compact: boolean = false;
   @Input() dismissible: boolean = false;
   @Input() heading: string = '';
   @Output() arcDismiss = new EventEmitter<CustomEvent>();

package/src/feedback/Modal.ts

@@ -7,12 +7,13 @@ import '@arclux/arc-ui';
   selector: 'arc-modal',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-modal [open]="open" [attr.heading]="heading" [attr.size]="size" [closable]="closable" (arc-close)="arcClose.emit($event)" (arc-open)="arcOpen.emit($event)"><ng-content /></arc-modal>`,
+  template: `<arc-modal [open]="open" [attr.heading]="heading" [attr.size]="size" [fullscreen]="fullscreen" [closable]="closable" (arc-close)="arcClose.emit($event)" (arc-open)="arcOpen.emit($event)"><ng-content /></arc-modal>`,
 })
 export class Modal {
   @Input() open: boolean = false;
   @Input() heading: string = '';
   @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() fullscreen: boolean = false;
   @Input() closable: boolean = true;
   @Output() arcClose = new EventEmitter<CustomEvent>();
   @Output() arcOpen = new EventEmitter<CustomEvent>();

package/src/feedback/Progress.ts

@@ -7,12 +7,13 @@ import '@arclux/arc-ui';
   selector: 'arc-progress',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-progress [attr.value]="value" [attr.variant]="variant" [attr.size]="size" [indeterminate]="indeterminate" [attr.label]="label"><ng-content /></arc-progress>`,
+  template: `<arc-progress [attr.value]="value" [attr.variant]="variant" [attr.size]="size" [indeterminate]="indeterminate" [showValue]="showValue" [attr.label]="label"><ng-content /></arc-progress>`,
 })
 export class Progress {
   @Input() value: number = 0;
   @Input() variant: string = 'bar';
   @Input() size: 'sm' | 'md' | 'lg' = 'md';
   @Input() indeterminate: boolean = false;
+  @Input() showValue: boolean = false;
   @Input() label: string = '';
 }

package/src/input/Button.ts

@@ -7,13 +7,14 @@ import '@arclux/arc-ui';
   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" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix"><ng-content /></arc-button>`,
+  template: `<arc-button [attr.variant]="variant" [attr.size]="size" [attr.href]="href" [disabled]="disabled" [loading]="loading" [attr.type]="type" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix"><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() loading: boolean = false;
   @Input() type: string = 'button';
   @Input() _hasPrefix: string = false;
   @Input() _hasSuffix: string = false;

package/src/input/Checkbox.ts

@@ -7,12 +7,13 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-checkbox [checked]="checked" [indeterminate]="indeterminate" [disabled]="disabled" [attr.size]="size" [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() size: 'sm' | 'lg' = 'md';
   @Input() label: string = '';
   @Input() name: string = '';
   @Input() value: string = '';

package/src/input/Input.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-input',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-input [attr.type]="type" [attr.name]="name" [attr.label]="label" [attr.placeholder]="placeholder" [attr.value]="value" [disabled]="disabled" [required]="required" [multiline]="multiline" [attr.rows]="rows" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-input>`,
+  template: `<arc-input [attr.type]="type" [attr.name]="name" [attr.label]="label" [attr.placeholder]="placeholder" [attr.value]="value" [disabled]="disabled" [required]="required" [attr.error]="error" [attr.size]="size" [multiline]="multiline" [attr.rows]="rows" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-input>`,
 })
 export class Input {
   @Input() type: string = 'text';
@@ -17,6 +17,8 @@ export class Input {
   @Input() value: string = '';
   @Input() disabled: boolean = false;
   @Input() required: boolean = false;
+  @Input() error: string = '';
+  @Input() size: 'sm' | 'lg' = 'md';
   @Input() multiline: boolean = false;
   @Input() rows: number = 5;
   @Input() _hasPrefix: string = false;

package/src/input/RadioGroup.ts

@@ -7,12 +7,13 @@ import '@arclux/arc-ui';
   selector: 'arc-radio-group',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-radio-group [attr.value]="value" [attr.name]="name" [disabled]="disabled" [attr.orientation]="orientation" [attr._radios]="_radios" (arc-change)="arcChange.emit($event)"><ng-content /></arc-radio-group>`,
+  template: `<arc-radio-group [attr.value]="value" [attr.name]="name" [disabled]="disabled" [attr.size]="size" [attr.orientation]="orientation" [attr._radios]="_radios" (arc-change)="arcChange.emit($event)"><ng-content /></arc-radio-group>`,
 })
 export class RadioGroup {
   @Input() value: string = '';
   @Input() name: string = '';
   @Input() disabled: boolean = false;
+  @Input() size: 'sm' | 'lg' = 'md';
   @Input() orientation: 'horizontal' = 'vertical';
   @Input() _radios: string = [];
   @Output() arcChange = new EventEmitter<CustomEvent>();

package/src/input/Select.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-select',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-select [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.name]="name" [disabled]="disabled" [open]="open" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-select>`,
+  template: `<arc-select [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.name]="name" [disabled]="disabled" [attr.size]="size" [attr.error]="error" [open]="open" [attr._options]="_options" (arc-change)="arcChange.emit($event)"><ng-content /></arc-select>`,
 })
 export class Select {
   @Input() value: string = '';
@@ -15,6 +15,8 @@ export class Select {
   @Input() label: string = '';
   @Input() name: string = '';
   @Input() disabled: boolean = false;
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() error: string = '';
   @Input() open: boolean = false;
   @Input() _options: string = [];
   @Output() arcChange = new EventEmitter<CustomEvent>();

package/src/input/Textarea.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-textarea',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-textarea [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.rows]="rows" [attr.maxlength]="maxlength" [disabled]="disabled" [readonly]="readonly" [attr.resize]="resize" [attr.error]="error" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-textarea>`,
+  template: `<arc-textarea [attr.value]="value" [attr.placeholder]="placeholder" [attr.label]="label" [attr.rows]="rows" [attr.maxlength]="maxlength" [disabled]="disabled" [readonly]="readonly" [attr.resize]="resize" [attr.size]="size" [autoResize]="autoResize" [attr.error]="error" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-textarea>`,
 })
 export class Textarea {
   @Input() value: string = '';
@@ -18,6 +18,8 @@ export class Textarea {
   @Input() disabled: boolean = false;
   @Input() readonly: boolean = false;
   @Input() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() autoResize: boolean = false;
   @Input() error: string = '';
   @Output() arcInput = new EventEmitter<CustomEvent>();
   @Output() arcChange = new EventEmitter<CustomEvent>();

package/src/input/Toggle.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   selector: 'arc-toggle',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-toggle [checked]="checked" [disabled]="disabled" [attr.label]="label" [attr.name]="name" (arc-change)="arcChange.emit($event)"><ng-content /></arc-toggle>`,
+  template: `<arc-toggle [checked]="checked" [disabled]="disabled" [attr.size]="size" [attr.label]="label" [attr.name]="name" (arc-change)="arcChange.emit($event)"><ng-content /></arc-toggle>`,
 })
 export class Toggle {
   @Input() checked: boolean = false;
   @Input() disabled: boolean = false;
+  @Input() size: 'sm' | 'lg' = 'md';
   @Input() label: string = '';
   @Input() name: string = '';
   @Output() arcChange = new EventEmitter<CustomEvent>();

package/src/layout/Container.ts

@@ -7,8 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-container',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-container [narrow]="narrow"><ng-content /></arc-container>`,
+  template: `<arc-container [narrow]="narrow" [attr.size]="size" [attr.padding]="padding"><ng-content /></arc-container>`,
 })
 export class Container {
   @Input() narrow: boolean = false;
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'md';
+  @Input() padding: 'none' | 'sm' | 'lg' = 'md';
 }

package/src/navigation/Breadcrumb.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-breadcrumb',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-breadcrumb [attr._items]="_items" (arc-navigate)="arcNavigate.emit($event)"><ng-content /></arc-breadcrumb>`,
+  template: `<arc-breadcrumb [attr.separator]="separator" [attr._items]="_items" (arc-navigate)="arcNavigate.emit($event)"><ng-content /></arc-breadcrumb>`,
 })
 export class Breadcrumb {
+  @Input() separator: string = '/';
   @Input() _items: string = [];
   @Output() arcNavigate = new EventEmitter<CustomEvent>();
 }

package/src/navigation/Footer.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-footer',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-footer [compact]="compact" [border]="border"><ng-content /></arc-footer>`,
+  template: `<arc-footer [compact]="compact" [border]="border" [attr.align]="align"><ng-content /></arc-footer>`,
 })
 export class Footer {
   @Input() compact: boolean = false;
   @Input() border: boolean = true;
+  @Input() align: 'center' = 'left';
 }

package/src/navigation/Link.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-link [attr.href]="href" [attr.variant]="variant" [attr.underline]="underline" [active]="active" [external]="external"><ng-content /></arc-link>`,
 })
 export class Link {
   @Input() href: string = '';
   @Input() variant: 'muted' | 'nav' = 'default';
+  @Input() underline: 'always' | 'never' = 'hover';
   @Input() active: boolean = false;
   @Input() external: boolean = false;
 }

package/src/navigation/Pagination.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-pagination [attr.total]="total" [attr.current]="current" [attr.siblings]="siblings" [compact]="compact" (arc-change)="arcChange.emit($event)"><ng-content /></arc-pagination>`,
 })
 export class Pagination {
   @Input() total: number = 1;
   @Input() current: number = 1;
   @Input() siblings: number = 1;
+  @Input() compact: boolean = false;
   @Output() arcChange = new EventEmitter<CustomEvent>();
 }

package/src/navigation/Sidebar.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-sidebar [attr.active]="active" [collapsed]="collapsed" [attr.position]="position" [attr.width]="width" [glow]="glow" [attr._sections]="_sections"><ng-content /></arc-sidebar>`,
 })
 export class Sidebar {
   @Input() active: string = '';
   @Input() collapsed: boolean = false;
+  @Input() position: 'right' = 'left';
   @Input() width: string = '260px';
   @Input() glow: boolean = false;
   @Input() _sections: string = [];

package/src/navigation/Tabs.ts

@@ -7,11 +7,13 @@ import '@arclux/arc-ui';
   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>`,
+  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>`,
 })
 export class Tabs {
   @Input() items: unknown[] = [];
   @Input() selected: number = 0;
+  @Input() align: 'center' | 'end' = 'start';
+  @Input() variant: 'pills' = 'underline';
   @Input() _tabs: string = [];
   @Output() arcChange = new EventEmitter<CustomEvent>();
 }

package/src/navigation/TopBar.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   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>`,
+  template: `<arc-top-bar [attr.heading]="heading" [fixed]="fixed" [menuOpen]="menuOpen" [attr.mobileMenu]="mobileMenu" [attr.menuPosition]="menuPosition" [attr.navAlign]="navAlign"><ng-content /></arc-top-bar>`,
 })
 export class TopBar {
   @Input() heading: string = '';
@@ -15,4 +15,5 @@ export class TopBar {
   @Input() menuOpen: boolean = false;
   @Input() mobileMenu: string = 'sidebar';
   @Input() menuPosition: string = 'left';
+  @Input() navAlign: string = 'center';
 }