@redvars/peacock 3.5.0 → 3.6.0

package/src/dropdown-button/dropdown-button.ts

@@ -0,0 +1,206 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './dropdown-button.scss';
+
+/**
+ * @label Dropdown Button
+ * @tag wc-dropdown-button
+ * @rawTag dropdown-button
+ *
+ * @summary A button that opens a dropdown menu when clicked.
+ * @overview
+ * <p>The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.</p>
+ *
+ * @cssprop --dropdown-button-container-shape: Defines the border radius of the dropdown button container shape.
+ *
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-dropdown-button>
+ *   Actions
+ *   <wc-menu-item slot="menu">Edit</wc-menu-item>
+ *   <wc-menu-item slot="menu">Delete</wc-menu-item>
+ * </wc-dropdown-button>
+ * ```
+ * @tags controls
+ */
+@IndividualComponent
+export class DropdownButton extends LitElement {
+  static override styles = [styles];
+
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+   * The visual style of the dropdown button.
+   *
+   * Possible variant values:
+   * `"filled"` is a filled button.
+   * `"outlined"` is an outlined button.
+   * `"text"` is a transparent button.
+   * `"tonal"` is a light color button.
+   * `"elevated"` is an elevated button.
+   */
+  @property({ reflect: true }) variant:
+    | 'elevated'
+    | 'filled'
+    | 'tonal'
+    | 'outlined'
+    | 'text' = 'filled';
+
+  /**
+   * Defines the primary color of the dropdown button.
+   */
+  @property({ reflect: true }) color:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'surface'
+    | 'on-surface' = 'primary';
+
+  /**
+   * Whether the dropdown button is disabled.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Menu placement relative to the button.
+   * Possible values are `"bottom-start"`, `"bottom-end"`, `"top-start"`, `"top-end"`. Defaults to `"bottom-start"`.
+   */
+  @property({ reflect: true }) placement:
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'top-start'
+    | 'top-end' = 'bottom-start';
+
+  @state() private _menuOpen = false;
+
+  @query('.trigger-button') private readonly _triggerButton!: HTMLElement & {
+    focus: () => void;
+  };
+
+  @query('wc-menu') private readonly _menu!: HTMLElement & {
+    open: boolean;
+    anchorElement: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+    focus: () => void;
+  };
+
+  private _menuId = `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+  override focus() {
+    this._triggerButton?.focus();
+  }
+
+  private _onButtonClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    if (this._menuOpen) {
+      this._menu?.close();
+    } else {
+      this._menu.anchorElement = this;
+      this._menu?.show();
+    }
+  }
+
+  private _onMenuOpened = () => {
+    this._menuOpen = true;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onMenuClosed = () => {
+    this._menuOpen = false;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (this.disabled) return;
+
+    if (event.key === 'ArrowDown' && !this._menuOpen) {
+      event.preventDefault();
+      this._menu.anchorElement = this;
+      this._menu?.show();
+      requestAnimationFrame(() => this._menu?.focus());
+    }
+
+    if (event.key === 'Escape' && this._menuOpen) {
+      this._menu?.close();
+      this._triggerButton?.focus();
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this._onKeyDown);
+  }
+
+  override disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKeyDown);
+    super.disconnectedCallback();
+  }
+
+  override render() {
+    const buttonClasses = {
+      'trigger-button': true,
+      active: this._menuOpen,
+      disabled: this.disabled,
+    };
+
+    return html`
+      <wc-button
+        class=${classMap(buttonClasses)}
+        size=${this.size}
+        variant=${this.variant}
+        color=${this.color}
+        icon-align="end"
+        ?disabled=${this.disabled}
+        .configAria=${{
+          'aria-haspopup': 'menu',
+          'aria-expanded': String(this._menuOpen),
+          'aria-controls': this._menuId,
+        }}
+        @click=${this._onButtonClick}
+      >
+        <slot></slot>
+        <wc-icon
+          slot="icon"
+          name="arrow_drop_down"
+          class="dropdown-icon"
+          aria-hidden="true"
+        ></wc-icon>
+      </wc-button>
+
+      <wc-menu
+        id=${this._menuId}
+        placement=${this.placement}
+        @opened=${this._onMenuOpened}
+        @closed=${this._onMenuClosed}
+      >
+        <slot name="menu"></slot>
+      </wc-menu>
+    `;
+  }
+}

package/src/dropdown-button/index.ts

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

package/src/elevation/elevation.scss

@@ -1,3 +1,7 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
 /**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
@@ -7,11 +11,7 @@
 .shadow,
 .shadow::before,
 .shadow::after {
-  border-start-start-radius: var(--elevation-container-shape-start-start, var(--elevation-container-shape));
-  border-start-end-radius: var(--elevation-container-shape-start-end, var(--elevation-container-shape));
-  border-end-start-radius: var(--elevation-container-shape-end-start, var(--elevation-container-shape));
-  border-end-end-radius: var(--elevation-container-shape-end-end, var(--elevation-container-shape));
-  corner-shape: var(--elevation-container-shape-variant);
+  @include mixin.apply-container-shape(elevation);
 
   inset: 0;
   position: absolute;

package/src/fab/fab.ts

@@ -1,5 +1,5 @@
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -8,10 +8,10 @@ import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-e
 import { throttle } from '@/__utils/throttle.js';
 import { spread } from '@/__directive/spread.js';
 
-import { IconProvider } from '../icon/icon.js';
 import styles from './fab.scss';
 import colorStyles from './fab-colors.scss';
 import sizeStyles from './fab-sizes.scss';
+import { BaseButton } from '@/button/BaseButton.js';
 
 /**
  * @label FAB
@@ -31,32 +31,17 @@ import sizeStyles from './fab-sizes.scss';
  *
  * @example
  * ```html
- * <wc-fab name="add"></wc-fab>
+ * <wc-fab><wc-icon name="add"></wc-icon></wc-fab>
  * ```
  * @tags controls
  */
 @IndividualComponent
-export class Fab extends LitElement {
+export class Fab extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
   #id = crypto.randomUUID();
+  
 
-  #tabindex?: number = 0;
-
-  /**
-   * Name of the icon to display inside the FAB.
-   */
-  @property({ type: String, reflect: true }) name?: string;
-
-  /**
-   * Source URL for a custom icon.
-   */
-  @property({ type: String, reflect: true }) src?: string;
-
-  /**
-   * Icon provider. Defaults to `"material-symbols"`.
-   */
-  @property({ type: String }) provider: IconProvider = 'material-symbols';
 
   /**
    * Optional label text for the extended FAB variant.
@@ -93,21 +78,6 @@ export class Fab extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) lowered: boolean = false;
 
-  /**
-   * If `true`, the user cannot interact with the FAB.
-   */
-  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
-
-  /**
-   * Hyperlink to navigate to on click.
-   */
-  @property({ reflect: true }) href?: string;
-
-  /**
-   * Sets or retrieves the window or frame at which to target content.
-   */
-  @property() target: string = '_self';
-
   /**
    * Additional ARIA attributes to pass to the inner button/anchor element.
    */
@@ -127,26 +97,12 @@ export class Fab extends LitElement {
   @state()
   isPressed = false;
 
-  @query('.fab') readonly fabElement!: HTMLElement | null;
-
   override focus() {
-    this.fabElement?.focus();
+    this.buttonElement?.focus();
   }
 
   override blur() {
-    this.fabElement?.blur();
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
+    this.buttonElement?.blur();
   }
 
   override firstUpdated() {
@@ -156,30 +112,6 @@ export class Fab extends LitElement {
     );
   }
 
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled) 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;
-    }
-  };
-
-  __isLink() {
-    return !!this.href;
-  }
-
-  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
-    event => {
-      this.__dispatchClick(event);
-    };
-
   __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
     if (this.disabled && this.href) {
       event.stopImmediatePropagation();
@@ -187,12 +119,12 @@ export class Fab extends LitElement {
       return;
     }
 
-    if (!isActivationClick(event) || !this.fabElement) {
+    if (!isActivationClick(event) || !this.buttonElement) {
       return;
     }
 
     this.focus();
-    dispatchActivationClick(this.fabElement);
+    dispatchActivationClick(this.buttonElement);
   };
 
   __getDisabledReasonID() {
@@ -204,6 +136,7 @@ export class Fab extends LitElement {
     const isExtended = !!this.label;
 
     const cssClasses = {
+      button: true,
       fab: true,
       'fab-element': true,
       [`size-${this.size}`]: true,
@@ -218,15 +151,16 @@ export class Fab extends LitElement {
     if (!isLink) {
       return html`<button
           class=${classMap(cssClasses)}
-          id="fab"
-          tabindex=${this.#tabindex}
+          id="button"
           type="button"
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-label=${this.label ?? this.name ?? nothing}
-          aria-disabled=${`${this.disabled}`}
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -237,17 +171,19 @@ export class Fab extends LitElement {
 
     return html`<a
         class=${classMap(cssClasses)}
-        id="fab"
-        tabindex=${this.#tabindex}
+        id="button"
+        tabindex=${this.disabled ? '-1' : '0'}
         href=${ifDefined(this.href)}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-label=${this.label ?? this.name ?? nothing}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.__renderFabContent(isExtended)}
@@ -257,29 +193,22 @@ export class Fab extends LitElement {
 
   __renderFabContent(isExtended: boolean) {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.fabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="fab-content">
-        <wc-icon
-          class="fab-icon"
-          name=${ifDefined(this.name)}
-          src=${ifDefined(this.src)}
-          provider=${this.provider}
-        ></wc-icon>
+
+        <slot></slot>
         ${isExtended
           ? html`<span class="fab-label">${this.label}</span>`
           : nothing}
       </div>
+
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 
-  __renderTooltip() {
-    if (this.tooltip) {
-      return html`<wc-tooltip for="fab">${this.tooltip}</wc-tooltip>`;
-    }
-    return nothing;
-  }
 }

package/src/flow-designer/DEMO.md

@@ -0,0 +1,239 @@
+# Flow Designer Component Demo
+
+## Basic Usage
+
+```html
+<wc-flow-designer id="designer"></wc-flow-designer>
+
+<script type="module">
+  import { FlowDesigner, Workflow } from '@redvars/peacock';
+
+  // Define a workflow
+  const workflow = {
+    workflow_id: 'demo_workflow',
+    nodes: {
+      id: 'start',
+      type: 'trigger',
+      label: 'Start Process',
+      children: [
+        {
+          id: 'validate',
+          type: 'decision',
+          label: 'Data Valid?',
+          branches: {
+            yes: [
+              {
+                id: 'process',
+                type: 'action',
+                label: 'Process Data',
+              }
+            ],
+            no: [
+              {
+                id: 'error',
+                type: 'action',
+                label: 'Log Error',
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
+
+  // Set workflow on component
+  const designer = document.getElementById('designer');
+  designer.workflow = workflow;
+
+  // Listen for changes
+  designer.addEventListener('workflow-changed', (e) => {
+    console.log('Workflow changed:', e.detail.type);
+    console.log('Updated workflow:', e.detail.workflow);
+  });
+
+  // Add a new node
+  const newNode = {
+    id: 'new_action',
+    type: 'action',
+    label: 'New Action'
+  };
+  designer.addNode(newNode, 'start');
+
+  // Undo/Redo
+  if (designer.canUndo()) {
+    designer.undo();
+  }
+
+  if (designer.canRedo()) {
+    designer.redo();
+  }
+
+  // Validate
+  designer.validate();
+
+  // Export
+  const json = designer.exportWorkflow();
+</script>
+```
+
+## Customizing Node Templates
+
+```html
+<wc-flow-designer id="designer">
+  <!-- Custom trigger node template -->
+  <div slot="trigger-header" style="color: green; font-weight: bold;">
+    🚀 Custom Trigger
+  </div>
+
+  <!-- Custom action node template -->
+  <div slot="action-header" style="color: blue;">
+    ⚙️ Custom Action
+  </div>
+  <p slot="action-body">Custom action content here</p>
+
+  <!-- Custom decision template -->
+  <div slot="decision-header" style="color: orange;">
+    ❓ Custom Decision
+  </div>
+</wc-flow-designer>
+```
+
+## Workflow Structure
+
+The component supports complex workflows:
+
+```javascript
+{
+  workflow_id: 'complex_workflow',
+  nodes: {
+    id: 'trigger_1',
+    type: 'trigger',
+    label: 'Input Received',
+    
+    // Sequential flow
+    children: [
+      {
+        id: 'loop_1',
+        type: 'loop_start',
+        label: 'Begin Loop',
+        
+        children: [
+          {
+            id: 'decision_1',
+            type: 'decision',
+            label: 'Check Condition',
+            
+            // Conditional branching
+            branches: {
+              yes: [
+                {
+                  id: 'fork_1',
+                  type: 'fork',
+                  label: 'Parallel Tasks',
+                  
+                  // Parallel execution
+                  tasks: [
+                    { id: 'task_1', type: 'action', label: 'Task A' },
+                    { id: 'task_2', type: 'action', label: 'Task B' }
+                  ],
+                  
+                  // Join point
+                  join: {
+                    id: 'join_1',
+                    type: 'join',
+                    label: 'Merge',
+                    children: [
+                      {
+                        id: 'loop_end_1',
+                        type: 'loop_end',
+                        label: 'Loop Back',
+                        target_id: 'loop_1'
+                      }
+                    ]
+                  }
+                }
+              ],
+              no: [
+                { id: 'skip', type: 'action', label: 'Skip' }
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+## Available Node Types
+
+- **trigger** - Start of workflow
+- **action** - Perform an action
+- **decision** - Branch on condition (yes/no)
+- **loop_start** - Begin loop
+- **loop_end** - End loop (loop_start target)
+- **fork** - Parallel execution start
+- **join** - Parallel execution end
+
+## Events
+
+- `workflow-changed` - Emitted when workflow is modified
+- `node-selected` - Emitted when node is clicked
+- `node-edited` - Emitted when node is edited
+- `node-deleted` - Emitted when node is deleted
+- `validation-result` - Emitted when validate() is called
+
+## Properties
+
+- `workflow: Workflow` - Current workflow definition
+- `readonly: boolean` - Read-only mode (default: false)
+- `disabled: boolean` - Disabled state (default: false)
+- `showValidation: boolean` - Show validation errors (default: false)
+
+## Methods
+
+- `addNode(node, parentId, connectionType?, branchKey?)` - Add node
+- `deleteNode(nodeId)` - Delete node
+- `editNode(nodeId, updates)` - Edit node
+- `moveNode(nodeId, newParentId, newIndex, connectionType?, branchKey?)` - Move node
+- `undo()` - Undo last operation
+- `redo()` - Redo last undone operation
+- `canUndo()` - Check if undo available
+- `canRedo()` - Check if redo available
+- `validate()` - Validate workflow
+- `exportWorkflow()` - Export as JSON
+
+## Validation
+
+The component automatically validates workflows after each change:
+
+- ✅ Detects circular loops
+- ✅ Detects orphaned nodes
+- ✅ Validates decision branches (yes/no)
+- ✅ Validates fork/join pairs
+- ✅ Validates loop targets
+
+Invalid workflows will prompt user confirmation before accepting changes.
+
+## Styling
+
+Custom CSS properties available:
+
+```css
+wc-flow-designer {
+  --flow-designer-height: 600px;
+  --flow-designer-border-color: var(--color-outline-variant);
+  --flow-designer-background: var(--color-surface);
+  --flow-designer-border-radius: var(--shape-corner-medium);
+  --flow-designer-action-bar-bg: var(--color-surface-container);
+}
+```
+
+## Keyboard Shortcuts
+
+- **Ctrl+Z** / **Cmd+Z** - Undo
+- **Ctrl+Y** / **Cmd+Y** - Redo
+- **Delete** - Delete selected node
+- **Enter** / **Space** - Select/activate node
+- **Click + Drag** - Pan canvas
+- **Scroll** - Zoom in/out (via toolbar)