@redvars/peacock 3.9.0 → 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/timeline-item.scss

@@ -9,14 +9,6 @@
   align-items: stretch;
 }
 
-:host-context([orientation='horizontal']) .timeline-item {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr;
-  gap: 0.75rem;
-  align-items: stretch;
-  min-height: auto;
-}
 
 .marker-column {
   display: flex;
@@ -25,13 +17,6 @@
   width: var(--timeline-dot-size, 2rem);
 }
 
-:host-context([orientation='horizontal']) .marker-column {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: auto;
-  height: var(--timeline-dot-size, 2rem);
-}
 
 .marker {
   position: relative;
@@ -65,42 +50,47 @@
   --progress-height: calc(var(--timeline-dot-size, 2rem) * 0.6);
 }
 
-/* Flexible connector line that stretches to fill remaining height */
+/* Flexible connector line that stretches to fill remaining height/width */
 .connector {
-  flex: 1;
-  min-height: 2rem;
   width: 2px;
   background: var(--timeline-line-color, var(--color-outline));
-  margin: auto;
-  margin-block: .25rem;
+  margin-inline: auto;
 }
 
-:host(:last-child) .connector {
-  display: none;
+.connector--top {
+  height: var(--timeline-connector-top-height, 0.75rem);
+  flex-shrink: 0;
 }
 
-/* Horizontal orientation connector */
-:host-context([orientation='horizontal']) .connector {
+.connector--bottom {
   flex: 1;
-  min-width: 2rem;
-  width: auto;
-  height: 2px;
-  background: var(--timeline-line-color, var(--color-outline));
-  margin: auto;
-  margin-inline: .25rem;
+  min-height: 1.5rem;
 }
 
-:host-context([orientation='horizontal']):last-child .connector {
+: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));

package/src/timeline/timeline-item.ts

@@ -36,6 +36,7 @@ export class TimelineItem extends LitElement {
     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
@@ -47,7 +48,7 @@ export class TimelineItem extends LitElement {
                 : html`<slot name="dot"></slot>`}
             </div>
           </div>
-          <div class="connector"></div>
+          <div class="connector connector--bottom"></div>
         </div>
 
         <div class="content">

package/src/timeline/timeline.scss

@@ -9,13 +9,3 @@
   padding-left: calc(var(--timeline-dot-size, 2rem) / 2);
 }
 
-:host([orientation='horizontal']) .timeline {
-  display: grid;
-  gap: 0;
-  position: relative;
-  padding-left: 0;
-  padding-top: calc(var(--timeline-dot-size, 2rem) / 2);
-  grid-auto-flow: column;
-  grid-template-rows: 1fr;
-}
-

package/src/timeline/timeline.ts

@@ -28,8 +28,6 @@ export class Timeline extends LitElement {
 
   static Item = TimelineItem;
 
-  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';
-
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute('role')) {