@redvars/peacock 3.3.1 → 3.3.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.2/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.2/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/card/card.scss

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+  --card-background: var(--color-surface, #ffffff);
+  --card-border-color: transparent;
+  --card-shadow: none;
+  --card-shape: var(--global-shape-corner-large, 1rem);
+  --card-padding: 1rem;
+  --card-gap: 0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  background: var(--card-background);
+  border-radius: var(--card-shape);
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--card-shadow);
+  color: var(--color-on-surface, inherit);
+  padding: var(--card-padding);
+  transition: box-shadow 150ms ease, transform 150ms ease;
+}
+
+:host([variant='elevated']) {
+  --card-background: var(--color-surface-container-low, #fdfcfe);
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([variant='filled']) {
+  --card-background: var(--color-surface-container-highest, #f5f5f5);
+  --card-shadow: none;
+}
+
+:host([variant='outlined']) {
+  --card-border-color: var(--color-outline, rgba(0, 0, 0, 0.12));
+  --card-shadow: none;
+}
+
+:host([elevation='0']) {
+  --card-shadow: none;
+}
+
+:host([elevation='1']) {
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation='2']) {
+  --card-shadow: var(--shadow-md, 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation='3']) {
+  --card-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation='4']) {
+  --card-shadow: var(--shadow-xl, 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation='5']) {
+  --card-shadow: var(--shadow-xxl, 0px 24px 48px -12px rgba(16, 24, 40, 0.18));
+}

package/src/card/card.ts

@@ -0,0 +1,38 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import IndividualComponent from '../IndividualComponent.js';
+import styles from './card.scss';
+
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
+/**
+ * @label Card
+ * @tag wc-card
+ * @rawTag card
+ * @summary A Material 3 inspired card surface for grouping related content.
+ * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.
+ * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.
+ * @cssprop --card-gap - Gap between slotted children.
+ *
+ * @example
+ * ```html
+ * <wc-card variant="outlined">
+ *   <h3>Title</h3>
+ *   <p>Supportive text</p>
+ * </wc-card>
+ * ```
+ */
+@IndividualComponent
+export class Card extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true })
+  variant: CardVariant = 'elevated';
+
+  @property({ type: Number, reflect: true })
+  elevation: CardElevation = 1;
+
+  render() {
+    return html`<div class="card"><slot></slot></div>`;
+  }
+}

package/src/card/index.ts

@@ -0,0 +1 @@
+export { Card } from './card.js';

package/src/chart-bar/chart-bar.scss

@@ -0,0 +1,58 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  color: var(--color-on-surface);
+}
+
+.chart-frame {
+  background: var(--color-surface-container-low);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--shape-corner-medium);
+  padding: var(--spacing-300);
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}
+
+.axis-label {
+  @include mixin.get-typography('label-medium');
+  fill: var(--color-on-surface-variant);
+}
+
+.value-label {
+  @include mixin.get-typography('label-small');
+  fill: var(--color-on-surface);
+}
+
+.gridline {
+  stroke: var(--color-outline-variant);
+  opacity: 0.6;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-200);
+  margin-top: var(--spacing-200);
+  color: var(--color-on-surface);
+  @include mixin.get-typography('label-medium');
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-150);
+
+    .swatch {
+      width: 12px;
+      height: 12px;
+      border-radius: var(--shape-corner-full);
+      border: 1px solid var(--color-outline-variant);
+    }
+  }
+}

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

