@redvars/peacock 3.3.0 → 3.3.2

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

@@ -10,6 +10,7 @@ import styles from './tab.scss';
  * @label Tab
  * @tag wc-tab
  * @rawTag tab
+ * @parentRawTag tabs
  *
  * @summary A tab component for use within tabs.
  * @overview
@@ -33,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;
@@ -58,6 +57,10 @@ export class Tab extends LitElement {
 
   @state() slotHasContent = false;
 
+  @state() slotHasIcon = false;
+
+  @state() slotHasBadge = false;
+
    /**
      * States
      */
@@ -94,6 +97,22 @@ export class Tab extends LitElement {
         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 =
@@ -158,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,
     };
 
 
@@ -205,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.scss

@@ -2,17 +2,18 @@
 
 @include mixin.base-styles;
 
-.tabs-list {
+
+.tabs {
   display: flex;
   position: relative;
   width: 100%;
 }
 
-:host-context([variant='line']) {
-  --tabs-list-height: 3rem;
+:host-context([variant='line']), :host([variant='line']) {
+  --tabs-height: 3rem;
   
-  .tabs-list {
-    height: var(--tabs-list-height);
+  .tabs {
+    height: var(--tabs-height);
     border-bottom: 1px solid var(--color-surface-variant);
   }
 }

package/src/tabs/tabs.ts

@@ -24,6 +24,8 @@ import { Tab } from './tab.js';
 export class Tabs extends LitElement {
   static styles = [styles];
 
+  static Tab = Tab;
+
   @property({ type: Boolean }) managed = false;
 
   connectedCallback() {
@@ -42,21 +44,33 @@ export class Tabs extends LitElement {
     const detailEvent = event as CustomEvent;
     const path = detailEvent.composedPath();
     const clickedTab: Tab | undefined = path.find(
-      node => node instanceof Element && (node as Element).tagName.toLowerCase() === 'base-tab',
+      node => node instanceof Element && (node as Element).tagName.toLowerCase() === 'wc-tab',
     ) as Tab | undefined;
 
     if (!clickedTab) return;
 
-    const tabs: NodeListOf<Tab> = this.querySelectorAll('base-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() {
     return html`
-      <div class="tabs-list">
+      <div class="tabs">
         <slot></slot>
       </div>
     `;

package/src/text/text.css-component.scss

@@ -49,8 +49,11 @@ $sizes: "large", "medium", 'small';
 }
 
 .text-code-block {
-  font-family: var(--font-family-monospace);
-  background: var(--color-primary-container);
+  display: inline-flex;
+  background-color: var(--color-surface-variant);
+  text-shadow: 0 1px 1px var(--color-surface-variant);
+  color: var(--color-on-surface);
   border-radius: var(--shape-corner-extra-small);
-  padding-inline: var(--spacing-050);
+  padding: var(--spacing-050);
+  font-family: var(--font-family-monospace);
 }

package/src/tooltip/tooltip.scss

@@ -3,20 +3,23 @@
 
 @include mixin.base-styles;
 
-.tooltip {
-  pointer-events: none;
-  transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
-  transform: scale(0);
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-}
 
-.tooltip.open {
-  pointer-events: auto;
-  transform: scale(1);
-  opacity: 1;
+:host(:not([preview])) {
+  .tooltip {
+    pointer-events: none;
+    transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
+    transform: scale(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  .tooltip.open {
+    pointer-events: auto;
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .variant-plain .tooltip-content {

package/src/tooltip/tooltip.ts

@@ -16,9 +16,7 @@ export type TooltipTrigger = 'hover' | 'focus' | 'click';
  *
  * @example
  * ```html
- * <wc-tooltip content="Tooltip text">
- *   <button>Hover me</button>
- * </wc-tooltip>
+ * <wc-tooltip preview>Tooltip</wc-tooltip>
  * ```
  */
 export class Tooltip extends LitElement {
@@ -58,13 +56,13 @@ export class Tooltip extends LitElement {
 
   // Define listeners as arrow functions to maintain 'this' context
   private _onMouseEnter = () => {
-    if (!this.hasTrigger('hover')) return;
+    if (this.preview || !this.hasTrigger('hover')) return;
     window.clearTimeout(this._hideTimeout); // Cancel any pending close
     this.show();
   };
 
   private _onMouseLeave = () => {
-    if (!this.hasTrigger('hover')) return;
+    if (this.preview || !this.hasTrigger('hover')) return;
 
     // Small delay allows the mouse to move from target -> tooltip
     // without the tooltip vanishing instantly.
@@ -79,17 +77,17 @@ export class Tooltip extends LitElement {
     }, 100); // 100ms is usually enough for a smooth transition
   };
 
-  private _onFocusIn = () => this.hasTrigger('focus') && this.show();
+  private _onFocusIn = () => this.preview && this.hasTrigger('focus') && this.show();
 
   private _onFocusOut = (e: FocusEvent) => {
-    if (!this.hasTrigger('focus')) return;
+    if (this.preview || !this.hasTrigger('focus')) return;
     if (this._target && !this._target.contains(e.relatedTarget as Node)) {
       this.hide();
     }
   };
 
   private _onClick = (e: MouseEvent) => {
-    if (!this.hasTrigger('click')) return;
+    if (this.preview || !this.hasTrigger('click')) return;
     e.stopPropagation();
     this.toggle();
   };
@@ -176,7 +174,7 @@ export class Tooltip extends LitElement {
       this.attachListeners();
     }
 
-    if (changedProps.has('open') && this.open && this._target && !this.preview) {
+    if (changedProps.has('open') && this.open && this._target) {
       this._popover.updatePosition(this._target, this.floatingEl);
     }
   }

package/src/tree-view/demo/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      font-family: 'Noto Sans', sans-serif;
+    }
+    h2 {
+      margin-top: 2rem;
+      margin-bottom: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+
+<h2>Basic Tree View</h2>
+<wc-tree-view>
+  <wc-tree-node label="Documents" icon="folder" expanded>
+    <wc-tree-node label="Work" icon="folder" expanded>
+      <wc-tree-node label="Project A" icon="description"></wc-tree-node>
+      <wc-tree-node label="Project B" icon="description"></wc-tree-node>
+    </wc-tree-node>
+    <wc-tree-node label="Personal" icon="folder">
+      <wc-tree-node label="Resume.pdf" icon="picture_as_pdf"></wc-tree-node>
+    </wc-tree-node>
+  </wc-tree-node>
+  <wc-tree-node label="Pictures" icon="photo_library">
+    <wc-tree-node label="Vacation.jpg" icon="image"></wc-tree-node>
+    <wc-tree-node label="Family.jpg" icon="image"></wc-tree-node>
+  </wc-tree-node>
+  <wc-tree-node label="Disabled Node" icon="block" disabled></wc-tree-node>
+</wc-tree-view>
+
+<h2>Tree View without Icons</h2>
+<wc-tree-view>
+  <wc-tree-node label="Category 1" expanded>
+    <wc-tree-node label="Item 1.1"></wc-tree-node>
+    <wc-tree-node label="Item 1.2">
+      <wc-tree-node label="Item 1.2.1"></wc-tree-node>
+      <wc-tree-node label="Item 1.2.2"></wc-tree-node>
+    </wc-tree-node>
+  </wc-tree-node>
+  <wc-tree-node label="Category 2">
+    <wc-tree-node label="Item 2.1"></wc-tree-node>
+  </wc-tree-node>
+</wc-tree-view>
+
+<script type='module' src='/dist/peacock-loader.js'></script>
+</body>
+</html>

package/src/tree-view/index.ts

@@ -0,0 +1,2 @@
+export { TreeNode } from './tree-node.js';
+export { TreeView } from './tree-view.js';

package/src/tree-view/tree-node.scss

@@ -0,0 +1,101 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  // M3 tree node sizing
+  --tree-node-height: 2.5rem;
+  --tree-node-icon-size: 1.25rem;
+  --tree-node-border-radius: var(--global-shape-corner-full, 9999px);
+
+  // M3 color tokens
+  --tree-node-label-color: var(--color-on-surface);
+  --tree-node-icon-color: var(--color-on-surface-variant);
+  --tree-node-selected-background: var(--color-secondary-container);
+  --tree-node-selected-color: var(--color-on-secondary-container);
+  --tree-node-hover-background: var(--color-inverse-primary);
+  --tree-node-focus-ring-color: var(--color-primary);
+}
+
+.tree-node {
+  display: block;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: var(--tree-node-height);
+  border-radius: var(--tree-node-border-radius);
+  color: var(--tree-node-label-color);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+
+  @include mixin.get-typography(body-medium);
+
+  &:not(.disabled):hover {
+    background-color: var(--tree-node-hover-background);
+  }
+
+  &:focus-visible {
+    @include mixin.focus-ring(var(--tree-node-focus-ring-color));
+  }
+
+  &.selected {
+    background-color: var(--tree-node-selected-background);
+    color: var(--tree-node-selected-color);
+
+    .node-icon {
+      --icon-color: var(--tree-node-selected-color);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+.expand-icon {
+  --icon-size: var(--tree-node-icon-size);
+  --icon-color: var(--tree-node-icon-color);
+  flex-shrink: 0;
+  transition: transform var(--duration-short2, 200ms) var(--easing-standard, ease);
+
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.icon-space {
+  display: inline-block;
+  width: var(--tree-node-icon-size);
+  height: var(--tree-node-icon-size);
+  flex-shrink: 0;
+}
+
+.node-icon {
+  --icon-size: var(--tree-node-icon-size);
+  --icon-color: var(--tree-node-icon-color);
+  flex-shrink: 0;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-children {
+  display: none;
+
+  &.expanded {
+    display: block;
+  }
+}