@redvars/peacock 3.6.2 → 3.6.3

package/src/button/icon-button/icon-button.ts

@@ -149,6 +149,7 @@ export class IconButton extends BaseButton {
     };
 
     if (!isLink) {
+      cssClasses['native-button'] = true;
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
@@ -167,27 +168,29 @@ export class IconButton extends BaseButton {
           ${this.renderButtonContent()}
         </button>
         ${this.__renderTooltip()}`;
-    }
-    return html`<a
-        class=${classMap(cssClasses)}
-        id="button"
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.__dispatchClick}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
-        role="button"
-        
-        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-        ?aria-disabled=${this.softDisabled}
+    } else {
+      cssClasses['native-link'] = true;
+      return html`<a
+          class=${classMap(cssClasses)}
+          id="button"
+          href=${this.href}
+          target=${this.target}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          role="button"
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
 
-        ${spread(this.configAria)}
-      >
-        ${this.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
+          ${spread(this.configAria)}
+        >
+          ${this.renderButtonContent()}
+        </a>
+        ${this.__renderTooltip()}`;
+    }
   }
 
   renderButtonContent() {

package/src/canvas/canvas.scss

@@ -12,8 +12,22 @@
 }
 
 .canvas-wrapper {
+  position: relative;
   background: var(--canvas-background);
-  border-radius: var(--shape-corner-medium);
+}
+
+.canvas {
+  display: block;
+}
+
+.canvas-background,
+.canvas-shapes {
+  position: absolute;
+  inset: 0;
+}
+
+.canvas-background {
+  pointer-events: none;
 }
 
 #canvas-background circle {
@@ -22,16 +36,14 @@
 
 #endarrow polyline {
   fill: none;