@@ -0,0 +1,306 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import IndividualComponent from 'src/IndividualComponent.js';
+import * as d3 from 'd3';
+import styles from './chart-bar.scss';
+
+export type ChartBarItem = {
+  name: string;
+  value: number;
+  label?: string;
+  color?: string;
+};
+
+const chartColors: string[] = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+  chartColors.push(`var(--color-${colorName})`);
+});
+
+const DEFAULT_WIDTH = 480;
+const DEFAULT_HEIGHT = 320;
+const BAR_RADIUS = 10;
+const DURATION = 450;
+
+function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
+  let timer: ReturnType<typeof setTimeout>;
+  return ((...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), wait);
+  }) as T;
+}
+
+/**
+ * @label Chart Bar
+ * @tag wc-chart-bar
+ * @rawTag chart-bar
+ * @summary A vertical bar chart that follows Material Design 3 color and spacing tokens.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-bar width="520" height="320"></wc-chart-bar>
+ * <script>
+ *   document.querySelector('wc-chart-bar').data = [
+ *     { name: 'apples', label: 'Apples', value: 20 },
+ *     { name: 'bananas', label: 'Bananas', value: 35 },
+ *     { name: 'cherries', label: 'Cherries', value: 15 },
+ *   ];
+ * </script>
+ * ```
+ */
+@IndividualComponent
+export class ChartBar extends LitElement {
+  static styles = [styles];
+
+  @query('svg')
+  private svgElement?: SVGElement;
+
+  /** Width of the chart in pixels. */
+  @property({ type: Number, reflect: true }) width: number = 0;
+
+  /** Height of the chart in pixels. */
+  @property({ type: Number, reflect: true }) height: number = DEFAULT_HEIGHT;
+
+  /** Margin around the chart drawing area. */
+  @property({ type: Number }) margin: number = 24;
+
+  /** Chart data array. Each item should have name, value, and optional label and color. */
+  @property({ type: Array }) data: ChartBarItem[] = [];
+
+  /** Whether to render value labels above bars. */
+  @property({ type: Boolean, attribute: 'show-values' }) showValues: boolean = true;
+
+  private _initialized = false;
+
+  private _debouncedRenderChart = debounce(() => {
+    this._renderChart(true);
+  }, 200);
+
+  firstUpdated() {
+    this._renderChart(false);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (!this._initialized) {
+      this._initialized = true;
+      return;
+    }
+    const watchedProps = ['width', 'height', 'margin', 'data', 'showValues'];
+    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+    if (hasChanged) {
+      this._debouncedRenderChart();
+    }
+  }
+
+  private _getPaletteScale() {
+    return d3
+      .scaleOrdinal<string, string>()
+      .domain(this.data.map(d => d.name))
+      .range(chartColors);
+  }
+
+  private _resolveColor(
+    name: string,
+    override: string | undefined,
+    scale: d3.ScaleOrdinal<string, string>,
+  ) {
+    return override || scale(name);
+  }
+
+  private _renderChart(animate: boolean) {
+    if (!this.svgElement) return;
+
+    const width = this.width > 0 ? this.width : DEFAULT_WIDTH;
+    const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;
+    const margin = Math.max(this.margin, 12);
+    const data = this.data ?? [];
+
+    const svg = d3.select(this.svgElement);
+    svg.attr('width', width).attr('height', height);
+
+    const innerWidth = Math.max(width - margin * 2, 0);
+    const innerHeight = Math.max(height - margin * 2, 0);
+    const colorScale = this._getPaletteScale();
+
+    const container = svg.select<SVGGElement>('.chart-container');
+    container.attr('transform', `translate(${margin},${margin})`);
+
+    if (!data.length || innerWidth === 0 || innerHeight === 0) {
+      container.select('.bars').selectAll('*').remove();
+      container.select('.x-axis').selectAll('*').remove();
+      container.select('.y-grid').selectAll('*').remove();
+      container.select('.value-labels').selectAll('*').remove();
+      return;
+    }
+
+    const xScale = d3
+      .scaleBand<string>()
+      .domain(data.map(d => d.name))
+      .range([0, innerWidth])
+      .padding(0.28);
+
+    const maxValue = d3.max(data, d => d.value) ?? 0;
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, maxValue || 1])
+      .nice()
+      .range([innerHeight, 0]);
+
+    const yGrid = container.select<SVGGElement>('.y-grid');
+    yGrid
+      .call(
+        d3
+          .axisLeft(yScale)
+          .ticks(5)
+          .tickSize(-innerWidth)
+          .tickFormat(() => ''),
+      )
+      .selectAll('.tick text')
+      .remove();
+    yGrid.select('.domain').remove();
+    yGrid.selectAll('.tick line').attr('class', 'gridline');
+
+    const xAxis = container.select<SVGGElement>('.x-axis');
+    xAxis
+      .attr('transform', `translate(0,${innerHeight})`)
+      .call(
+        d3
+          .axisBottom(xScale)
+          .tickSizeOuter(0)
+          .tickFormat(name => {
+            const entry = data.find(d => d.name === name);
+            return entry?.label ?? name;
+          }),
+      );
+    xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');
+    xAxis.selectAll('.tick line').remove();
+    xAxis
+      .selectAll('.tick text')
+      .attr('class', 'axis-label')
+      .attr('dy', '1.1em');
+
+    const bars = container
+      .select('.bars')
+      .selectAll<SVGRectElement, ChartBarItem>('rect')
+      .data(data, d => d.name)
+      .join(
+        enter =>
+          enter
+            .append('rect')
+            .attr('class', 'bar')
+            .attr('x', d => xScale(d.name) ?? 0)
+            .attr('width', xScale.bandwidth())
+            .attr('y', innerHeight)
+            .attr('height', 0)
+            .attr('rx', BAR_RADIUS)
+            .attr('ry', BAR_RADIUS)
+            .style('fill', d =>
+              this._resolveColor(d.name, d.color, colorScale),
+            ),
+        update => update,
+        exit =>
+          exit
+            .transition()
+            .duration(DURATION)
+            .attr('height', 0)
+            .attr('y', innerHeight)
+            .remove(),
+      );
+
+    bars
+      .attr('x', d => xScale(d.name) ?? 0)
+      .attr('width', xScale.bandwidth())
+      .attr('rx', BAR_RADIUS)
+      .attr('ry', BAR_RADIUS)
+      .style('fill', d => this._resolveColor(d.name, d.color, colorScale));
+
+    if (animate) {
+      bars
+        .transition()
+        .duration(DURATION)
+        .attr('y', d => yScale(d.value))
+        .attr('height', d => innerHeight - yScale(d.value));
+    } else {
+      bars
+        .attr('y', d => yScale(d.value))
+        .attr('height', d => innerHeight - yScale(d.value));
+    }
+
+    const valueLabels = container
+      .select('.value-labels')
+      .selectAll<SVGTextElement, ChartBarItem>('text')
+      .data(this.showValues ? data : [], d => d.name)
+      .join(
+        enter =>
+          enter
+            .append('text')
+            .attr('class', 'value-label')
+            .attr('text-anchor', 'middle')
+            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+            .attr('y', innerHeight - 6)
+            .text(d => d.value.toLocaleString()),
+        update => update,
+        exit => exit.remove(),
+      );
+
+    const resolveLabelY = (value: number) => {
+      const offset = yScale(value) - 8;
+      return Math.min(offset, innerHeight - 8);
+    };
+
+    if (animate) {
+      valueLabels
+        .transition()
+        .duration(DURATION)
+        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+        .attr('y', d => resolveLabelY(d.value))
+        .text(d => d.value.toLocaleString());
+    } else {
+      valueLabels
+        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+        .attr('y', d => resolveLabelY(d.value))
+        .text(d => d.value.toLocaleString());
+    }
+  }
+
+  render() {
+    const paletteScale = this._getPaletteScale();
+    const legendItems = this.data.map(item => ({
+      name: item.label ?? item.name,
+      color: this._resolveColor(item.name, item.color, paletteScale),
+    }));
+
+    return html`
+      <div class="chart-frame">
+        <svg role="img" aria-label="Bar chart">
+          <g class="chart-container">
+            <g class="y-grid"></g>
+            <g class="bars"></g>
+            <g class="x-axis"></g>
+            <g class="value-labels"></g>
+          </g>
+        </svg>
+        ${legendItems.length
+          ? html`<div class="legend" role="list">
+              ${legendItems.map(
+                item => html`<span class="legend-item" role="listitem">
+                  <span
+                    class="swatch"
+                    style=${styleMap({ background: item.color })}
+                  ></span>
+                  <span>${item.name}</span>
+                </span>`,
+              )}
+            </div>`
+          : null}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wc-chart-bar': ChartBar;
+  }
+}