@redvars/peacock 3.3.3 → 3.5.0

package/src/tabs/tab.scss

@@ -23,7 +23,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: var(--_tab-height);
+  height: 100%;
   padding: 0 var(--_container-padding);
   width: 100%;
   cursor: pointer;
@@ -34,51 +34,59 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 
     color: var(--_label-text-color);
     opacity: var(--_label-text-opacity, 1);
+    transition:
+      color var(--duration-short4) var(--easing-standard),
+      opacity var(--duration-short4) var(--easing-standard);
     --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
     --icon-color: var(--_label-text-color);
 
-    .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 {
     position: absolute;
     pointer-events: none;
     z-index: 1;
-    opacity: 0;
     background: var(--_active-indicator-color);
     border-radius: var(--_active-indicator-shape);
-    transform-origin: left bottom;
+    transform: scaleX(0.6);
+    transform-origin: center bottom;
     height: var(--_active-indicator-height);
     inset: auto 0px 0px;
     opacity: 0;
+    transition:
+      transform var(--duration-medium2) var(--easing-standard),
+      opacity var(--duration-short4) var(--easing-standard);
+    will-change: transform, opacity;
+  }
+
+  .background {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0;
+    transform: scaleX(0.6);
+    transform-origin: center center;
+    transition:
+      transform var(--duration-medium2) var(--easing-standard),
+      opacity var(--duration-short4) var(--easing-standard),
+      background-color var(--duration-short4) var(--easing-standard);
+    will-change: transform, opacity;
   }
 
   &.has-content {
@@ -128,8 +136,7 @@
 
 
 
-:host-context([variant='line']) .tab {
-  --_tab-height: 100%;
+:host-context([variant='primary']) .tab {
   --_container-padding: 1rem;
   --_tab-icon-size: 1.5rem;
   --_tab-icon-label-spacing: 0.5rem;
@@ -144,16 +151,42 @@
   --_container-shape-end-end: var(--shape-corner-small);
   --_active-indicator-color: var(--color-primary);
   --_active-indicator-shape: 3px 3px 0 0;
-  --_active-indicator-height: 3px;
+  --_active-indicator-height: 2px;
 
   .focus-ring {
     inset: 3px 3px 4px 3px;
   }
 
+
+  .tab-content {
+
+    flex-direction: column;
+
+    .icon-section {
+      position: relative;
+
+      ::slotted([slot='badge']) {
+        position: absolute;
+        top: 0;
+        left: calc(100% - 3px);
+      }
+
+      ::slotted([slot='badge'][value]) {
+        position: absolute;
+        top: 0;
+        left: calc(100% - 6px);
+      }
+    }
+  }
+
+    
+
+  
   &.active {
 
-    .tab-content .indicator {
+    .indicator {
       opacity: 1;
+      transform: scaleX(1);
     }
 
     .focus-ring {
@@ -179,8 +212,7 @@
   }
 }
 
-:host-context([variant='line-secondary']) .tab {
-  --_tab-height: 100%;
+:host-context([variant='secondary']) .tab {
   --_container-padding: 1rem;
   --_tab-icon-size: 1.25rem;
   --_tab-icon-label-spacing: 0.5rem;
@@ -201,10 +233,22 @@
     inset: 3px 3px 4px 3px;
   }
 
+  .tab-content {
+    ::slotted([slot='icon']) {
+      margin-inline-end: var(--_tab-icon-label-spacing);
+    }
+
+    ::slotted([slot='badge']) {
+      margin-inline-start: var(--_tab-badge-label-spacing);
+    }
+  }
+
+
   &.active {
 
-    .indicator.secondary {
+    .indicator {
       opacity: 1;
+      transform: scaleX(1);
     }
 
     .focus-ring {
@@ -228,4 +272,172 @@
       display: none;
     }
   }
-}
+}
+
+:host-context([variant='filled']) .tab {
+  --_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-variant);
+  --_container-state-color: var(--color-on-surface);
+  --_container-shape-start-start: var(--shape-corner-medium);
+  --_container-shape-start-end: var(--shape-corner-medium);
+  --_container-shape-end-start: var(--shape-corner-medium);
+  --_container-shape-end-end: var(--shape-corner-medium);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-surface);
+
+  .focus-ring {
+    inset: 2px;
+  }
+
+  .tab-content {
+    ::slotted([slot='icon']) {
+      margin-inline-end: var(--_tab-icon-label-spacing);
+    }
+
+    ::slotted([slot='badge']) {
+      margin-inline-start: var(--_tab-badge-label-spacing);
+    }
+  }
+
+  .indicator {
+    display: none;
+  }
+
+  .ripple {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  .background {
+    corner-shape: var(--_container-corner-shape-variant);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+    background: var(--_active-surface-color);
+  }
+
+  &.active {
+    --_label-text-color: var(--color-on-surface);
+
+    .background {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+
+    .ripple {
+      display: none;
+    }
+  }
+
+  &: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;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+:host-context([variant='contained']) .tab {
+  --_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(--color-primary);
+  --_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);
+  --_container-corner-shape-variant: squircle;
+  --_active-surface-color: var(--color-secondary-container);
+
+  .focus-ring {
+    inset: 2px;
+  }
+
+  .tab-content {
+    ::slotted([slot='icon']) {
+      margin-inline-end: var(--_tab-icon-label-spacing);
+    }
+
+    ::slotted([slot='badge']) {
+      margin-inline-start: var(--_tab-badge-label-spacing);
+    }
+  }
+
+  .indicator {
+    display: none;
+  }
+
+  .ripple {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  .background {
+    corner-shape: var(--_container-corner-shape-variant);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+    background: var(--_active-surface-color);
+  }
+
+  &.active {
+    --_label-text-color: var(--color-on-secondary-container);
+
+    .background {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+  }
+
+  &: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;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab {
+    .tab-content,
+    .indicator,
+    .background {
+      transition: none;
+    }
+  }
+}

package/src/tabs/tab.ts

@@ -1,10 +1,14 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { dispatchActivationClick, isActivationClick } from 'src/utils/dispatch-event-utils.js';
-import { observerSlotChangesWithCallback, throttle } from 'src/utils.js';
-import { spread } from 'src/spread.js';
+
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
+
 import styles from './tab.scss';
+import type { Tabs } from './tabs.js';
 
 /**
  * @label Tab
@@ -34,8 +38,6 @@ export class Tab extends LitElement {
 
   @property({ type: String }) disabledReason = '';
 
-  @property({ type: String }) label?: string;
-
   @property({ type: String }) value?: string;
 
   @property({ reflect: true })
@@ -157,6 +159,10 @@ export class Tab extends LitElement {
     return !!this.href;
   }
 
+  __getParentTabsVariant(): Tabs['variant'] {
+    return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';
+  }
+
   // private handleKeyDown(evt: KeyboardEvent) {
   //   if (this.disabled || this.showLoader) return;
   //   if (evt.key === 'Enter' || evt.key === ' ') {
@@ -170,6 +176,7 @@ export class Tab extends LitElement {
   render() {
 
     const isLink = this.__isLink();
+    const variant = this.__getParentTabsVariant();
 
     const cssClasses = {
       tab: true,
@@ -177,7 +184,8 @@ export class Tab extends LitElement {
       disabled: this.disabled,
       pressed: this.isPressed,
       active: this.active,
-      'has-content': this.slotHasContent || !!this.label,
+      [`variant-${variant}`]: true,
+      'has-content': this.slotHasContent,
       'has-icon': this.slotHasIcon,
       'has-badge': this.slotHasBadge,
     };
@@ -195,7 +203,7 @@ export class Tab extends LitElement {
               ?disabled=${this.disabled}
               ${spread(this.configAria)}
             >
-              ${this.renderTabContent()}
+              ${this.renderTabContent(variant)}
             </button>`;
         }
 
@@ -213,31 +221,100 @@ export class Tab extends LitElement {
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >
-        ${this.renderTabContent()}
+        ${this.renderTabContent(variant)}
       </a>`;
   }
 
-  renderTabContent() {
+  renderTabContent(variant: Tabs['variant']) {
+    switch (variant) {
+      case 'secondary':
+        return this.renderSecondaryTabContent();
+      case 'contained':
+        return this.renderContainedTabContent();
+      case 'filled':
+        return this.renderFilledTabContent();
+      case 'primary':
+      default:
+        return this.renderPrimaryTabContent();
+    }
+  }
+
+  renderPrimaryTabContent() {
+    return html`
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      
+      <div class="tab-content">
+
+        <div class="icon-section">
+          <slot name="badge"></slot>
+          <slot name="icon"></slot>
+        </div>
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <div class="indicator"></div>
+        
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+  }
+
+  renderSecondaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} element="tabElement"></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
       
       <div class="tab-content">
+
         <slot name="icon"></slot>
 
         <div class="slot-container">
-          <slot>${this.label || nothing}</slot>
+          <slot></slot>
         </div>
 
         <slot name="badge"></slot>
-
-        <div class="indicator"></div>
       </div>
 
-      <div class="secondary indicator"></div>
+      <div class="indicator"></div>
+
+      ${this.__renderDisabledReason()}
+    `;
+  }
+
+  renderContainedTabContent() {
+    return this.renderSegmentedTabContent();
+  }
+
+  renderFilledTabContent() {
+    return this.renderSegmentedTabContent();
+  }
+
+  renderSegmentedTabContent() {
+    return html`
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="tab-content">
+        <slot name="icon"></slot>
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="badge"></slot>
+      </div>
 
       ${this.__renderDisabledReason()}
     `;

package/src/tabs/tabs.scss

@@ -7,13 +7,47 @@
   display: flex;
   position: relative;
   width: 100%;
+  height: var(--tabs-height);
 }
 
-:host-context([variant='line']), :host([variant='line']) {
-  --tabs-height: 3rem;
+:host([variant='primary']) {
+  --tabs-height: 4rem;
   
   .tabs {
-    height: var(--tabs-height);
     border-bottom: 1px solid var(--color-surface-variant);
   }
 }
+
+:host([variant='secondary']) {
+  --tabs-height: 3rem;
+
+  .tabs {
+    border-bottom: 1px solid var(--color-surface-variant);
+  }
+}
+
+:host([variant='filled']) {
+  --tabs-height: 3rem;
+
+  .tabs {
+    align-items: stretch;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    border-radius: var(--shape-corner-small);
+    background: var(--color-surface-container-high);
+  }
+}
+
+:host([variant='contained']) {
+  --tabs-height: 3rem;
+
+  .tabs {
+    align-items: stretch;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    border-radius: var(--shape-corner-extra-small);
+    border: 1px solid var(--color-outline-variant);
+    background: var(--color-surface);
+  }
+}
+