-  stroke: var(--canvas-arrow-color);
+  stroke: context-stroke;
   vector-effect: non-scaling-stroke;
   stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
 .line {
-  &.no-color {
-    stroke: var(--canvas-line-color);
-  }
-
   &.variant-dashed {
     stroke-dasharray: 6 6;
   }

package/src/canvas/canvas.ts

@@ -61,6 +61,9 @@ export type CanvasShape =
   | CanvasLineShape
   | CanvasConnectorShape;
 
+const GRID_GAP = 10;
+const GRID_DOT_RADIUS = 1;
+
 interface CanvasBounds {
   x: number;
   y: number;
@@ -68,6 +71,20 @@ interface CanvasBounds {
   height: number;
 }
 
+interface CanvasExtents {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
+interface CanvasViewBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 /**
  * @label Canvas
  * @tag wc-canvas
@@ -118,10 +135,6 @@ export class Canvas extends LitElement {
   @property({ type: String })
   viewbox?: string;
 
-  private unitSize: number = 1;
-
-  private gap: number = this.unitSize * 10;
-
   private static getNextPoint(
     point: CanvasPoint,
     direction: CanvasDirection,
@@ -134,30 +147,33 @@ export class Canvas extends LitElement {
     return { x: point.x, y: point.y };
   }
 
-  private static updateComputationArea(
-    point: CanvasPoint,
-    area: CanvasBounds,
-  ): CanvasBounds {
-    const nextArea = { ...area };
-    if (point.x > nextArea.width) nextArea.width = point.x;
-    else if (point.x < nextArea.x) nextArea.x = point.x;
-    if (point.y > nextArea.height) nextArea.height = point.y;
-    else if (point.y < nextArea.y) nextArea.y = point.y;
-    return nextArea;
+  private static updateExtents(
+    extents: CanvasExtents,
+    x: number,
+    y: number,
+  ) {
+    if (x < extents.minX) extents.minX = x;
+    if (x > extents.maxX) extents.maxX = x;
+    if (y < extents.minY) extents.minY = y;
+    if (y > extents.maxY) extents.maxY = y;
   }
 
   private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {
     return {
       line: true,
-      'no-color': false,
       'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',
       'variant-animated-dashed': variant === 'animated-dashed',
     };
   }
 
   private computeShapes(initialBounds: CanvasBounds) {
-    const dotRadius = this.unitSize;
-    let computedViewbox = { ...initialBounds };
+    // Track world-space bounds (grid units) as shapes are processed.
+    const extents: CanvasExtents = {
+      minX: initialBounds.x,
+      minY: initialBounds.y,
+      maxX: initialBounds.x + initialBounds.width,
+      maxY: initialBounds.y + initialBounds.height,
+    };
 
     const shapes = this.shapes.map(shape => {
       switch (shape.type) {
@@ -165,19 +181,14 @@ export class Canvas extends LitElement {
           const r = shape.radius || 1;
           const cx = shape.x || 0;
           const cy = shape.y || 0;
-          if (cx + Math.ceil(r) > computedViewbox.width)
-            computedViewbox.width = cx + Math.ceil(r);
-          if (cx - Math.ceil(r) < computedViewbox.x)
-            computedViewbox.x = cx - Math.ceil(r);
-          if (cy + Math.ceil(r) > computedViewbox.height)
-            computedViewbox.height = cy + Math.ceil(r);
-          if (cy - Math.ceil(r) < computedViewbox.y)
-            computedViewbox.y = cy - Math.ceil(r);
+          Canvas.updateExtents(extents, cx - r, cy - r);
+          Canvas.updateExtents(extents, cx + r, cy + r);
 
+          // Convert from grid units to SVG pixels using the fixed gap.
           return svg`<circle
-            cx=${cx * this.gap + dotRadius}
-            cy=${cy * this.gap + dotRadius}
-            r=${r * this.gap}
+            cx=${cx * GRID_GAP + GRID_DOT_RADIUS}
+            cy=${cy * GRID_GAP + GRID_DOT_RADIUS}
+            r=${r * GRID_GAP}
             fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
           />`;
         }
@@ -186,27 +197,23 @@ export class Canvas extends LitElement {
           const h = shape.height || 1;
           const rx = shape.x || 0;
           const ry = shape.y || 0;
-          if (rx + Math.ceil(w) > computedViewbox.width)
-            computedViewbox.width = rx + Math.ceil(w);
-          if (rx - Math.ceil(w) < computedViewbox.x)
-            computedViewbox.x = rx - Math.ceil(w);
-          if (ry + Math.ceil(h) > computedViewbox.height)
-            computedViewbox.height = ry + Math.ceil(h);
-          if (ry - Math.ceil(h) < computedViewbox.y)
-            computedViewbox.y = ry - Math.ceil(h);
+          Canvas.updateExtents(extents, rx, ry);
+          Canvas.updateExtents(extents, rx + w, ry + h);
 
           return svg`<rect
-            x=${rx * this.gap + dotRadius}
-            y=${ry * this.gap}
-            width=${w * this.gap + dotRadius}
-            height=${h * this.gap + dotRadius}
+            x=${rx * GRID_GAP + GRID_DOT_RADIUS}
+            y=${ry * GRID_GAP}
+            width=${w * GRID_GAP + GRID_DOT_RADIUS}
+            height=${h * GRID_GAP + GRID_DOT_RADIUS}
             fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}
           />`;
         }
         case 'line': {
           const start = shape.start || { x: 0, y: 0 };
           const end = shape.end || { x: 0, y: 0 };
-          const pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius} L${end.x * this.gap + dotRadius} ${end.y * this.gap + dotRadius}`;
+          Canvas.updateExtents(extents, start.x, start.y);
+          Canvas.updateExtents(extents, end.x, end.y);
+          const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;
           const strokeColor =
             shape.color ||
             'var(--canvas-line-color, var(--color-on-surface))';
@@ -215,7 +222,6 @@ export class Canvas extends LitElement {
             class=${classMap({
               ...Canvas.getStrokeVariantClasses(shape.variant),
               clickable: !!shape.clickable,
-              'no-color': !shape.color,
             })}
             stroke-width="2"
             stroke-linecap="round"
@@ -229,19 +235,20 @@ export class Canvas extends LitElement {
         }
         case 'connector': {
           const start = shape.start || { x: 0, y: 0 };
-          let pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius}`;
+          let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;
           let current = { ...start };
-          computedViewbox = Canvas.updateComputationArea(current, computedViewbox);
+          Canvas.updateExtents(extents, current.x, current.y);
 
           const pathSegments = shape.path || [];
           for (let i = 0; i < pathSegments.length; i += 1) {
             const path = pathSegments[i];
 
             if (i === 0) {
+              // Move one unit first so curved corner joins don't overlap start.
               const point = Canvas.getNextPoint(current, path.direction, 1);
-              pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+              pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
               current = { ...point };
-              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);
+              Canvas.updateExtents(extents, current.x, current.y);
             }
 
             const point = Canvas.getNextPoint(
@@ -249,26 +256,28 @@ export class Canvas extends LitElement {
               path.direction,
               path.length - 2,
             );
-            pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;
+            pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;
             current = { ...point };
-            computedViewbox = Canvas.updateComputationArea(current, computedViewbox);
+            Canvas.updateExtents(extents, current.x, current.y);
 
             if (i === pathSegments.length - 1) {
               const endPoint = Canvas.getNextPoint(current, path.direction, 1);
-              pathString += ` L${endPoint.x * this.gap + dotRadius} ${endPoint.y * this.gap + dotRadius}`;
+              pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
               current = { ...endPoint };
-              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);
+              Canvas.updateExtents(extents, current.x, current.y);
             } else {
               const nextPath = pathSegments[i + 1];
               const midPoint = Canvas.getNextPoint(current, path.direction, 1);
+              Canvas.updateExtents(extents, midPoint.x, midPoint.y);
               const nextPoint = Canvas.getNextPoint(
                 midPoint,
                 nextPath.direction,
                 1,
               );
-              pathString += ` Q ${midPoint.x * this.gap + dotRadius} ${midPoint.y * this.gap + dotRadius} ${nextPoint.x * this.gap + dotRadius} ${nextPoint.y * this.gap + dotRadius}`;
+              // Use a quadratic segment to round corners between directions.
+              pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;
               current = { ...nextPoint };
-              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);
+              Canvas.updateExtents(extents, current.x, current.y);
             }
           }
 
@@ -280,7 +289,6 @@ export class Canvas extends LitElement {
             <path
               class=${classMap({
                 ...Canvas.getStrokeVariantClasses(shape.variant),
-                'no-color': !shape.color,
               })}
               stroke-width="2"
               stroke-linecap="round"
@@ -306,19 +314,68 @@ export class Canvas extends LitElement {
       }
     });
 
-    // Padding
-    computedViewbox.x -= this.padding;
-    computedViewbox.y -= this.padding;
-    computedViewbox.width += this.padding;
-    computedViewbox.height += this.padding;
-    computedViewbox.width -= computedViewbox.x;
-    computedViewbox.height -= computedViewbox.y;
+    // Expand bounds with padding so shapes are not flush to the edge.
+    const computedViewbox = {
+      x: extents.minX - this.padding,
+      y: extents.minY - this.padding,
+      width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),
+      height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),
+    };
 
     return { shapes, computedViewbox };
   }
 
+  private renderBackgroundSvg(computedViewBox: CanvasViewBox, svgViewBox: string) {
+    return html`
+      <svg
+        class="canvas canvas-background"
+        height="100%"
+        width="100%"
+        viewBox=${svgViewBox}
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern
+            id="canvas-background"
+            patternUnits="userSpaceOnUse"
+            width=${GRID_GAP}
+            height=${GRID_GAP}
+          >
+            <circle cx="1" cy="1" r=${GRID_DOT_RADIUS} />
+          </pattern>
+        </defs>
+
+        <rect
+          x=${computedViewBox.x * GRID_GAP}
+          y=${computedViewBox.y * GRID_GAP}
+          width="100%"
+          height="100%"
+          fill="url(#canvas-background)"
+        />
+      </svg>
+    `;
+  }
+
+  private renderShapesSvg(shapes: unknown[], svgViewBox: string) {
+    return html`
+      <svg
+        class="canvas canvas-shapes"
+        height="100%"
+        width="100%"
+        viewBox=${svgViewBox}
+      >
+        <defs>
+          <marker id="endarrow" markerWidth="10" markerHeight="10" refX="5" refY="5" markerUnits="strokeWidth" orient="auto">
+            <polyline  points="0 2, 5 5, 0 8"></polyline>
+          </marker>
+        </defs>
+
+        ${shapes}
+      </svg>
+    `;
+  }
+
   protected render() {
-    const dotRadius = this.unitSize;
     let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };
 
     const { shapes, computedViewbox } = this.computeShapes(computedViewBox);
@@ -334,57 +391,22 @@ export class Canvas extends LitElement {
       };
     }
 
+    // Zoom scales the outer viewport size while the SVG viewBox stays in world units.
     const wrapperWidth =
-      (computedViewBox.width * this.gap + 2) * dotRadius * this.zoom;
+      (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
     const wrapperHeight =
-      (computedViewBox.height * this.gap + 2) * dotRadius * this.zoom;
+      (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;
 
-    const svgViewBox = `${computedViewBox.x * this.gap} ${computedViewBox.y * this.gap} ${computedViewBox.width * this.gap + 2 * dotRadius} ${computedViewBox.height * this.gap + 2 * dotRadius}`;
+    // viewBox maps world-space extents into the internal SVG coordinate system.
+    const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;
 
     return html`
       <div
         class="canvas-wrapper"
         style="width: ${wrapperWidth}px; height: ${wrapperHeight}px;"
       >
-        <svg
-          class="canvas"
-          height="100%"
-          width="100%"
-          viewBox=${svgViewBox}
-        >
-          <defs>
-            <pattern
-              id="canvas-background"
-              patternUnits="userSpaceOnUse"
-              width=${this.gap}
-              height=${this.gap}
-            >
-              <circle cx="1" cy="1" r=${dotRadius} />
-            </pattern>
-
-            <marker
-              id="endarrow"
-              markerWidth="15"
-              markerHeight="22.5"
-              refX="9"
-              refY="15"
-              markerUnits="userSpaceOnUse"
-              orient="auto"
-            >
-              <polyline points="0 22.5, 7.5 15, 0 7.5"></polyline>
-            </marker>
-          </defs>
-
-          <rect
-            x=${computedViewBox.x * this.gap}
-            y=${computedViewBox.y * this.gap}
-            width="100%"
-            height="100%"
-            fill="url(#canvas-background)"
-          />
-
-          ${shapes}
-        </svg>
+        ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}
+        ${this.renderShapesSvg(shapes, svgViewBox)}
       </div>
     `;
   }

package/src/chip/chip/chip.scss

@@ -3,7 +3,7 @@
 @include mixin.base-styles;
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
   --chip-outline-color: var(--color-outline-variant);

package/src/empty-state/empty-state.scss

@@ -53,6 +53,7 @@
 
 :host(.content-center) .content {
   align-items: center;
+  text-align: center;
 }
 
 @container emptystate (min-width: 672px) {

package/src/field/field.ts

@@ -24,6 +24,12 @@ import styles from './field.scss';
  * @tags form
  */
 export class Field extends LitElement {
+
+  static shadowRootOptions: ShadowRootInit = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+    
   static styles = [styles];
 
   @property({ type: String })

package/src/flow-designer/flow-designer-node.ts

@@ -10,6 +10,7 @@ import type { WorkflowNode } from './types.js';
  *
  * @tag wc-flow-designer-node
  * @rawTag flow-designer-node
+ * @parentRawTag flow-designer
  * @wip true
  */
 @IndividualComponent

package/src/image/image.scss

@@ -30,27 +30,32 @@ img.clickable {
   display: block;
 }
 
-/* Preview overlay — rendered in light DOM via portal, but we keep
-    a host-level overlay as a fallback when shadow DOM is used.       */
-.preview-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
-  align-items: center;
-  justify-content: center;
+/* Lightbox preview — native <dialog> renders in the top layer,
+   bypassing any stacking context on the host page.                  */
+.preview-dialog {
+  background: transparent;
+  border: none;
   cursor: zoom-out;
+  max-height: 90dvh;
+  max-width: 90dvw;
+  padding: 0;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: color-mix(in srgb, var(--color-scrim), transparent 15%);
+  }
 }
 
-.preview-overlay.open {
-  display: flex;
-}
-
-.preview-overlay img {
+.preview-dialog img {
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-shadow), transparent 40%);
   border-radius: 4px;
+  cursor: auto;
 }

package/src/image/image.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 import { isDarkMode } from '@/__utils/is-dark-mode.js';
 import { observeThemeChange } from '@/__utils/observe-theme-change.js';
@@ -37,7 +37,7 @@ export class Image extends LitElement {
 
   @state() private _loaded = false;
 
-  @state() private _previewOpen = false;
+  @query('.preview-dialog') private _dialog?: HTMLDialogElement;
 
   private _intersectionObserver: IntersectionObserver | null = null;
 
@@ -90,13 +90,15 @@ export class Image extends LitElement {
 
   private _handleClick() {
     if (this.preview) {
-      this._previewOpen = true;
+      this._dialog?.showModal();
     }
   }
 
-  private _closePreview(e: Event) {
-    e.stopPropagation();
-    this._previewOpen = false;
+  private _handleDialogClick(e: MouseEvent) {
+    // Close when clicking the backdrop (target is the dialog itself, not the image)
+    if (e.target === e.currentTarget) {
+      (e.currentTarget as HTMLDialogElement).close();
+    }
   }
 
   render() {
@@ -112,17 +114,14 @@ export class Image extends LitElement {
           : html`<span class="placeholder" aria-hidden="true"></span>`}
       </div>
 
-      <!-- Lightbox preview overlay (inside shadow root) -->
-      <div
-        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
-        role="dialog"
-        aria-modal="true"
+      <!-- Lightbox preview dialog — uses native top-layer to avoid stacking context issues -->
+      <dialog
+        class="preview-dialog"
         aria-label="Image preview"
-        @click=${this._closePreview}
-        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+        @click=${this._handleDialogClick}
       >
         <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e: Event) => e.stopPropagation()} />
-      </div>
+      </dialog>
     `;
   }
 }

package/src/index.ts

@@ -39,6 +39,7 @@ 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 { Item } from './item/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';