@kumori/aurora-wui-components 0.0.230 → 0.0.232

package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts

@@ -1,15 +1,10 @@
 import { LitElement } from 'lit';
-/**
- * Purely presentational tab selector. Tab count is derived from the
- * slotted `tab-label-N`/`tab-panel-N` children - everything else (which
- * tab is active, whether it's disabled) is driven by properties/events,
- * the caller owns the actual selection state.
- */
 export declare class AxebowTabSelector extends LitElement {
     disabled: boolean;
     activeTab?: number;
     private _activeTab;
     private _tabCount;
+    private _tabDisabled;
     private _observer;
     static styles: import('lit').CSSResult[];
     connectedCallback(): void;

package/dist/components/axebow-tab-selector/axebow-tab-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-tab-selector.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-tab-selector/axebow-tab-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AAGvC;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACA,QAAQ,UAAS;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAK;IAE/B,OAAO,CAAC,SAAS,CAAiC;IAElD,MAAM,CAAC,MAAM,4BA4BX;IAEF,iBAAiB;IAOjB,oBAAoB;IAKpB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASzD,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,UAAU;IAMlB,MAAM;CAyCP"}
+{"version":3,"file":"axebow-tab-selector.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-tab-selector/axebow-tab-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AAGvC,qBACa,iBAAkB,SAAQ,UAAU;IACA,QAAQ,UAAS;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,YAAY,CAAiB;IAE9C,OAAO,CAAC,SAAS,CAAiC;IAElD,MAAM,CAAC,MAAM,4BA4BX;IAEF,iBAAiB;IAOjB,oBAAoB;IAKpB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASzD,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,UAAU;IAMlB,MAAM;CA6CP"}

package/dist/index.js

@@ -6876,6 +6876,7 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
 		this.disabled = false;
 		this._activeTab = 0;
 		this._tabCount = 0;
+		this._tabDisabled = [];
 		this._observer = null;
 	}
 	static {
@@ -6886,10 +6887,10 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
       button {
         font-family: inherit;
       }
-      button.tab-inactive {
+      button.tab-inactive:not(:disabled) {
         position: relative;
       }
-      button.tab-inactive:hover::after {
+      button.tab-inactive:not(:disabled):hover::after {
         content: '';
         position: absolute;
         bottom: 0;
@@ -6909,7 +6910,12 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this._observer = new MutationObserver(() => this._updateTabCount());
-		this._observer.observe(this, { childList: true });
+		this._observer.observe(this, {
+			childList: true,
+			attributes: true,
+			attributeFilter: ["disabled"],
+			subtree: true
+		});
 		this._updateTabCount();
 	}
 	disconnectedCallback() {
@@ -6929,9 +6935,12 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
 			if (this._activeTab >= count) this._activeTab = 0;
 			this._tabCount = count;
 		}
+		this._tabDisabled = Array.from({ length: this._tabCount }, (_, i) => {
+			return this.querySelector(`[slot="tab-label-${i}"]`)?.hasAttribute("disabled") ?? false;
+		});
 	}
 	_selectTab(index) {
-		if (this.disabled) return;
+		if (this.disabled || this._tabDisabled[index]) return;
 		this._activeTab = index;
 		this.dispatchEvent(new CustomEvent("tab-change", {
 			detail: { index },
@@ -6944,21 +6953,27 @@ var AxebowTabSelector = class AxebowTabSelector extends LitElement {
 		return html`
       <div class="w-full max-w-194.25 rounded-xl box-border">
         <div class="w-full h-8 flex bg-(--axebow-base) gap-1 rounded-t-xl box-border">
-          ${tabs.map((i) => html`
+          ${tabs.map((i) => {
+			const active = this._activeTab === i;
+			const isDisabled = this._tabDisabled[i];
+			return html`
               <button
-                class="flex-1 h-8 flex items-center justify-center gap-2 border-none cursor-pointer transition-colors duration-200 font-medium
+                class="flex-1 h-8 flex items-center justify-center gap-2 border-none transition-colors duration-200 font-medium
                   focus-visible:outline-2 focus-visible:outline-(--axebow-tertiary)
-                  ${this._activeTab === i ? "bg-white text-(--axebow-primary) rounded-t-lg tab-active" : "bg-transparent text-(--axebow-secondary) rounded-lg tab-inactive"}"
+                  ${isDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}
+                  ${active ? "bg-white text-(--axebow-primary) rounded-t-lg tab-active" : "bg-transparent text-(--axebow-secondary) rounded-lg tab-inactive"}"
+                ?disabled=${isDisabled}
                 @click=${() => this._selectTab(i)}
               >
                 <axebow-icon
-                  iconName="${this._activeTab === i ? "radio_button_checked" : "radio_button_unchecked"}"
+                  iconName="${active ? "radio_button_checked" : "radio_button_unchecked"}"
                   iconColor="var(--axebow-tertiary)"
                   size="x-small"
                 ></axebow-icon>
                 <slot name="tab-label-${i}"></slot>
               </button>
-            `)}
+            `;
+		})}
         </div>
 
         <div
@@ -6981,6 +6996,7 @@ __decorate([property({
 __decorate([property({ type: Number })], AxebowTabSelector.prototype, "activeTab", void 0);
 __decorate([state()], AxebowTabSelector.prototype, "_activeTab", void 0);
 __decorate([state()], AxebowTabSelector.prototype, "_tabCount", void 0);
+__decorate([state()], AxebowTabSelector.prototype, "_tabDisabled", void 0);
 AxebowTabSelector = __decorate([customElement("axebow-tab-selector")], AxebowTabSelector);
 //#endregion
 //#region src/components/axebow-deploy-summary/axebow-deploy-summary.ts