@redvars/peacock 3.8.6 → 3.9.1

package/src/menu/menu-item/menu-item.scss

@@ -6,10 +6,13 @@
   outline: none;
   position: relative;
 
-  --menu-item-container-shape-start-start: var(--shape-corner-extra-small);
-  --menu-item-container-shape-start-end: var(--shape-corner-extra-small);
-  --menu-item-container-shape-end-start: var(--shape-corner-extra-small);
-  --menu-item-container-shape-end-end: var(--shape-corner-extra-small);
+  --menu-item-backdrop-container-shape-start-start: none;
+  --menu-item-backdrop-container-shape-start-end: none;
+  --menu-item-backdrop-container-shape-end-start: none;
+  --menu-item-backdrop-container-shape-end-end: none;
+
+  --menu-item-backdrop-elevation-level-block-start: none;
+  --menu-item-backdrop-elevation-level-block-end: none;
 }
 
 /*
@@ -29,10 +32,50 @@
   padding-top: 2px;
   padding-inline: var(--spacing-050);
 
-  .menu-item-background {
+  .menu-item-backdrop-background {
     background-color: var(--menu-item-container-color);
     position: absolute;
     inset: 0px;
+    border-start-start-radius: var(
+      --menu-item-backdrop-container-shape-start-start
+    );
+    border-start-end-radius: var(
+      --menu-item-backdrop-container-shape-start-end
+    );
+    border-end-start-radius: var(
+      --menu-item-backdrop-container-shape-end-start
+    );
+    border-end-end-radius: var(--menu-item-backdrop-container-shape-end-end);
+  }
+
+  .menu-item-backdrop-elevation {
+    --elevation-container-shape-start-start: var(
+      --menu-item-backdrop-container-shape-start-start
+    );
+    --elevation-container-shape-start-end: var(
+      --menu-item-backdrop-container-shape-start-end
+    );
+    --elevation-container-shape-end-start: var(
+      --menu-item-backdrop-container-shape-end-start
+    );
+    --elevation-container-shape-end-end: var(
+      --menu-item-backdrop-container-shape-end-end
+    );
+
+    --elevation-level-block-start: var(
+      --menu-item-backdrop-elevation-level-block-start
+    );
+    --elevation-level-block-end: var(
+      --menu-item-backdrop-elevation-level-block-end
+    );
+    --elevation-level-inline-start: var(
+      --menu-item-backdrop-elevation-level-inline-start,
+      1
+    );
+    --elevation-level-inline-end: var(
+      --menu-item-backdrop-elevation-level-inline-end,
+      1
+    );
   }
 
   .menu-item-content {
@@ -57,24 +100,37 @@
     --item-label-line-height: var(--typography-label-large-line-height);
     --item-label-letter-spacing: var(--typography-label-large-letter-spacing);
 
-    --item-label-text-color: var(--menu-item-label-color);
-    --item-leading-trailing-color: var(--menu-item-label-color);
-    --item-supporting-text-color: var(--menu-item-label-color);
-    --item-container-selected-color: var(--menu-item-container-selected-color);
-    --item-label-text-selected-color: var(--menu-item-label-selected-color);
-    --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+    --item-label-text-color: var(--private-item-label-text-color);
+    --item-leading-trailing-color: var(--private-item-label-text-color);
+    --item-supporting-text-color: var(--private-item-label-text-color);
+    --item-icon-size: var(--menu-item-icon-size, var(--private-item-icon-size));
 
     .background {
-      background-color: var(--menu-item-container-color);
+      background-color: var(--private-item-container-color);
       opacity: var(--_container-opacity, 1);
       border-radius: var(--shape-corner-medium);
+
+      border-start-start-radius: var(
+        --private-item-container-shape-start-start
+      );
+      border-start-end-radius: var(--private-item-container-shape-start-end);
+      border-end-start-radius: var(--private-item-container-shape-end-start);
+      border-end-end-radius: var(--private-item-container-shape-end-end);
     }
 
     .focus-ring {
-      --focus-ring-container-shape-start-start: var(--shape-corner-medium);
-      --focus-ring-container-shape-start-end: var(--shape-corner-medium);
-      --focus-ring-container-shape-end-start: var(--shape-corner-medium);
-      --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+      --focus-ring-container-shape-start-start: var(
+        --private-item-container-shape-start-start
+      );
+      --focus-ring-container-shape-start-end: var(
+        --private-item-container-shape-start-start
+      );
+      --focus-ring-container-shape-end-start: var(
+        --private-item-container-shape-start-start
+      );
+      --focus-ring-container-shape-end-end: var(
+        --private-item-container-shape-start-start
+      );
       z-index: 2;
       --focus-ring-inset: 0px;
     }
@@ -88,17 +144,55 @@
     .skeleton {
       z-index: 2;
 
-      --skeleton-container-shape-start-start: var(--shape-corner-medium);
-      --skeleton-container-shape-start-end: var(--shape-corner-medium);
-      --skeleton-container-shape-end-start: var(--shape-corner-medium);
-      --skeleton-container-shape-end-end: var(--shape-corner-medium);
+      --skeleton-container-shape-start-start: var(
+        --private-item-container-shape-start-start
+      );
+      --skeleton-container-shape-start-end: var(
+        --private-item-container-shape-start-end
+      );
+      --skeleton-container-shape-end-start: var(
+        --private-item-container-shape-end-start
+      );
+      --skeleton-container-shape-end-end: var(
+        --private-item-container-shape-end-end
+      );
     }
   }
 }
 
+:host {
+  --private-item-container-color: var(--menu-item-container-color);
+  --private-item-label-text-color: var(--menu-item-label-color);
+  --private-item-container-shape-start-start: var(--shape-corner-medium);
+  --private-item-container-shape-start-end: var(--shape-corner-medium);
+  --private-item-container-shape-end-start: var(--shape-corner-medium);
+  --private-item-container-shape-end-end: var(--shape-corner-medium);
+}
+
 :host([selected]) {
-  --menu-item-container-shape-start-start: var(--shape-corner-large);
-  --menu-item-container-shape-start-end: var(--shape-corner-large);
-  --menu-item-container-shape-end-start: var(--shape-corner-large);
-  --menu-item-container-shape-end-end: var(--shape-corner-large);
+  --private-item-container-color: var(--menu-item-container-selected-color);
+  --private-item-label-text-color: var(--menu-item-label-selected-color);
+  --private-item-container-shape-start-start: var(--shape-corner-large);
+  --private-item-container-shape-start-end: var(--shape-corner-large);
+  --private-item-container-shape-end-start: var(--shape-corner-large);
+  --private-item-container-shape-end-end: var(--shape-corner-large);
+}
+
+:host([disabled]),
+:host([soft-disabled]) {
+  cursor: not-allowed;
+  --private-item-label-text-color: var(--color-on-surface);
+  --_container-opacity: 0.12;
+
+  .ripple {
+    display: none;
+  }
+}
+
+:host-context([variant='standard']) {
+  --menu-item-container-color: var(--color-surface-container);
+}
+
+:host-context([variant='vibrant']) {
+  --menu-item-container-color: var(--color-tertiary-container);
 }

package/src/menu/menu-item/menu-item.ts

@@ -1,13 +1,13 @@
-import { html, LitElement, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './menu-item.scss';
-import colorStyles from './menu-item-colors.scss';
-import NativeButtonMixin from '@/__internal/mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';
-import { isLink } from '@/__internal/utils/is-link.js';
-import IndividualComponent from '@/IndividualComponent.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { html, LitElement, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import styles from "./menu-item.scss";
+import colorStyles from "./menu-item-colors.scss";
+import NativeButtonMixin from "@/__internal/mixins/NativeButtonMixin.js";
+import NativeHyperlinkMixin from "@/__internal/mixins/NativeHyperlinkMixin.js";
+import { isLink } from "@/__internal/utils/is-link.js";
+import IndividualComponent from "@/IndividualComponent.js";
+import { classMap } from "lit/directives/class-map.js";
 
 /**
  * @label Menu Item
@@ -32,27 +32,29 @@ export class MenuItem extends NativeButtonMixin(
   // ── Properties ───────────────────────────────────────────────────────────
 
   /** The value associated with this menu item, used to identify it on selection. */
