@redvars/peacock 3.5.1 → 3.6.1

package/src/index.ts

@@ -7,6 +7,8 @@ export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
 export { Fab } from './fab/index.js';
 export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
+export { SplitButton } from './split-button/index.js';
+export { DropdownButton } from './dropdown-button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
 export { Ripple } from './ripple/index.js';
@@ -32,12 +34,16 @@ export { Container } from './container/index.js';
 export { NumberCounter } from './number-counter/index.js';
 export { EmptyState } from './empty-state/index.js';
 export { Tooltip } from './popover/index.js';
+export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
+export { List, ListItem } from './list/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
+export { HtmlEditor } from './html-editor/index.js';
 export { Image } from './image/index.js';
+export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
@@ -49,8 +55,10 @@ export { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/ind
 export { Card } from './card/index.js';
 export { Banner } from './banner/index.js';
 export { Notification } from './notification/index.js';
+export { NotificationManager } from './notification-manager/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
+export { Modal } from './modal/index.js';
 export { BottomSheet } from './bottom-sheet/index.js';
 export { SideSheet } from './side-sheet/index.js';
 export { Select } from './select/index.js';
@@ -59,4 +67,22 @@ export { SelectOptionElement } from './select/index.js';
 export { Search } from './search/index.js';
 export { Toolbar } from './toolbar/index.js';
 export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';
-
+export { Calendar, CalendarColumnView, CalendarMonthView } from './calendar/index.js';
+export type { CalendarViewType, EventType } from './calendar/index.js';
+export { Canvas } from './canvas/index.js';
+export type { CanvasShape } from './canvas/index.js';
+export { FlowDesigner, FlowDesignerNode } from './flow-designer/index.js';
+export type {
+  Workflow,
+  WorkflowNode,
+  WorkflowCommand,
+  PositionedNode,
+  ValidationError,
+  HistoryEntry,
+  EditorState,
+  NodeType,
+  WorkflowChangeEvent,
+  SwimlaneConfig,
+  NodeTemplate,
+} from './flow-designer/index.js';
+export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider } from './condition-builder/index.js';

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from './list.js';
+export { ListItem } from './list-item.js';

package/src/list/list-item.scss

@@ -0,0 +1,111 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  padding-inline: var(--spacing-050);
+}
+
+.item-element {
+  position: relative;
+  min-height: 3.5rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  text-align: initial;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include mixin.get-typography(body-large);
+
+  .list-item-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-200);
+    min-height: 3.5rem;
+    padding-inline: var(--spacing-200);
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+  }
+
+  .leading,
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    color: var(--_leading-trailing-color);
+  }
+
+  .trailing {
+    margin-inline-start: auto;
+  }
+
+  .content {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .background {
+    position: absolute;
+    inset: 0;
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+    border-radius: var(--shape-corner-medium);
+    pointer-events: none;
+  }
+
+  .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);
+    z-index: 2;
+  }
+
+  .ripple {
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+    border-radius: var(--shape-corner-medium);
+  }
+}
+.item-element {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+
+  &:hover:not(:where(.disabled, .selected)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.selected {
+    --_container-color: var(--color-secondary-container);
+    --_label-text-color: var(--color-on-secondary-container);
+    --_leading-trailing-color: var(--color-on-secondary-container);
+    --_container-state-color: var(--color-on-secondary-container);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_leading-trailing-color: var(--color-on-surface);
+    --_container-opacity: 0.12;
+
+    .ripple {
+      display: none;
+    }
+  }
+}

package/src/list/list-item.ts

@@ -0,0 +1,175 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './list-item.scss';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ * @parentRawTag list
+ *
+ * @summary A Material 3 list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  @query('#item') readonly itemElement!: HTMLElement | null;
+
+  @state() isPressed = false;
+
+  connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
+    super.connectedCallback();
+
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  override focus() {
+    this.itemElement?.focus();
+  }
+
+  override blur() {
+    this.itemElement?.blur();
+  }
+
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    if (this.softDisabled || (this.disabled && this.href)) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.itemElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.itemElement);
+  };
+
+  __handleKeyDown = (event: KeyboardEvent) => {
+    this.__handlePress(event);
+
+    if (this.disabled || this.softDisabled || !this.itemElement) {
+      return;
+    }
+
+    if (event.key === ' ') {
+      event.preventDefault();
+      this.itemElement.click();
+      return;
+    }
+
+    if (event.key === 'Enter' && !this.__isLink()) {
+      event.preventDefault();
+      this.itemElement.click();
+    }
+  };
+
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled || this.softDisabled) return;
+
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this.isPressed = true;
+    } else if (event.type === 'mousedown') {
+      this.isPressed = true;
+    } else {
+      this.isPressed = false;
+    }
+  };
+
+  render() {
+    const isLink = this.__isLink();
+
+    const cssClasses = {
+      'list-item': true,
+      'item-element': true,
+      selected: this.selected,
+      disabled: this.disabled || this.softDisabled,
+      pressed: this.isPressed,
+    };
+
+    if (!isLink) {
+      return html`
+        <button
+          id="item"
+          class=${classMap(cssClasses)}
+          type=${this.htmlType}
+          ?disabled=${this.disabled}
+          ?aria-disabled=${this.softDisabled}
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handleKeyDown}
+          @keyup=${this.__handlePress}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+    }
+
+    return html`
+      <a
+        id="item"
+        class=${classMap(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+        rel=${ifDefined(this.rel)}
+        download=${ifDefined(this.download)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${String(this.disabled || this.softDisabled)}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+  }
+
+  renderContent() {
+    return html`
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="list-item-content">
+        <div class="leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="trailing">
+          <slot name="trailing"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/list/list.scss

@@ -0,0 +1,24 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  border-radius: var(--shape-corner-large);
+  background-color: var(--_container-color);
+}
+
+.list.variant-standard {
+  --_container-color: var(--color-surface-container);
+}
+
+.list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}

package/src/list/list.ts

@@ -0,0 +1,51 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './list.scss';
+import { ListItem } from './list-item.js';
+
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A Material 3 list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+export class List extends LitElement {
+  static styles = [styles];
+
+  static Item = ListItem;
+
+  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
+    'standard';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'list');
+  }
+
+  render() {
+    const cssClasses = {
+      list: true,
+      [`variant-${this.variant}`]: true,
+    };
+
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/menu/menu/menu.scss

@@ -12,8 +12,8 @@
   padding-block: var(--spacing-050);
   transform-origin: top center;
 
-  --_menu-enter-duration: var(--duration-medium1, 250ms);
-  --_menu-exit-duration: var(--duration-short4, 200ms);
+  --_menu-enter-duration: var(--duration-medium1);
+  --_menu-exit-duration: var(--duration-medium2);
   --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
   --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);