@redvars/peacock 3.5.0 → 3.6.0

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

@@ -0,0 +1,130 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+}
+
+.sidebar-sub-menu {
+  display: block;
+}
+
+.sidebar-sub-menu-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: var(--sidebar-menu-item-height);
+  cursor: pointer;
+  border-radius: var(--sidebar-menu-item-border-radius);
+  outline: none;
+  padding-inline-end: 0.75rem;
+  color: var(--_label-color);
+
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+
+  @include mixin.get-typography(label-large);
+
+  &.selected {
+    --_container-color: var(--sidebar-menu-item-selected-background);
+    --_label-color: var(--sidebar-menu-item-selected-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.sidebar-sub-menu-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  color: inherit;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  padding-inline: 0.75rem;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-sub-menu-inner.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-sub-menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-menu-item-icon-color);
+  flex-shrink: 0;
+  width: var(--sidebar-menu-item-height);
+  height: var(--sidebar-menu-item-height);
+  transition: transform var(--duration-medium1) var(--easing-standard);
+}
+
+:host([expanded]) .expand-icon {
+  transform: rotate(180deg);
+}
+
+.sidebar-sub-menu-children {
+  display: block;
+  overflow: hidden;
+  margin-left: var(--spacing-200);
+  max-height: 9999px;
+  opacity: 1;
+  transition: max-height var(--duration-medium1) var(--easing-standard),
+              opacity var(--duration-medium1) var(--easing-standard);
+}
+
+.sidebar-sub-menu-children.hidden {
+  max-height: 0;
+  opacity: 0;
+}

package/src/sidebar-menu/sidebar-sub-menu.ts