-  @property({ type: String }) value = '';
+  @property({ type: String })
+  value = "";
 
   /** Whether this menu item is currently selected/highlighted. */
-  @property({ type: Boolean, reflect: true }) selected = false;
+  @property({ type: Boolean, reflect: true })
+  selected = false;
 
   /** When true, the menu stays open after this item is activated. */
-  @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;
+  @property({ type: Boolean, attribute: "keep-open" })
+  keepOpen = false;
 
   /** When true, indicates this item has an associated submenu. */
-  @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;
+  @property({ type: Boolean, attribute: "has-submenu" })
+  hasSubmenu = false;
 
   /** Whether the associated submenu is currently open. */
-  @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
-
-  /** Visual variant of the menu item. */
-  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
-    'standard';
+  @property({ type: Boolean, attribute: "submenu-open" })
+  submenuOpen = false;
 
   // ── Queries ───────────────────────────────────────────────────────────────
 
-  @query('#menu-item') readonly itemElement!: HTMLElement | null;
+  @query("#menu-item")
+  readonly itemElement!: HTMLElement | null;
 
   // ── Private fields ────────────────────────────────────────────────────────
 
@@ -72,7 +74,7 @@ export class MenuItem extends NativeButtonMixin(
       childList: true,
       characterData: true,
       attributes: true,
-      attributeFilter: ['slot'],
+      attributeFilter: ["slot"],
     });
   }
 
