@redvars/peacock 3.5.0 → 3.6.0

package/src/chart-bar/chart-stacked-bar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import * as d3 from 'd3';
+import { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, stack, Series, SeriesPoint, ScaleOrdinal } from 'd3';
 
 import IndividualComponent from '@/IndividualComponent.js';
 
@@ -135,15 +135,14 @@ export class ChartStackedBar extends LitElement {
   }
 
   private _getColorScale(keys: string[]) {
-    return d3
-      .scaleOrdinal<string, string>()
+    return scaleOrdinal<string, string>()
       .domain(keys)
       .range(chartColors);
   }
 
   private _getColorMap(
     keys: string[],
-    scale: d3.ScaleOrdinal<string, string>,
+    scale: ScaleOrdinal<string, string>,
   ) {
     const map = new Map<string, string>();
     keys.forEach(key => {
@@ -176,7 +175,7 @@ export class ChartStackedBar extends LitElement {
     const margin = Math.max(this.margin, 16);
     const data = this.data ?? [];
 
-    const svg = d3.select(this.svgElement);
+    const svg = select(this.svgElement);
     svg.attr('width', width).attr('height', height);
 
     const innerWidth = Math.max(width - margin * 2, 0);
@@ -198,20 +197,17 @@ export class ChartStackedBar extends LitElement {
     const colorMap = this._getColorMap(keys, colorScale);
 
     const totals = this._getTotals();
-    const xScale = d3
-      .scaleBand<string>()
+    const xScale = scaleBand<string>()
       .domain(data.map(d => d.name))
       .range([0, innerWidth])
       .padding(0.3);
-    const maxValue = d3.max(totals) ?? 0;
-    const yScale = d3
-      .scaleLinear()
+    const maxValue = max(totals) ?? 0;
+    const yScale = scaleLinear()
       .domain([0, maxValue || 1])
       .nice()
       .range([innerHeight, 0]);
 
-    const stackedSeries = d3
-      .stack<ChartStackedBarItem, string>()
+    const stackedSeries = stack<ChartStackedBarItem, string>()
       .keys(keys)
       .value(
         (d, key) => d.segments.find(segment => segment.name === key)?.value ?? 0,
@@ -220,8 +216,7 @@ export class ChartStackedBar extends LitElement {
     const yGrid = container.select<SVGGElement>('.y-grid');
     yGrid
       .call(
-        d3
-          .axisLeft(yScale)
+        axisLeft(yScale)
           .ticks(5)
           .tickSize(-innerWidth)
           .tickFormat(() => ''),
@@ -235,8 +230,7 @@ export class ChartStackedBar extends LitElement {
     xAxis
       .attr('transform', `translate(0,${innerHeight})`)
       .call(
-        d3
-          .axisBottom(xScale)
+        axisBottom(xScale)
           .tickSizeOuter(0)
           .tickFormat(name => {
             const entry = data.find(d => d.name === name);
@@ -252,7 +246,7 @@ export class ChartStackedBar extends LitElement {
 
     const barGroups = container
       .select('.bars')
-      .selectAll<SVGGElement, d3.Series<ChartStackedBarItem, string>>(
+      .selectAll<SVGGElement, Series<ChartStackedBarItem, string>>(
         '.bar-group',
       )
       .data(stackedSeries, series => series.key)
@@ -268,7 +262,7 @@ export class ChartStackedBar extends LitElement {
       .style('fill', series => colorMap.get(series.key) ?? colorScale(series.key));
 
     const segmentJoin = barGroups
-      .selectAll<SVGRectElement, d3.SeriesPoint<ChartStackedBarItem>>('rect')
+      .selectAll<SVGRectElement, SeriesPoint<ChartStackedBarItem>>('rect')
       .data(series => series, d => d.data.name)
       .join(
         enter =>

package/src/chart-doughnut/chart-doughnut.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { select, arc, pie, scaleOrdinal, easeCubicInOut, interpolateNumber, PieArcDatum, BaseType } from 'd3';
 import IndividualComponent from '@/IndividualComponent.js';
-import * as d3 from 'd3';
 import styles from './chart-donut.scss';
 
 export type ChartDoughnutColor = {
@@ -24,7 +24,7 @@ const chartColors: ChartDoughnutColor[] = [];
 
 /** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */
 interface ArcPathElement extends SVGPathElement {
-  _prevDatum?: d3.PieArcDatum<ChartDoughnutItem>;
+  _prevDatum?: PieArcDatum<ChartDoughnutItem>;
 }
 
 function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
@@ -108,16 +108,14 @@ export class ChartDoughnut extends LitElement {
   }
 
   private _getPieData() {
-    const pie = d3
-      .pie<ChartDoughnutItem>()
+    const pieGenerator = pie<ChartDoughnutItem>()
       .sort(null)
       .value(d => d.value);
-    return pie(this.data);
+    return pieGenerator(this.data);
   }
 
   private _getColorScale() {
-    return d3
-      .scaleOrdinal<string, ChartDoughnutColor>()
+    return scaleOrdinal<string, ChartDoughnutColor>()
       .domain(this.data.map(d => d.name))
       .range(chartColors);
   }
@@ -131,15 +129,13 @@ export class ChartDoughnut extends LitElement {
     const colorScale = this._getColorScale();
     const total = this._getTotal();
 
-    const svg = d3.select(this.svgElement);
+    const svg = select(this.svgElement);
 
-    const doughnutArc = d3
-      .arc<d3.PieArcDatum<ChartDoughnutItem>>()
+    const doughnutArc = arc<PieArcDatum<ChartDoughnutItem>>()
       .innerRadius(radius * 0.72)
       .outerRadius(radius);
 
-    const labelsArc = d3
-      .arc<d3.PieArcDatum<ChartDoughnutItem>>()
+    const labelsArc = arc<PieArcDatum<ChartDoughnutItem>>()
       .innerRadius(radius + 10)
       .outerRadius(radius + 10);
 
@@ -152,7 +148,7 @@ export class ChartDoughnut extends LitElement {
     // Arc paths — keyed by name so D3 matches elements across updates
     const $paths = svg
       .select('.arc-container')
-      .selectAll<SVGPathElement, d3.PieArcDatum<ChartDoughnutItem>>('.arc')
+      .selectAll<SVGPathElement, PieArcDatum<ChartDoughnutItem>>('.arc')
       .data(pieData, d => d.data.name)
       .join('path')
       .attr('class', 'arc')
@@ -162,7 +158,7 @@ export class ChartDoughnut extends LitElement {
       $paths
         .transition()
         .duration(DURATION)
-        .ease(d3.easeCubicInOut)
+        .ease(easeCubicInOut)
         .attrTween('d', function (this: SVGPathElement, d) {
           const self = this as ArcPathElement;
           // Interpolate from the last rendered angles to the new ones.
@@ -173,8 +169,8 @@ export class ChartDoughnut extends LitElement {
               endAngle: d.startAngle,
             };
           self._prevDatum = d;
-          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);
-          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);
+          const iStart = interpolateNumber(prev.startAngle, d.startAngle);
+          const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
           return (t: number) =>
             doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??
             '';
@@ -194,11 +190,11 @@ export class ChartDoughnut extends LitElement {
       $title
         .transition()
         .duration(DURATION)
-        .ease(d3.easeCubicInOut)
-        .tween('text', function (this: d3.BaseType) {
-          const sel = d3.select(this as SVGTextElement);
+        .ease(easeCubicInOut)
+        .tween('text', function (this: BaseType) {
+          const sel = select(this as SVGTextElement);
           const start = parseFloat(sel.text()) || 0;
-          const interp = d3.interpolateNumber(start, total);
+          const interp = interpolateNumber(start, total);
           return function (t: number) {
             sel.text(Math.round(interp(t)));
           };
@@ -211,7 +207,7 @@ export class ChartDoughnut extends LitElement {
     const $chartContainer = svg.select('.chart-container');
 
     if (this.showLabels) {
-      const pointsFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {
+      const pointsFn = (d: PieArcDatum<ChartDoughnutItem>) => {
         const posA = doughnutArc.centroid(d);
         const posB = labelsArc.centroid(d);
         const posC = posB.slice() as [number, number];
@@ -220,20 +216,20 @@ export class ChartDoughnut extends LitElement {
         return [posA, posB, posC].map(p => p.join(',')).join(' ');
       };
 
-      const transformFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {
+      const transformFn = (d: PieArcDatum<ChartDoughnutItem>) => {
         const pos = labelsArc.centroid(d);
         const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
         pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
         return `translate(${pos})`;
       };
 
-      const anchorFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {
+      const anchorFn = (d: PieArcDatum<ChartDoughnutItem>) => {
         const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
         return midAngle < Math.PI ? 'start' : 'end';
       };
 
       const $polylines = $chartContainer
-        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDoughnutItem>>(
+        .selectAll<SVGPolylineElement, PieArcDatum<ChartDoughnutItem>>(
           '.item-polyline',
         )
         .data(pieData, d => d.data.name)
@@ -241,7 +237,7 @@ export class ChartDoughnut extends LitElement {
         .attr('class', 'item-polyline');
 
       const $labels = $chartContainer
-        .selectAll<SVGTextElement, d3.PieArcDatum<ChartDoughnutItem>>('.item-label')
+        .selectAll<SVGTextElement, PieArcDatum<ChartDoughnutItem>>('.item-label')
         .data(pieData, d => d.data.name)
         .join('text')
         .attr('class', 'item-label')
@@ -251,12 +247,12 @@ export class ChartDoughnut extends LitElement {
         $polylines
           .transition()
           .duration(DURATION)
-          .ease(d3.easeCubicInOut)
+          .ease(easeCubicInOut)
           .attr('points', pointsFn);
         $labels
           .transition()
           .duration(DURATION)
-          .ease(d3.easeCubicInOut)
+          .ease(easeCubicInOut)
           .attr('transform', transformFn)
           .style('text-anchor', anchorFn);
       } else {

package/src/chart-pie/chart-pie.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { select, arc, pie, scaleOrdinal, PieArcDatum, easeCubicInOut, interpolateNumber } from 'd3';
 import IndividualComponent from '@/IndividualComponent.js';
-import * as d3 from 'd3';
 import styles from './chart-pie.scss';
 
 export type ChartPieColor = {
@@ -24,7 +24,7 @@ const chartColors: ChartPieColor[] = [];
 
 /** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */
 interface ArcPathElement extends SVGPathElement {
-  _prevDatum?: d3.PieArcDatum<ChartPieItem>;
+  _prevDatum?: PieArcDatum<ChartPieItem>;
 }
 
 function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
@@ -102,16 +102,14 @@ export class ChartPie extends LitElement {
   }
 
   private _getPieData() {
-    const pie = d3
-      .pie<ChartPieItem>()
+    const pieGenerator = pie<ChartPieItem>()
       .sort(null)
       .value(d => d.value);
-    return pie(this.data);
+    return pieGenerator(this.data);
   }
 
   private _getColorScale() {
-    return d3
-      .scaleOrdinal<string, ChartPieColor>()
+    return scaleOrdinal<string, ChartPieColor>()
       .domain(this.data.map(d => d.name))
       .range(chartColors);
   }
@@ -124,15 +122,13 @@ export class ChartPie extends LitElement {
     const pieData = this._getPieData();
     const colorScale = this._getColorScale();
 
-    const svg = d3.select(this.svgElement);
+    const svg = select(this.svgElement);
 
-    const pieArc = d3
-      .arc<d3.PieArcDatum<ChartPieItem>>()
+    const pieArc = arc<PieArcDatum<ChartPieItem>>()
       .innerRadius(0)
       .outerRadius(radius);
 
-    const labelsArc = d3
-      .arc<d3.PieArcDatum<ChartPieItem>>()
+    const labelsArc = arc<PieArcDatum<ChartPieItem>>()
       .innerRadius(radius + 10)
       .outerRadius(radius + 10);
 
@@ -145,7 +141,7 @@ export class ChartPie extends LitElement {
     // Arc paths — keyed by name so D3 matches elements across updates
     const $paths = svg
       .select('.arc-container')
-      .selectAll<SVGPathElement, d3.PieArcDatum<ChartPieItem>>('.arc')
+      .selectAll<SVGPathElement, PieArcDatum<ChartPieItem>>('.arc')
       .data(pieData, d => d.data.name)
       .join('path')
       .attr('class', 'arc')
@@ -155,7 +151,7 @@ export class ChartPie extends LitElement {
       $paths
         .transition()
         .duration(DURATION)
-        .ease(d3.easeCubicInOut)
+        .ease(easeCubicInOut)
         .attrTween('d', function (this: SVGPathElement, d) {
           const self = this as ArcPathElement;
           // Interpolate from the last rendered angles to the new ones.
@@ -166,8 +162,8 @@ export class ChartPie extends LitElement {
               endAngle: d.startAngle,
             };
           self._prevDatum = d;
-          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);
-          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);
+          const iStart = interpolateNumber(prev.startAngle, d.startAngle);
+          const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
           return (t: number) =>
             pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';
         });
@@ -184,7 +180,7 @@ export class ChartPie extends LitElement {
     const $chartContainer = svg.select('.chart-container');
 
     if (this.showLabels) {
-      const pointsFn = (d: d3.PieArcDatum<ChartPieItem>) => {
+      const pointsFn = (d: PieArcDatum<ChartPieItem>) => {
         const posA = pieArc.centroid(d);
         const posB = labelsArc.centroid(d);
         const posC = posB.slice() as [number, number];
@@ -193,20 +189,20 @@ export class ChartPie extends LitElement {
         return [posA, posB, posC].map(p => p.join(',')).join(' ');
       };
 
-      const transformFn = (d: d3.PieArcDatum<ChartPieItem>) => {
+      const transformFn = (d: PieArcDatum<ChartPieItem>) => {
         const pos = labelsArc.centroid(d);
         const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
         pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
         return `translate(${pos})`;
       };
 
-      const anchorFn = (d: d3.PieArcDatum<ChartPieItem>) => {
+      const anchorFn = (d: PieArcDatum<ChartPieItem>) => {
         const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
         return midAngle < Math.PI ? 'start' : 'end';
       };
 
       const $polylines = $chartContainer
-        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartPieItem>>(
+        .selectAll<SVGPolylineElement, PieArcDatum<ChartPieItem>>(
           '.item-polyline',
         )
         .data(pieData, d => d.data.name)
@@ -214,7 +210,7 @@ export class ChartPie extends LitElement {
         .attr('class', 'item-polyline');
 
       const $labels = $chartContainer
-        .selectAll<SVGTextElement, d3.PieArcDatum<ChartPieItem>>('.item-label')
+        .selectAll<SVGTextElement, PieArcDatum<ChartPieItem>>('.item-label')
         .data(pieData, d => d.data.name)
         .join('text')
         .attr('class', 'item-label')
@@ -224,12 +220,12 @@ export class ChartPie extends LitElement {
         $polylines
           .transition()
           .duration(DURATION)
-          .ease(d3.easeCubicInOut)
+          .ease(easeCubicInOut)
           .attr('points', pointsFn);
         $labels
           .transition()
           .duration(DURATION)
-          .ease(d3.easeCubicInOut)
+          .ease(easeCubicInOut)
           .attr('transform', transformFn)
           .style('text-anchor', anchorFn);
       } else {

package/src/checkbox/checkbox.scss

@@ -51,12 +51,9 @@
     flex-shrink: 0;
   }
 
-  .state-layer {
-    position: absolute;
-    inset: 0;
+  .ripple {
     border-radius: 50%;
-    opacity: 0;
-    transition: opacity var(--duration-short2) var(--easing-standard);
+    --ripple-pressed-color: var(--color-on-surface);
   }
 
   .outline {
@@ -115,46 +112,32 @@
 
   // Hover state
   &:hover:not(.disabled):not(.readonly) {
-    .state-layer {
-      opacity: 0.08;
-      background: var(--color-on-surface);
+    &.state-checked .ripple,
+    &.state-indeterminate .ripple {
+      --ripple-pressed-color: var(--checkbox-selected-color);
     }
+  }
 
-    &.state-checked .state-layer,
-    &.state-indeterminate .state-layer {
-      background: var(--checkbox-selected-color);
-    }
+  .focus-ring {
+    --focus-ring-container-shape-start-start: 50%;
+    --focus-ring-container-shape-start-end: 50%;
+    --focus-ring-container-shape-end-start: 50%;
+    --focus-ring-container-shape-end-end: 50%;
   }
 
   // Focus state
   &.has-focus:not(.active):not(.disabled):not(.readonly) {
-    .state-layer {
-      opacity: 0.12;
-      background: var(--color-on-surface);
-    }
-
-    .container {
-      outline: 3px solid var(--color-primary);
-      outline-offset: 2px;
-      border-radius: 50%;
-    }
-
-    &.state-checked .state-layer,
-    &.state-indeterminate .state-layer {
-      background: var(--checkbox-selected-color);
+    &.state-checked .ripple,
+    &.state-indeterminate .ripple {
+      --ripple-pressed-color: var(--checkbox-selected-color);
     }
   }
 
   // Active/pressed state
   &.active:not(.disabled):not(.readonly) {
-    .state-layer {
-      opacity: 0.12;
-      background: var(--color-on-surface);
-    }
-
-    &.state-checked .state-layer,
-    &.state-indeterminate .state-layer {
-      background: var(--checkbox-selected-color);
+    &.state-checked .ripple,
+    &.state-indeterminate .ripple {
+      --ripple-pressed-color: var(--checkbox-selected-color);
     }
   }
 

package/src/checkbox/checkbox.ts

@@ -238,6 +238,7 @@ export class Checkbox extends LitElement {
     return html`
       <label class=${classMap(cssClasses)}>
         <div
+          id="container"
           class="container"
           tabindex=${this.tabindex || 0}
           @keyup=${this.handleKeyUp}
@@ -255,7 +256,8 @@ export class Checkbox extends LitElement {
               : 'false'}
           ${spread(this.configAria)}
         >
-          <div class="state-layer"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <wc-focus-ring class="focus-ring" for='container'></wc-focus-ring>
           <div class="outline"></div>
           <div class="background"></div>
           <svg class="icon" viewBox="0 0 12 12">

package/src/code-highlighter/code-highlighter.scss

@@ -58,6 +58,7 @@
         padding: var(--spacing-200);
         width: fit-content;
         background: transparent !important;
+        font-family: var(--font-family-monospace);
         --shiki-dark-bg: transparent !important;
 
         code {

package/src/code-highlighter/code-highlighter.ts

@@ -175,10 +175,10 @@ export class CodeHighlighter extends LitElement {
               variant="text"
               size="xs"
               aria-label=${locale.copyToClipboard}
-              name="content_copy"
               tooltip=${locale.copyToClipboard}
               @click=${this.__handleCopyClick}
             >
+              <wc-icon name="content_copy"></wc-icon>
             </wc-icon-button>
           </div>
         </div>

package/src/condition-builder/cb-compound-expression.scss

@@ -0,0 +1,37 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.compound-expression {
+  display: flex;
+  padding-top: var(--spacing-200);
+
+  .field-name-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--spacing-100);
+    padding-right: var(--spacing-200);
+
+    .field-label {
+      @include mixin.get-typography-not-important(label-medium);
+      color: var(--color-on-surface-variant);
+    }
+
+    .field-compound-type {
+      flex: 1;
+      padding-bottom: var(--spacing-250);
+    }
+  }
+
+  .conditions {
+    flex: 1;
+  }
+}
+
+.slot-end {
+  display: block;
+}

package/src/condition-builder/cb-compound-expression.ts

@@ -0,0 +1,80 @@
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './cb-compound-expression.scss';
+
+/**
+ * @label CB Compound Expression
+ * @tag wc-cb-compound-expression
+ * @rawTag cb-compound-expression
+ * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *   <wc-cb-expression>
+ *     <wc-input placeholder="Enter value"></wc-input>
+ *   </wc-cb-expression>
+ * </wc-cb-compound-expression>
+ * ```
+ */
+@IndividualComponent
+export class CbCompoundExpression extends LitElement {
+  static styles = [styles];
+
+  /** The logical operator joining conditions in this group ('and' or 'or'). */
+  @property({ type: String, attribute: 'condition-operator', reflect: true })
+  conditionOperator?: 'and' | 'or';
+
+  /** The field name for the compound expression. */
+  @property({ type: String, attribute: 'field-name' })
+  fieldName = '';
+
+  /** The display label for the field. */
+  @property({ type: String, attribute: 'field-label' })
+  fieldLabel = '';
+
+  override updated() {
+    this.__adjustSlotEndPadding();
+  }
+
+  private __adjustSlotEndPadding() {
+    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');
+    const fieldNameContainer =
+      this.renderRoot.querySelector<HTMLElement>('.field-name-container');
+    if (slotEnd && fieldNameContainer) {
+      slotEnd.style.paddingInlineStart =
+        fieldNameContainer.getBoundingClientRect().width + 'px';
+    }
+  }
+
+  private __renderOperatorDivider() {
+    if (!this.conditionOperator) return nothing;
+    return html`
+      <wc-cb-divider connect-end>
+        <wc-tag color="yellow" size="sm">${this.conditionOperator}</wc-tag>
+      </wc-cb-divider>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="compound-expression" field-name=${this.fieldName}>
+        <div class="field-name-container">
+          <span class="field-label">${this.fieldLabel}</span>
+          <div class="field-compound-type">
+            ${this.__renderOperatorDivider()}
+          </div>
+        </div>
+        <div class="conditions">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="slot-end">
+        <slot name="end"></slot>
+      </div>
+    `;
+  }
+}