@@ -0,0 +1,160 @@
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import styles from './sidebar-sub-menu.scss';
+
+/**
+ * @label Sidebar Sub Menu
+ * @tag wc-sidebar-sub-menu
+ * @rawTag sidebar-sub-menu
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-sub-menu label="Parent" expanded>
+ *   <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ * </wc-sidebar-sub-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarSubMenu extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  @property({ type: String, reflect: true })
+  label: string = '';
+
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  expanded: boolean = false;
+
+  @property({ type: Number, reflect: true })
+  level: number = 0;
+
+  @query('.sidebar-sub-menu-inner')
+  private readonly _nativeElement!: HTMLElement | null;
+
+  override focus() {
+    this._nativeElement?.focus();
+  }
+
+  override blur() {
+    this._nativeElement?.blur();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateChildLevels();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    if (changedProps.has('expanded')) {
+      this.setAttribute('aria-expanded', String(this.expanded));
+      if (this.expanded) {
+        this.setAttribute('data-expanded', '');
+      } else {
+        this.removeAttribute('data-expanded');
+      }
+    }
+  }
+
+  private _getChildNodes(): Element[] {
+    return Array.from(this.children).filter(el => {
+      const tag = el.tagName.toLowerCase();
+      return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+    });
+  }
+
+  private _updateChildLevels = () => {
+    this._getChildNodes().forEach(child => {
+      if ('level' in child) {
+        // eslint-disable-next-line no-param-reassign
+        (child as { level: number }).level = this.level + 1;
+      }
+    });
+  };
+
+  private _onClick = () => {
+    if (this.disabled) return;
+
+    if (this._getChildNodes().length > 0) {
+      this.expanded = !this.expanded;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu-item:click', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, label: this.label },
+      }),
+    );
+  };
+
+  override render() {
+    const hasChildren = this._getChildNodes().length > 0;
+    const wrapperClasses = classMap({
+      'sidebar-sub-menu': true,
+    });
+    const innerClasses = classMap({
+      'sidebar-sub-menu-inner': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    });
+
+    const inlineStyles = styleMap({
+      paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
+    });
+
+    return html`
+      <div class="${wrapperClasses}" style="${inlineStyles}">
+        <div
+          id="item"
+          class="${innerClasses}"
+          role="treeitem"
+          aria-label="${this.label}"
+          aria-selected="${String(this.selected)}"
+          aria-disabled="${this.disabled}"
+          aria-expanded="${this.expanded}"
+          @click="${this._onClick}"
+          @keydown="${(e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              this._onClick();
+            }
+          }}"
+          tabindex="${this.disabled ? -1 : 0}"
+        >
+          <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+          <div class="background"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <div class="sidebar-sub-menu-content">
+            ${this.icon ? html`<wc-icon name="${this.icon}"></wc-icon>` : ''}
+            <span class="sidebar-sub-menu-label">${this.label}</span>
+          </div>
+          ${hasChildren
+            ? html`
+                <wc-icon class="expand-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+              `
+            : ''}
+        </div>
+        <div class="sidebar-sub-menu-children ${(!hasChildren || !this.expanded) ? 'hidden' : ''}">
+          <slot @slotchange="${this._updateChildLevels}"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/skeleton/skeleton.scss

@@ -1,43 +1,37 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+
+
+
 :host {
+  position: relative;
+  inset: 0;
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
-  display: inline-block;
-  height: 3rem;
-  width: 10rem;
+  display: flex;
+  pointer-events: none;
+}
+
+.skeleton,
+.skeleton::before {
+  inset: 0;
+  position: absolute;
+  @include mixin.apply-container-shape(skeleton);
 }
 
 .skeleton {
-  position: relative;
-  padding: 0;
-  border: none;
   background:  var(--skeleton-container-color);
-  box-shadow: none;
   overflow: hidden;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 
   &::before {
-    position: absolute;
-    left: 0;
-    top: 0;
     animation: 3s ease-in-out skeleton infinite;
     background:  var(--skeleton-element);
     block-size: 100%;
     content: "";
     inline-size: 100%;
     will-change: transform-origin, transform, opacity;
-
-    border-start-start-radius: var(--skeleton-container-shape-start-start);
-    border-start-end-radius: var(--skeleton-container-shape-start-end);
-    border-end-start-radius: var(--skeleton-container-shape-end-start);
-    border-end-end-radius: var(--skeleton-container-shape-end-end);
-    corner-shape: var(--skeleton-container-shape-variant);
   }
 }
 

package/src/snackbar/snackbar.ts

@@ -221,8 +221,8 @@ export class Snackbar extends LitElement {
               size='small'
               aria-label="Dismiss notification"
               @click=${this.handleCloseClick}
-              name="close"
             >
+              <wc-icon name="close"></wc-icon>
             </wc-icon-button>`
           : nothing}
       </div>

package/src/split-button/index.ts

@@ -0,0 +1 @@
+export { SplitButton } from './split-button.js';

package/src/split-button/split-button-colors.scss

@@ -0,0 +1,56 @@
+@mixin _split-button-color($color) {
+  --filled-split-button-container-color: var(--color-#{$color});
+  --filled-split-button-label-text-color: var(--color-on-#{$color});
+
+  --tonal-split-button-container-color: var(--color-#{$color}-container);
+  --tonal-split-button-label-text-color: var(--color-on-#{$color}-container);
+
+  --outlined-split-button-outline-color: var(--color-#{$color});
+  --outlined-split-button-label-text-color: var(--color-#{$color});
+}
+
+:host([color=primary]) {
+  @include _split-button-color(primary);
+}
+
+:host([color=secondary]) {
+  @include _split-button-color(secondary);
+}
+
+:host([color=tertiary]) {
+  @include _split-button-color(tertiary);
+}
+
+:host([color=success]) {
+  @include _split-button-color(success);
+}
+
+:host([color=danger]) {
+  @include _split-button-color(error);
+}
+
+:host([color=warning]) {
+  @include _split-button-color(warning);
+}
+
+:host([color=on-surface]) {
+  --filled-split-button-container-color: var(--color-on-surface);
+  --filled-split-button-label-text-color: var(--color-surface);
+
+  --tonal-split-button-container-color: var(--color-on-surface-container);
+  --tonal-split-button-label-text-color: var(--color-surface-container-high);
+
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}
+
+:host([color=surface]) {
+  --filled-split-button-container-color: var(--color-surface-container-high);
+  --filled-split-button-label-text-color: var(--color-on-surface);
+
+  --tonal-split-button-container-color: var(--color-surface-container-high);
+  --tonal-split-button-label-text-color: var(--color-on-surface-container);
+
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}

package/src/split-button/split-button-sizes.scss

@@ -0,0 +1,28 @@
+:host([size='xs']),
+:host([size='extra-small']) {
+  --split-button-icon-size: 1rem;
+}
+
+
+:host([size='sm']),
+:host([size='small']) {
+  --split-button-icon-size: 1.125rem;
+}
+
+
+:host([size='md']),
+:host([size='medium']) {
+  --split-button-icon-size: 1.25rem;
+}
+
+
+:host([size='lg']),
+:host([size='large']) {
+  --split-button-icon-size: 1.5rem;
+}
+
+
+:host([size='xl']),
+:host([size='extra-large']) {
+  --split-button-icon-size: 2rem;
+}

package/src/split-button/split-button.scss

@@ -0,0 +1,79 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  position: relative;
+
+  --split-button-container-shape: var(--shape-corner-medium);
+  --split-button-gap: 0.125rem;
+  --split-button-icon-size: 1.125rem;
+}
+
+.split-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--split-button-gap);
+}
+
+.action-button {
+  --button-container-shape: var(--split-button-container-shape);
+}
+
+.dropdown-trigger {
+  --button-container-shape: var(--split-button-container-shape);
+  --button-icon-size: var(--split-button-icon-size);
+}
+
+.dropdown-icon {
+  transition: transform 200ms ease;
+}
+
+.dropdown-trigger.active .dropdown-icon {
+  transform: rotate(180deg);
+}
+
+/* ── Variant: Filled ────────────────────────────────────── */
+
+.split-button.variant-filled {
+  .action-button,
+  .dropdown-trigger {
+    --filled-button-container-color: var(--filled-split-button-container-color);
+    --filled-button-label-text-color: var(--filled-split-button-label-text-color);
+  }
+}
+
+
+/* ── Variant: Tonal ─────────────────────────────────────── */
+
+.split-button.variant-tonal {
+  .action-button,
+  .dropdown-trigger {
+    --tonal-button-container-color: var(--tonal-split-button-container-color);
+    --tonal-button-label-text-color: var(--tonal-split-button-label-text-color);
+  }
+}
+
+
+/* ── Variant: Outlined ──────────────────────────────────── */
+
+.split-button.variant-outlined {
+  .action-button,
+  .dropdown-trigger {
+    --outlined-button-outline-color: var(--outlined-split-button-outline-color, var(--color-outline));
+    --outlined-button-label-text-color: var(--outlined-split-button-label-text-color);
+  }
+}
+
+:host([block]) {
+  width: 100%;
+
+  .split-button {
+    width: 100%;
+  }
+
+  .action-button {
+    flex: 1;
+  }
+}