@redvars/peacock 3.3.1 → 3.3.3

package/src/tabs/tab-group.ts

@@ -38,15 +38,13 @@ export class TabGroup extends LitElement {
   @property({ reflect: true }) 
   variant: 'line' | 'line-secondary' | 'contained' | 'pill' = 'line';
 
-  private uid = crypto.randomUUID();
-
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('tab-click', this.onTabClick as EventListener);
+    this.addEventListener('tab-click', this.onTabClick);
   }
 
   disconnectedCallback() {
-    this.removeEventListener('tab-click', this.onTabClick as EventListener);
+    this.removeEventListener('tab-click', this.onTabClick);
     super.disconnectedCallback();
   }
 
@@ -60,15 +58,18 @@ export class TabGroup extends LitElement {
     const targetValue = custom.detail?.target || custom.detail?.value;
     if (targetValue) {
       this.selectTab(targetValue);
+    } else if (typeof custom.detail?.index === 'number') {
+      this.selectTabByIndex(custom.detail.index);
     }
   };
 
   selectTab(target: string) {
     const tabs = this.getTabs();
-    tabs.forEach((tab: HTMLElement) => {
+    for (const tab of tabs) {
+      (tab as any).active = false;
       (tab as any).selected = false;
       tab.classList.remove('previous-tab', 'next-tab');
-    });
+    }
 
     let selectedIndex = -1;
     tabs.forEach((tab: HTMLElement, index: number) => {
@@ -80,6 +81,7 @@ export class TabGroup extends LitElement {
 
     if (selectedIndex >= 0) {
       const selectedTab = tabs[selectedIndex];
+      (selectedTab as any).active = true;
       (selectedTab as any).selected = true;
       if (tabs[selectedIndex - 1]) {
         tabs[selectedIndex - 1].classList.add('previous-tab');
@@ -90,49 +92,76 @@ export class TabGroup extends LitElement {
     }
 
     const panels = this.getTabPanels();
-    panels.forEach(panel => {
+    for (const panel of panels) {
       const panelValue = panel.getAttribute('value');
       (panel as any).active = panelValue === target;
-    });
+    }
   }
 
-  private getTabs(): NodeListOf<HTMLElement> {
-    return this.querySelectorAll(':scope > tabs-list wc-tab');
+  selectTabByIndex(index: number) {
+    const tabs = this.getTabs();
+    for (const tab of tabs) {
+      (tab as any).active = false;
+      (tab as any).selected = false;
+      tab.classList.remove('previous-tab', 'next-tab');
+    }
+
+    if (index >= 0 && index < tabs.length) {
+      (tabs[index] as any).active = true;
+      (tabs[index] as any).selected = true;
+      if (tabs[index - 1]) tabs[index - 1].classList.add('previous-tab');
+      if (tabs[index + 1]) tabs[index + 1].classList.add('next-tab');
+    }
+
+    const panels = this.getTabPanels();
+    for (let i = 0; i < panels.length; i += 1) {
+      const panel = panels[i];
+      (panel as any).active = i === index;
+    }
   }
 
-  private getTabPanels(): NodeListOf<HTMLElement> {
-    return this.querySelectorAll(':scope > wc-tab-panel');
+  private getTabs(): HTMLElement[] {
+    return Array.from(this.querySelectorAll(':scope > wc-tabs wc-tab'));
+  }
+
+  private getTabPanels(): HTMLElement[] {
+    return Array.from(this.querySelectorAll(':scope > wc-tab-panel'));
   }
 
   private getTabList(): HTMLElement | null {
-    return this.querySelector(':scope > tabs-list');
+    return this.querySelector(':scope > wc-tabs');
   }
 
   private tabsHaveTarget(): boolean {
-    return !!this.querySelector(':scope > tabs-list wc-tab[target]');
+    return !!this.querySelector(':scope > wc-tabs wc-tab[target]');
   }
 
   private initializeTabs() {
     const tabs = Array.from(this.getTabs());
     if (!this.tabsHaveTarget()) {
-     
-      this.getTabPanels().forEach((panel, index) => {
-        if (!panel.getAttribute('value')) {
-          panel.setAttribute('value', `tab-${this.uid}-${index}`);
-        }
-      });
-
-      if (tabs.length > 0) {
-        const firstTarget = tabs[0].getAttribute('target');
-        if (firstTarget) {
-          this.selectTab(firstTarget);
-        }
-      }
+      // No target/value attributes — use index-based activation
+      const selectedIndex = tabs.findIndex(
+        tab =>
+          tab.hasAttribute('active') ||
+          (tab as any).active ||
+          tab.hasAttribute('selected') ||
+          (tab as any).selected,
+      );
+      this.selectTabByIndex(selectedIndex >= 0 ? selectedIndex : 0);
     } else {
-      const selectedTab = this.querySelector(':scope > tabs-list wc-tab[selected]') as HTMLElement;
+      const selectedTab = tabs.find(
+        tab =>
+          tab.hasAttribute('active') ||
+          (tab as any).active ||
+          tab.hasAttribute('selected') ||
+          (tab as any).selected,
+      );
       if (selectedTab) {
         const selectedTarget = selectedTab.getAttribute('target');
         if (selectedTarget) this.selectTab(selectedTarget);
+      } else if (tabs.length > 0) {
+        const firstTarget = tabs[0].getAttribute('target');
+        if (firstTarget) this.selectTab(firstTarget);
       }
     }
   }

package/src/tabs/tab-panel.scss

@@ -3,10 +3,10 @@
 @include mixin.base-styles;
 
 :host {
-  display: block;
+  display: none;
   flex: 1;
 }
 
-:host([hidden]) {
-  display: none;
+:host([active]) {
+  display: block;
 }

package/src/tabs/tab-panel.ts

@@ -23,6 +23,8 @@ export class TabPanel extends LitElement {
 
   @property({ reflect: true }) value?: string;
 
+  @property({ type: Boolean, reflect: true }) active = false;
+
   render() {
     return html`<slot></slot>`;
   }

package/src/tabs/tab.scss

@@ -34,7 +34,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--_tab-icon-label-spacing);
+    gap: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
@@ -47,6 +47,25 @@
     .slot-container {
       display: none;
     }
+
+    ::slotted([slot='icon']) {
+      flex: none;
+      color: var(--_label-text-color);
+      --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+      --icon-color: var(--_label-text-color);
+    }
+
+    ::slotted([slot='badge']) {
+      flex: none;
+      margin-inline-start: var(--_tab-badge-label-spacing, 0);
+      --badge-color: var(--_tab-badge-color, var(--color-error));
+    }
+  }
+
+  &.has-icon {
+    .tab-content {
+      gap: var(--_tab-icon-label-spacing);
+    }
   }
 
   .indicator {
@@ -112,6 +131,10 @@
 :host-context([variant='line']) .tab {
   --_tab-height: 100%;
   --_container-padding: 1rem;
+  --_tab-icon-size: 1.5rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
 
   --_label-text-color: var(--color-on-surface);
   --_container-state-color: var(--_label-text-color);
@@ -121,7 +144,7 @@
   --_container-shape-end-end: var(--shape-corner-small);
   --_active-indicator-color: var(--color-primary);
   --_active-indicator-shape: 3px 3px 0 0;
-  --_active-indicator-height: 2px;
+  --_active-indicator-height: 3px;
 
   .focus-ring {
     inset: 3px 3px 4px 3px;
@@ -146,6 +169,57 @@
     --_container-state-opacity: 0.12;
   }
 
+  &.disabled {
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+:host-context([variant='line-secondary']) .tab {
+  --_tab-height: 100%;
+  --_container-padding: 1rem;
+  --_tab-icon-size: 1.25rem;
+  --_tab-icon-label-spacing: 0.5rem;
+  --_tab-badge-label-spacing: 0.25rem;
+  --_tab-badge-color: var(--color-error);
+
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 0;
+  --_active-indicator-height: 2px;
+
+  .focus-ring {
+    inset: 3px 3px 4px 3px;
+  }
+
+  &.active {
+
+    .indicator.secondary {
+      opacity: 1;
+    }
+
+    .focus-ring {
+      inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+    }
+  }
+
+  &:hover:not(:where(.disabled)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
   &.disabled {
     --_label-text-color: var(--color-on-surface);
     --_label-text-opacity: 0.38;

package/src/tabs/tab.ts

@@ -34,8 +34,6 @@ export class Tab extends LitElement {
 
   @property({ type: String }) disabledReason = '';
 
-  @property({ type: String }) icon?: string;
-
   @property({ type: String }) label?: string;
 
   @property({ type: String }) value?: string;
@@ -59,6 +57,10 @@ export class Tab extends LitElement {
 
   @state() slotHasContent = false;
 
+  @state() slotHasIcon = false;
+
+  @state() slotHasBadge = false;
+
    /**
      * States
      */
@@ -89,12 +91,28 @@ export class Tab extends LitElement {
       this.throttleDelay,
     );
     observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot'),
+      this.renderRoot.querySelector('slot:not([name])'),
       hasContent => {
         this.slotHasContent = hasContent;
         this.requestUpdate();
       },
     );
+
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot[name="icon"]'),
+      hasContent => {
+        this.slotHasIcon = hasContent;
+        this.requestUpdate();
+      },
+    );
+
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot[name="badge"]'),
+      hasContent => {
+        this.slotHasBadge = hasContent;
+        this.requestUpdate();
+      },
+    );
   }
 
   __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
@@ -159,7 +177,9 @@ export class Tab extends LitElement {
       disabled: this.disabled,
       pressed: this.isPressed,
       active: this.active,
-      'has-content': this.slotHasContent
+      'has-content': this.slotHasContent || !!this.label,
+      'has-icon': this.slotHasIcon,
+      'has-badge': this.slotHasBadge,
     };
 
 
@@ -206,16 +226,18 @@ export class Tab extends LitElement {
       <wc-ripple class="ripple"></wc-ripple>
       
       <div class="tab-content">
+        <slot name="icon"></slot>
+
         <div class="slot-container">
-          <slot></slot>
+          <slot>${this.label || nothing}</slot>
         </div>
 
-        <slot name="icon"></slot>
+        <slot name="badge"></slot>
 
         <div class="indicator"></div>
       </div>
 
-      <div class="indicator"></div>
+      <div class="secondary indicator"></div>
 
       ${this.__renderDisabledReason()}
     `;

package/src/tabs/tabs.ts

@@ -49,11 +49,23 @@ export class Tabs extends LitElement {
 
     if (!clickedTab) return;
 
-    const tabs: NodeListOf<Tab> = this.querySelectorAll('wc-tab');
-    tabs.forEach(tab => {
+    const tabs = Array.from(this.querySelectorAll('wc-tab')) as Tab[];
+    let clickedIndex = -1;
+    for (let index = 0; index < tabs.length; index += 1) {
+      const tab = tabs[index];
       tab.active = false;
-    });
+      if (tab === clickedTab) clickedIndex = index;
+    }
     (clickedTab as Tab).active = true;
+
+    this.dispatchEvent(new CustomEvent('tab-click', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        index: clickedIndex,
+        value: (clickedTab as Tab).value,
+      },
+    }));
   };
 
   render() {