ng-luna 0.2.5 → 0.3.1

package/assets/icons/icons/wind.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-wind"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12.8 19.6A2 2 0 1 0 14 16H2" />
+  <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2" />
+  <path d="M9.8 4.4A2 2 0 1 1 11 8H2" />
+</svg>

package/assets/icons/icons/wine-off.svg

@@ -0,0 +1,19 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-wine-off"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 22h8" />
+  <path d="M7 10h3m7 0h-1.343" />
+  <path d="M12 15v7" />
+  <path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
+  <line x1="2" x2="22" y1="2" y2="22" />
+</svg>

package/assets/icons/icons/wine.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-wine"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 22h8" />
+  <path d="M7 10h10" />
+  <path d="M12 15v7" />
+  <path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z" />
+</svg>

package/assets/icons/icons/workflow.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-workflow"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="8" height="8" x="3" y="3" rx="2" />
+  <path d="M7 11v4a2 2 0 0 0 2 2h4" />
+  <rect width="8" height="8" x="13" y="13" rx="2" />
+</svg>

package/assets/icons/icons/worm.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-worm"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m19 12-1.5 3" />
+  <path d="M19.63 18.81 22 20" />
+  <path d="M6.47 8.23a1.68 1.68 0 0 1 2.44 1.93l-.64 2.08a6.76 6.76 0 0 0 10.16 7.67l.42-.27a1 1 0 1 0-2.73-4.21l-.42.27a1.76 1.76 0 0 1-2.63-1.99l.64-2.08A6.66 6.66 0 0 0 3.94 3.9l-.7.4a1 1 0 1 0 2.55 4.34z" />
+</svg>

package/assets/icons/icons/wrap-text.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-wrap-text"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="3" x2="21" y1="6" y2="6" />
+  <path d="M3 12h15a3 3 0 1 1 0 6h-4" />
+  <polyline points="16 16 14 18 16 20" />
+  <line x1="3" x2="10" y1="18" y2="18" />
+</svg>

package/assets/icons/icons/wrench.svg

@@ -0,0 +1,15 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-wrench"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+</svg>

package/assets/icons/icons/x.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-x"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" />
+</svg>

package/assets/icons/icons/youtube.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-youtube"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+  <path d="m10 15 5-3-5-3z" />
+</svg>

package/assets/icons/icons/zap-off.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-zap-off"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317" />
+  <path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773" />
+  <path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643" />
+  <path d="m2 2 20 20" />
+</svg>

package/assets/icons/icons/zap.svg

@@ -0,0 +1,15 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-zap"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
+</svg>

package/assets/icons/icons/zoom-in.svg

@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-zoom-in"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="11" cy="11" r="8" />
+  <line x1="21" x2="16.65" y1="21" y2="16.65" />
+  <line x1="11" x2="11" y1="8" y2="14" />
+  <line x1="8" x2="14" y1="11" y2="11" />
+</svg>

package/assets/icons/icons/zoom-out.svg

@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.468.0 - ISC -->
+<svg
+  class="lucide lucide-zoom-out"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="11" cy="11" r="8" />
+  <line x1="21" x2="16.65" y1="21" y2="16.65" />
+  <line x1="8" x2="14" y1="11" y2="11" />
+</svg>

package/controls/index.d.ts

@@ -6,6 +6,7 @@ export * from './progress/progress.component';
 export * from './radio/radio.component';
 export * from './select/select.component';
 export * from './slider/slider.component';
+export * from './tabs/tab.component';
 export * from './tabs/tabs.component';
 export * from './textarea/textarea.component';
 export * from './window/window.component';