@@ -99,56 +101,58 @@ export class MenuItem extends NativeButtonMixin(
   }
 
   private _hasNamedSlot(...names: string[]) {
-    return names.some(name =>
+    return names.some((name) =>
       Array.from(this.children).some(
-        child => child.getAttribute('slot') === name,
-      ),
+        (child) => child.getAttribute("slot") === name,
+      )
     );
   }
 
   private _hasDefaultSlot() {
-    return Array.from(this.childNodes).some(node => {
+    return Array.from(this.childNodes).some((node) => {
       if (node.nodeType === Node.TEXT_NODE) {
         return Boolean(node.textContent?.trim());
       }
 
       return (
         node.nodeType === Node.ELEMENT_NODE &&
-        !(node as Element).hasAttribute('slot')
+        !(node as Element).hasAttribute("slot")
       );
     });
   }
 
   render() {
     const isElementLink = isLink(this);
-    const controls = this.getAttribute('aria-controls');
+    const controls = this.getAttribute("aria-controls");
 
     const cssClasses = {
-      'menu-item': true,
-      'native-button': !isElementLink,
-      'native-link': isElementLink,
+      "menu-item": true,
+      "native-button": !isElementLink,
+      "native-link": isElementLink,
     };
 
     if (isElementLink) {
       return html`
         <a
           id="menu-item"
-          class=${classMap(cssClasses)}
+          class="${classMap(cssClasses)}"
           role="menuitem"
-          href=${ifDefined(this.href)}
-          target=${this.target}
-          ?rel=${this.rel}
-          ?download=${this.download}
-          tabindex=${this.disabled ? '-1' : String(this.tabIndex)}
-          ?selected=${this.selected}
-          aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}
-          aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
-          aria-controls=${ifDefined(
+          href="${ifDefined(this.href)}"
+          target="${this.target}"
+          ?rel="${this.rel}"
+          ?download="${this.download}"
+          tabindex="${this.disabled ? "-1" : String(this.tabIndex)}"
+          ?selected="${this.selected}"
+          aria-disabled="${this.disabled || this.softDisabled
+            ? "true"
+            : nothing}"
+          aria-haspopup="${this.hasSubmenu ? "menu" : nothing}"
+          aria-controls="${ifDefined(
             this.hasSubmenu && controls ? controls : undefined,
-          )}
-          aria-expanded=${ifDefined(
+          )}"
+          aria-expanded="${ifDefined(
             this.hasSubmenu ? String(this.submenuOpen) : undefined,
-          )}
+          )}"
         >
           ${this.renderContent()}
         </a>
@@ -158,20 +162,20 @@ export class MenuItem extends NativeButtonMixin(
     return html`
       <button
         id="menu-item"
-        class=${classMap(cssClasses)}
+        class="${classMap(cssClasses)}"
         role="menuitem"
-        type=${this.htmlType}
-        ?disabled=${this.disabled}
-        tabindex=${String(this.tabIndex)}
-        ?selected=${this.selected}
-        aria-disabled=${this.softDisabled ? 'true' : nothing}
-        aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
-        aria-controls=${ifDefined(
+        type="${this.htmlType}"
+        ?disabled="${this.disabled}"
+        tabindex="${String(this.tabIndex)}"
+        ?selected="${this.selected}"
+        aria-disabled="${this.softDisabled ? "true" : nothing}"
+        aria-haspopup="${this.hasSubmenu ? "menu" : nothing}"
+        aria-controls="${ifDefined(
           this.hasSubmenu && controls ? controls : undefined,
-        )}
-        aria-expanded=${ifDefined(
+        )}"
+        aria-expanded="${ifDefined(
           this.hasSubmenu ? String(this.submenuOpen) : undefined,
-        )}
+        )}"
       >
         ${this.renderContent()}
       </button>
