@redvars/peacock 3.4.0 → 3.5.1

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

@@ -1,8 +1,8 @@
 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 { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, ScaleOrdinal } from 'd3';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './chart-bar.scss';
 
 export type ChartBarItem = {
@@ -94,8 +94,7 @@ export class ChartBar extends LitElement {
   }
 
   private _getPaletteScale() {
-    return d3
-      .scaleOrdinal<string, string>()
+    return scaleOrdinal<string, string>()
       .domain(this.data.map(d => d.name))
       .range(chartColors);
   }
@@ -103,7 +102,7 @@ export class ChartBar extends LitElement {
   private _resolveColor(
     name: string,
     override: string | undefined,
-    scale: d3.ScaleOrdinal<string, string>,
+    scale: ScaleOrdinal<string, string>,
   ) {
     return override || scale(name);
   }
@@ -116,7 +115,7 @@ export class ChartBar extends LitElement {
     const margin = Math.max(this.margin, 12);
     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);
@@ -134,15 +133,13 @@ export class ChartBar extends LitElement {
       return;
     }
 
-    const xScale = d3
-      .scaleBand<string>()
+    const xScale = 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()
+    const maxValue = max(data, d => d.value) ?? 0;
+    const yScale = scaleLinear()
       .domain([0, maxValue || 1])
       .nice()
       .range([innerHeight, 0]);
@@ -150,8 +147,7 @@ export class ChartBar extends LitElement {
     const yGrid = container.select<SVGGElement>('.y-grid');
     yGrid
       .call(
-        d3
-          .axisLeft(yScale)
+        axisLeft(yScale)
           .ticks(5)
           .tickSize(-innerWidth)
           .tickFormat(() => ''),
@@ -165,8 +161,7 @@ export class ChartBar 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);

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

@@ -1,8 +1,10 @@
 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 { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, stack, Series, SeriesPoint, ScaleOrdinal } from 'd3';
+
+import IndividualComponent from '@/IndividualComponent.js';
+
 import styles from './chart-bar.scss';
 
 export type ChartStackedSegment = {
@@ -133,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 => {
@@ -174,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);
@@ -196,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,
@@ -218,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(() => ''),
@@ -233,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);
@@ -250,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)
@@ -266,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 IndividualComponent from 'src/IndividualComponent.js';
-import * as d3 from 'd3';
+import { select, arc, pie, scaleOrdinal, easeCubicInOut, interpolateNumber, PieArcDatum, BaseType } from 'd3';
+import IndividualComponent from '@/IndividualComponent.js';
 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 IndividualComponent from 'src/IndividualComponent.js';
-import * as d3 from 'd3';
+import { select, arc, pie, scaleOrdinal, PieArcDatum, easeCubicInOut, interpolateNumber } from 'd3';
+import IndividualComponent from '@/IndividualComponent.js';
 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

@@ -1,7 +1,7 @@
 import { html, LitElement, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../spread.js';
+import { spread } from '@/__directive/spread.js';
 import styles from './checkbox.scss';
 
 /**
@@ -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/clock/clock.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import { ClockController } from './ClockController.js';
 
 import styles from './clock.scss';

package/src/code-editor/code-editor.ts

@@ -2,13 +2,13 @@ import { html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import {init} from 'modern-monaco';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import BaseInput from '../input/BaseInput.js';
-import { observeThemeChange } from '../utils/observe-theme-change.js';
-import { redispatchEvent } from '../utils/dispatch-event-utils.js';
+import { observeThemeChange } from '../__utils/observe-theme-change.js';
+import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
 import {
   isDarkMode,
-} from '../utils.js';
+} from '@/__utils/is-dark-mode.js';
 
 import styles from './code-editor.scss';
 

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

@@ -12,8 +12,8 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
 
 import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
 
-import IndividualComponent from 'src/IndividualComponent.js';
-import { copyToClipboard } from '../utils/copy-to-clipboard.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import { copyToClipboard } from '@/__utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
 const locale = {
@@ -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/date-picker/date-picker.ts

@@ -1,9 +1,12 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from '../input/BaseInput.js';
 import styles from './date-picker.scss';
-import { spread } from '../spread.js';
+
 
 /**
  * @label Date Picker
@@ -165,7 +168,6 @@ export class DatePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -174,6 +176,7 @@ export class DatePicker extends BaseInput {
             });
           }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;