package/controls/tabs/tab.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class TabComponent {
+    id: string;
+    label: string;
+    active: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "luna-tab", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/controls/tabs/tabs.component.d.ts

@@ -1,24 +1,22 @@
-import { EventEmitter, QueryList, ElementRef, AfterViewInit } from '@angular/core';
+import { EventEmitter, QueryList, ElementRef, AfterViewInit, AfterContentInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { LunaControl } from '../luna-control';
+import { TabComponent } from './tab.component';
 import * as i0 from "@angular/core";
-export interface Tab {
-    id: string;
-    label: string;
-    content?: string;
-}
-export declare class TabsComponent extends LunaControl implements AfterViewInit {
+export declare class TabsComponent extends LunaControl implements AfterViewInit, AfterContentInit {
     platform: Platform;
     activeTabId?: string;
-    tabs: Tab[];
     tabChange: EventEmitter<string>;
+    tabs: QueryList<TabComponent>;
     tabButtons: QueryList<ElementRef<HTMLButtonElement>>;
     private keyManager?;
     constructor(platform: Platform);
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     selectTab(tabId: string): void;
     isActive(tabId: string): boolean;
+    private updateActiveTab;
     onKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "activeTabId": { "alias": "activeTabId"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; }, { "tabChange": "tabChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "activeTabId": { "alias": "activeTabId"; "required": false; }; }, { "tabChange": "tabChange"; }, ["tabs"], ["*"], true, never>;
 }

package/fesm2022/ng-luna.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, EventEmitter, Output, Component, forwardRef, ViewChild, ViewChildren } from '@angular/core';
+import { Input, Directive, EventEmitter, Output, Component, forwardRef, ViewChild, ViewChildren, ContentChildren } from '@angular/core';
 import * as i3 from '@angular/cdk/bidi';
 import { BidiModule } from '@angular/cdk/bidi';
 import * as i1 from '@angular/cdk/a11y';
@@ -553,6 +553,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
+class TabComponent {
+    id;
+    label;
+    active = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TabComponent, isStandalone: true, selector: "luna-tab", inputs: { id: "id", label: "label" }, ngImport: i0, template: "<div [hidden]=\"!active\" role=\"tabpanel\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}[role=tabpanel]{box-shadow:inset 1px 1px #fcfcfe,inset -1px -1px #fcfcfe,1px 2px 2px #d0cebfbf;padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'luna-tab', standalone: true, imports: [CommonModule], template: "<div [hidden]=\"!active\" role=\"tabpanel\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}[role=tabpanel]{box-shadow:inset 1px 1px #fcfcfe,inset -1px -1px #fcfcfe,1px 2px 2px #d0cebfbf;padding:12px}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
 class TabButtonFocusable {
     elementRef;
     constructor(elementRef) {
@@ -565,21 +581,28 @@ class TabButtonFocusable {
 class TabsComponent extends LunaControl {
     platform;
     activeTabId;
-    tabs = [];
     tabChange = new EventEmitter();
+    tabs;
     tabButtons;
     keyManager;
     constructor(platform) {
         super();
         this.platform = platform;
     }
+    ngAfterContentInit() {
+        if (!this.activeTabId && this.tabs.length > 0) {
+            this.activeTabId = this.tabs.first.id;
+        }
+        this.updateActiveTab();
+    }
     ngAfterViewInit() {
         const focusableItems = this.tabButtons.map(ref => new TabButtonFocusable(ref));
         this.keyManager = new FocusKeyManager(focusableItems)
             .withHorizontalOrientation('ltr')
             .withWrap();
         if (this.activeTabId) {
-            const activeIndex = this.tabs.findIndex(tab => tab.id === this.activeTabId);
+            const tabsArray = this.tabs.toArray();
+            const activeIndex = tabsArray.findIndex(tab => tab.id === this.activeTabId);
             if (activeIndex >= 0) {
                 this.keyManager.setActiveItem(activeIndex);
             }
@@ -587,8 +610,10 @@ class TabsComponent extends LunaControl {
     }
     selectTab(tabId) {
         this.activeTabId = tabId;
+        this.updateActiveTab();
         this.tabChange.emit(tabId);
-        const activeIndex = this.tabs.findIndex(tab => tab.id === tabId);
+        const tabsArray = this.tabs.toArray();
+        const activeIndex = tabsArray.findIndex(tab => tab.id === tabId);
         if (activeIndex >= 0 && this.keyManager) {
             this.keyManager.setActiveItem(activeIndex);
         }
@@ -596,29 +621,36 @@ class TabsComponent extends LunaControl {
     isActive(tabId) {
         return this.activeTabId === tabId;
     }
+    updateActiveTab() {
+        this.tabs.forEach(tab => {
+            tab.active = tab.id === this.activeTabId;
+        });
+    }
     onKeyDown(event) {
         if (this.keyManager) {
             if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
                 this.keyManager.onKeydown(event);
                 const activeIndex = this.keyManager.activeItemIndex;
-                if (activeIndex !== null && activeIndex >= 0 && activeIndex < this.tabs.length) {
-                    this.selectTab(this.tabs[activeIndex].id);
+                const tabsArray = this.tabs.toArray();
+                if (activeIndex !== null && activeIndex >= 0 && activeIndex < tabsArray.length) {
+                    this.selectTab(tabsArray[activeIndex].id);
                 }
             }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabsComponent, deps: [{ token: i2.Platform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TabsComponent, isStandalone: true, selector: "luna-tabs", inputs: { activeTabId: "activeTabId", tabs: "tabs" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<menu\n    [attr.autofocus]=\"autofocus || null\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    role=\"tablist\"\n    [attr.tabindex]=\"tabindex\"\n    (keydown)=\"onKeyDown($event)\">\n    <button\n        #tabButton\n        *ngFor=\"let tab of tabs\"\n        [attr.aria-selected]=\"isActive(tab.id)\"\n        role=\"tab\"\n        (click)=\"selectTab(tab.id)\">\n        {{ tab.label }}\n    </button>\n</menu>\n<div\n    *ngFor=\"let tab of tabs\"\n    role=\"tabpanel\"\n    [hidden]=\"!isActive(tab.id)\">\n    <ng-content [select]=\"'[data-tab-id=\\'' + tab.id + '\\']'\"></ng-content>\n    <div *ngIf=\"tab.content\">{{ tab.content }}</div>\n</div>\n", styles: [":host{display:contents}menu[role=tablist]{display:flex;list-style:none;margin:0;padding:0}menu[role=tablist] button{background:linear-gradient(180deg,#fff,#fafaf9 26%,#f0f0ea 95%,#ecebe5);border-color:#91a7b4;border-radius:3px 3px 0 0;margin-left:-1px;margin-right:2px;padding:0 12px 3px}menu[role=tablist] button:hover{border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c}menu[role=tablist] button[aria-selected=true]{background:#fcfcfe;border-bottom:1px solid transparent;border-color:#919b9c;border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c;margin-right:-1px}menu[role=tablist] button[aria-selected=true]:first-of-type:before{border-left:1px solid #919b9c;content:\"\";display:block;height:2px;left:-1px;position:absolute;top:100%;width:0;z-index:-1}[role=tabpanel]{box-shadow:inset 1px 1px #fcfcfe,inset -1px -1px #fcfcfe,1px 2px 2px #d0cebfbf;padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: A11yModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TabsComponent, isStandalone: true, selector: "luna-tabs", inputs: { activeTabId: "activeTabId" }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<menu [attr.autofocus]=\"autofocus || null\" [attr.id]=\"id\" [attr.name]=\"name\" role=\"tablist\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeyDown($event)\">\n    <button #tabButton *ngFor=\"let tab of tabs\" [attr.aria-selected]=\"isActive(tab.id)\" role=\"tab\" (click)=\"selectTab(tab.id)\">\n        {{ tab.label }}\n    </button>\n</menu>\n<ng-content></ng-content>\n", styles: [":host{display:contents}menu[role=tablist]{display:flex;list-style:none;margin:0;padding:0}menu[role=tablist] button{background:linear-gradient(180deg,#fff,#fafaf9 26%,#f0f0ea 95%,#ecebe5);border-color:#91a7b4;border-radius:3px 3px 0 0;margin-left:-1px;margin-right:2px;padding:0 12px 3px}menu[role=tablist] button:hover{border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c}menu[role=tablist] button[aria-selected=true]{background:#fcfcfe;border-bottom:1px solid transparent;border-color:#919b9c;border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c;margin-right:-1px}menu[role=tablist] button[aria-selected=true]:first-of-type:before{border-left:1px solid #919b9c;content:\"\";display:block;height:2px;left:-1px;position:absolute;top:100%;width:0;z-index:-1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: A11yModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'luna-tabs', standalone: true, imports: [CommonModule, A11yModule], template: "<menu\n    [attr.autofocus]=\"autofocus || null\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    role=\"tablist\"\n    [attr.tabindex]=\"tabindex\"\n    (keydown)=\"onKeyDown($event)\">\n    <button\n        #tabButton\n        *ngFor=\"let tab of tabs\"\n        [attr.aria-selected]=\"isActive(tab.id)\"\n        role=\"tab\"\n        (click)=\"selectTab(tab.id)\">\n        {{ tab.label }}\n    </button>\n</menu>\n<div\n    *ngFor=\"let tab of tabs\"\n    role=\"tabpanel\"\n    [hidden]=\"!isActive(tab.id)\">\n    <ng-content [select]=\"'[data-tab-id=\\'' + tab.id + '\\']'\"></ng-content>\n    <div *ngIf=\"tab.content\">{{ tab.content }}</div>\n</div>\n", styles: [":host{display:contents}menu[role=tablist]{display:flex;list-style:none;margin:0;padding:0}menu[role=tablist] button{background:linear-gradient(180deg,#fff,#fafaf9 26%,#f0f0ea 95%,#ecebe5);border-color:#91a7b4;border-radius:3px 3px 0 0;margin-left:-1px;margin-right:2px;padding:0 12px 3px}menu[role=tablist] button:hover{border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c}menu[role=tablist] button[aria-selected=true]{background:#fcfcfe;border-bottom:1px solid transparent;border-color:#919b9c;border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c;margin-right:-1px}menu[role=tablist] button[aria-selected=true]:first-of-type:before{border-left:1px solid #919b9c;content:\"\";display:block;height:2px;left:-1px;position:absolute;top:100%;width:0;z-index:-1}[role=tabpanel]{box-shadow:inset 1px 1px #fcfcfe,inset -1px -1px #fcfcfe,1px 2px 2px #d0cebfbf;padding:12px}\n"] }]
+            args: [{ selector: 'luna-tabs', standalone: true, imports: [CommonModule, A11yModule], template: "<menu [attr.autofocus]=\"autofocus || null\" [attr.id]=\"id\" [attr.name]=\"name\" role=\"tablist\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeyDown($event)\">\n    <button #tabButton *ngFor=\"let tab of tabs\" [attr.aria-selected]=\"isActive(tab.id)\" role=\"tab\" (click)=\"selectTab(tab.id)\">\n        {{ tab.label }}\n    </button>\n</menu>\n<ng-content></ng-content>\n", styles: [":host{display:contents}menu[role=tablist]{display:flex;list-style:none;margin:0;padding:0}menu[role=tablist] button{background:linear-gradient(180deg,#fff,#fafaf9 26%,#f0f0ea 95%,#ecebe5);border-color:#91a7b4;border-radius:3px 3px 0 0;margin-left:-1px;margin-right:2px;padding:0 12px 3px}menu[role=tablist] button:hover{border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c}menu[role=tablist] button[aria-selected=true]{background:#fcfcfe;border-bottom:1px solid transparent;border-color:#919b9c;border-top:1px solid #e68b2c;box-shadow:inset 0 2px #ffc73c;margin-right:-1px}menu[role=tablist] button[aria-selected=true]:first-of-type:before{border-left:1px solid #919b9c;content:\"\";display:block;height:2px;left:-1px;position:absolute;top:100%;width:0;z-index:-1}\n"] }]
         }], ctorParameters: () => [{ type: i2.Platform }], propDecorators: { activeTabId: [{
                 type: Input
-            }], tabs: [{
-                type: Input
             }], tabChange: [{
                 type: Output
+            }], tabs: [{
+                type: ContentChildren,
+                args: [TabComponent]
             }], tabButtons: [{
                 type: ViewChildren,
                 args: ['tabButton']
@@ -811,5 +843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, FieldsetComponent, InputComponent, ProgressComponent, RadioComponent, SelectComponent, SliderComponent, TabsComponent, TextareaComponent, WindowComponent };
+export { ButtonComponent, CheckboxComponent, FieldsetComponent, InputComponent, ProgressComponent, RadioComponent, SelectComponent, SliderComponent, TabComponent, TabsComponent, TextareaComponent, WindowComponent };
 //# sourceMappingURL=ng-luna.mjs.map