@@ -180,7 +184,9 @@ export class MenuItem extends NativeButtonMixin(
 
   renderContent() {
     return html`
-      <div class="menu-item-background"></div>
+      <div class="menu-item-backdrop-background"></div>
+      <wc-elevation class="menu-item-backdrop-elevation"></wc-elevation>
+
       <wc-item class="menu-item-content">
         <wc-focus-ring
           class="focus-ring"

package/src/menu/sub-menu/sub-menu.scss

@@ -4,8 +4,37 @@
 
 :host {
   display: contents;
+  --sub-menu-item-backdrop-container-shape-start-start: none;
+  --sub-menu-item-backdrop-container-shape-start-end: none;
+  --sub-menu-item-backdrop-container-shape-end-start: none;
+  --sub-menu-item-backdrop-container-shape-end-end: none;
+
+  --sub-menu-item-backdrop-elevation-level-block-start: none;
+  --sub-menu-item-backdrop-elevation-level-block-end: none;
+}
+
+slot[name='item']::slotted(wc-menu-item) {
+  --menu-item-backdrop-container-shape-start-start: var(
+    --sub-menu-item-backdrop-container-shape-start-start
+  );
+  --menu-item-backdrop-container-shape-start-end: var(
+    --sub-menu-item-backdrop-container-shape-start-end
+  );
+  --menu-item-backdrop-container-shape-end-start: var(
+    --sub-menu-item-backdrop-container-shape-end-start
+  );
+  --menu-item-backdrop-container-shape-end-end: var(
+    --sub-menu-item-backdrop-container-shape-end-end
+  );
+
+  --menu-item-backdrop-elevation-level-block-start: var(
+    --sub-menu-item-backdrop-elevation-level-block-start
+  );
+  --menu-item-backdrop-elevation-level-block-end: var(
+    --sub-menu-item-backdrop-elevation-level-block-end
+  );
 }
 
-slot::slotted(wc-menu) {
+slot[name='menu']::slotted(wc-menu) {
   display: contents;
 }

package/src/timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline } from './timeline.js';
+export { TimelineItem } from './timeline-item.js';

package/src/timeline/timeline-item.scss

@@ -0,0 +1,98 @@
+:host {
+  display: block;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+
+.marker-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--timeline-dot-size, 2rem);
+}
+
+
+.marker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  flex-shrink: 0;
+}
+
+.marker-dot {
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  min-width: var(--timeline-dot-size, 2rem);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--timeline-dot-bg, var(--color-primary));
+  --icon-color: var(--timeline-dot-color, var(--color-on-primary));
+  position: relative;
+  z-index: 2;
+}
+
+.marker-dot ::slotted(wc-icon) {
+  --icon-size: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+.dot-spinner {
+  --progress-height: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+/* Flexible connector line that stretches to fill remaining height/width */
+.connector {
+  width: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin-inline: auto;
+}
+
+.connector--top {
+  height: var(--timeline-connector-top-height, 0.75rem);
+  flex-shrink: 0;
+}
+
+.connector--bottom {
+  flex: 1;
+  min-height: 1.5rem;
+}
+
+:host(:first-child) .connector--top {
+  visibility: hidden;
+}
+
+:host(:last-child) .connector--bottom {
+  display: none;
+}
+
+
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.headline {
+  padding-top: var(--timeline-connector-top-height, 0.75rem);
+  min-height: calc(var(--timeline-dot-size, 2rem) + var(--timeline-connector-top-height, 0.75rem));
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+
+.description {
+  color: var(--timeline-description-color, var(--color-on-surface-variant));
+  line-height: 1.4;
+}

package/src/timeline/timeline-item.ts

@@ -0,0 +1,63 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './timeline-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
+
+/**
+ * @label Timeline Item
+ * @tag wc-timeline-item
+ * @rawTag timeline-item
+ *
+ * @summary An item for use inside a timeline, with a dot/marker and description.
+ *
+ * @example
+ * ```html
+ * <wc-timeline-item description="Step completed">
+ *   <span>Step title</span>
+ *   <wc-icon slot="dot" name="check"></wc-icon>
+ * </wc-timeline-item>
+ * ```
+ * @tags display
+ */
+@IndividualComponent
+export class TimelineItem extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  render() {
+    return html`
+      <div class="timeline-item">
+        <div class="marker-column">
+          <div class="connector connector--top"></div>
+          <div class="marker">
+            <div class="marker-dot">
+              ${this.loading
+                ? html`<wc-circular-progress
+                    class="dot-spinner"
+                    indeterminate
+                    aria-label="Loading"
+                  ></wc-circular-progress>`
+                : html`<slot name="dot"></slot>`}
+            </div>
+          </div>
+          <div class="connector connector--bottom"></div>
+        </div>
+
+        <div class="content">
+          <div class="headline"><slot></slot></div>
+          <div class="description">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/timeline/timeline.scss

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.timeline {
+  display: grid;
+  gap: 0;
+  position: relative;
+  padding-left: calc(var(--timeline-dot-size, 2rem) / 2);
+}
+

package/src/timeline/timeline.ts

@@ -0,0 +1,41 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './timeline.scss';
+import IndividualComponent from '@/IndividualComponent.js';
+import { TimelineItem } from './timeline-item.js';
+
+/**
+ * @label Timeline
+ * @tag wc-timeline
+ * @rawTag timeline
+ *
+ * @summary A vertical timeline layout for a series of timeline items.
+ *
+ * @example
+ * ```html
+ * <wc-timeline>
+ *   <wc-timeline-item description="Task completed">
+ *     <span>Task title</span>
+ *     <wc-icon slot="dot" name="check"></wc-icon>
+ *   </wc-timeline-item>
+ * </wc-timeline>
+ * ```
+ * @tags display
+ */
+@IndividualComponent
+export class Timeline extends LitElement {
+  static styles = [styles];
+
+  static Item = TimelineItem;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'list');
+    }
+  }
+
+  render() {
+    return html`<div class="timeline"><slot></slot></div>`;
+  }
+}