@redvars/peacock 3.2.10 → 3.3.0

package/dist/chart-doughnut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-doughnut.js","sources":["../../src/chart-doughnut/chart-doughnut.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-donut.scss';\n\nexport type ChartDoughnutColor = {\n  color: string;\n};\n\nexport type ChartDoughnutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDoughnutColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push({\n    color: `var(--color-${colorName})`,\n  });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n  _prevDatum?: d3.PieArcDatum<ChartDoughnutItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Doughnut\n * @tag wc-chart-doughnut\n * @rawTag chart-doughnut\n * @summary A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n * <script>\n *   document.querySelector('wc-chart-doughnut').data = [\n *     { name: 'A', value: 30, label: 'Category A' },\n *     { name: 'B', value: 50, label: 'Category B' },\n *     { name: 'C', value: 20, label: 'Category C' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartDoughnut extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width (and height) of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Margin around the chart. */\n  @property({ type: Number, reflect: true }) margin: number = 10;\n\n  /** Whether to show labels outside the chart. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n  showLabels: boolean = true;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartDoughnutItem[] = [];\n\n  /** Label displayed in the center of the doughnut. */\n  @property({ type: String }) label?: string;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 300);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getRadius(): number {\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getTotal(): number {\n    return this.data.reduce((total, d) => total + d.value, 0);\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartDoughnutColor>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const DURATION = 500;\n    const radius = this._getRadius();\n    const pieData = this._getPieData();\n    const colorScale = this._getColorScale();\n    const total = this._getTotal();\n\n    const svg = d3.select(this.svgElement);\n\n    const doughnutArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius + 10)\n      .outerRadius(radius + 10);\n\n    // Update SVG dimensions and center transform\n    svg.attr('width', this.width).attr('height', this.width);\n    svg\n      .select('.chart-container')\n      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n    // Arc paths — keyed by name so D3 matches elements across updates\n    const $paths = svg\n      .select('.arc-container')\n      .selectAll<SVGPathElement, d3.PieArcDatum<ChartDoughnutItem>>('.arc')\n      .data(pieData, d => d.data.name)\n      .join('path')\n      .attr('class', 'arc')\n      .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n    if (animate) {\n      $paths\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .attrTween('d', function (this: SVGPathElement, d) {\n          const self = this as ArcPathElement;\n          // Interpolate from the last rendered angles to the new ones.\n          // New (entering) arcs start collapsed at their startAngle.\n          const prev: { startAngle: number; endAngle: number } =\n            self._prevDatum ?? {\n              startAngle: d.startAngle,\n              endAngle: d.startAngle,\n            };\n          self._prevDatum = d;\n          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);\n          return (t: number) =>\n            doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??\n            '';\n        });\n    } else {\n      // Initial render: draw immediately and seed previous-datum for later tweens\n      $paths\n        .each(function (this: SVGPathElement, d) {\n          (this as ArcPathElement)._prevDatum = d;\n        })\n        .attr('d', d => doughnutArc(d) ?? '');\n    }\n\n    // Animate the central total counter\n    const $title = svg.select('.title');\n    if (animate) {\n      $title\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .tween('text', function (this: d3.BaseType) {\n          const sel = d3.select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = d3.interpolateNumber(start, total);\n          return function (t: number) {\n            sel.text(Math.round(interp(t)));\n          };\n        });\n    } else {\n      $title.text(total);\n    }\n\n    // Label polylines and text\n    const $chartContainer = svg.select('.chart-container');\n\n    if (this.showLabels) {\n      const pointsFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const posA = doughnutArc.centroid(d);\n        const posB = labelsArc.centroid(d);\n        const posC = posB.slice() as [number, number];\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return [posA, posB, posC].map(p => p.join(',')).join(' ');\n      };\n\n      const transformFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const pos = labelsArc.centroid(d);\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return `translate(${pos})`;\n      };\n\n      const anchorFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        return midAngle < Math.PI ? 'start' : 'end';\n      };\n\n      const $polylines = $chartContainer\n        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDoughnutItem>>(\n          '.item-polyline',\n        )\n        .data(pieData, d => d.data.name)\n        .join('polyline')\n        .attr('class', 'item-polyline');\n\n      const $labels = $chartContainer\n        .selectAll<SVGTextElement, d3.PieArcDatum<ChartDoughnutItem>>('.item-label')\n        .data(pieData, d => d.data.name)\n        .join('text')\n        .attr('class', 'item-label')\n        .text(d => d.data.label ?? '');\n\n      if (animate) {\n        $polylines\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('transform', transformFn)\n          .style('text-anchor', anchorFn);\n      } else {\n        $polylines.attr('points', pointsFn);\n        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n      }\n    } else {\n      $chartContainer.selectAll('.item-polyline').remove();\n      $chartContainer.selectAll('.item-label').remove();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"chart\">\n        <svg>\n          <g class=\"chart-container\">\n            <g class=\"arc-container\"></g>\n            <text class=\"title\" text-anchor=\"middle\"></text>\n            <text class=\"label\" text-anchor=\"middle\" y=\"16\">\n              ${this.label}\n            </text>\n          </g>\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","pie","d3\n            .pie","d3\n            .scaleOrdinal","d3.select","d3\n            .arc","d3.easeCubicInOut","d3.interpolateNumber","html","styles","query","property"],"mappings":"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"}

package/dist/chart-pie.js

@@ -0,0 +1,259 @@
+import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
+import { e } from './query-QBcUV-L_.js';
+import { p as pie, o as ordinal, s as select, a as arc, c as cubicInOut, i as interpolateNumber } from './transform-DRuHEvar.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+}
+
+.arc {
+  cursor: pointer;
+  transition: filter 150ms ease;
+}
+.arc:hover {
+  filter: brightness(1.2);
+}
+
+.item-polyline {
+  fill: none;
+  stroke-width: 1;
+  stroke: var(--color-on-surface);
+}
+
+.item-label {
+  fill: var(--color-on-surface);
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+}`;
+
+const chartColors = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+    chartColors.push({
+        color: `var(--color-${colorName})`,
+    });
+});
+function debounce(fn, wait) {
+    let timer;
+    return ((...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    });
+}
+/**
+ * @label Chart Pie
+ * @tag wc-chart-pie
+ * @rawTag chart-pie
+ * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-pie width="400"></wc-chart-pie>
+ * <script>
+ *   document.querySelector('wc-chart-pie').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+let ChartPie = class ChartPie extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Width (and height) of the chart in pixels. */
+        this.width = 0;
+        /** Margin around the chart. */
+        this.margin = 10;
+        /** Whether to show labels outside the chart. */
+        this.showLabels = true;
+        /** Chart data array. Each item should have name, value, and optional label and color. */
+        this.data = [];
+        this._initialized = false;
+        this._debouncedRenderChart = debounce(() => {
+            this._renderChart(true);
+        }, 300);
+    }
+    firstUpdated() {
+        this._renderChart(false);
+    }
+    updated(changedProperties) {
+        if (!this._initialized) {
+            this._initialized = true;
+            return;
+        }
+        const watchedProps = ['width', 'margin', 'showLabels', 'data'];
+        const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+        if (hasChanged) {
+            this._debouncedRenderChart();
+        }
+    }
+    _getRadius() {
+        // Reserve 100px on each side for labels and padding
+        return this.width / 2 - this.margin - 100;
+    }
+    _getPieData() {
+        const pie$1 = pie()
+            .sort(null)
+            .value(d => d.value);
+        return pie$1(this.data);
+    }
+    _getColorScale() {
+        return ordinal()
+            .domain(this.data.map(d => d.name))
+            .range(chartColors);
+    }
+    _renderChart(animate) {
+        if (!this.svgElement)
+            return;
+        const DURATION = 500;
+        const radius = this._getRadius();
+        const pieData = this._getPieData();
+        const colorScale = this._getColorScale();
+        const svg = select(this.svgElement);
+        const pieArc = arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+        const labelsArc = arc()
+            .innerRadius(radius + 10)
+            .outerRadius(radius + 10);
+        // Update SVG dimensions and center transform
+        svg.attr('width', this.width).attr('height', this.width);
+        svg
+            .select('.chart-container')
+            .attr('transform', `translate(${this.width / 2},${this.width / 2})`);
+        // Arc paths — keyed by name so D3 matches elements across updates
+        const $paths = svg
+            .select('.arc-container')
+            .selectAll('.arc')
+            .data(pieData, d => d.data.name)
+            .join('path')
+            .attr('class', 'arc')
+            .style('fill', d => d.data.color || colorScale(d.data.name).color);
+        if (animate) {
+            $paths
+                .transition()
+                .duration(DURATION)
+                .ease(cubicInOut)
+                .attrTween('d', function (d) {
+                const self = this;
+                // Interpolate from the last rendered angles to the new ones.
+                // New (entering) arcs start collapsed at their startAngle.
+                const prev = self._prevDatum ?? {
+                    startAngle: d.startAngle,
+                    endAngle: d.startAngle,
+                };
+                self._prevDatum = d;
+                const iStart = interpolateNumber(prev.startAngle, d.startAngle);
+                const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
+                return (t) => pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';
+            });
+        }
+        else {
+            // Initial render: draw immediately and seed previous-datum for later tweens
+            $paths
+                .each(function (d) {
+                this._prevDatum = d;
+            })
+                .attr('d', d => pieArc(d) ?? '');
+        }
+        // Label polylines and text
+        const $chartContainer = svg.select('.chart-container');
+        if (this.showLabels) {
+            const pointsFn = (d) => {
+                const posA = pieArc.centroid(d);
+                const posB = labelsArc.centroid(d);
+                const posC = posB.slice();
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
+                return [posA, posB, posC].map(p => p.join(',')).join(' ');
+            };
+            const transformFn = (d) => {
+                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) => {
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                return midAngle < Math.PI ? 'start' : 'end';
+            };
+            const $polylines = $chartContainer
+                .selectAll('.item-polyline')
+                .data(pieData, d => d.data.name)
+                .join('polyline')
+                .attr('class', 'item-polyline');
+            const $labels = $chartContainer
+                .selectAll('.item-label')
+                .data(pieData, d => d.data.name)
+                .join('text')
+                .attr('class', 'item-label')
+                .text(d => d.data.label ?? '');
+            if (animate) {
+                $polylines
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('points', pointsFn);
+                $labels
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('transform', transformFn)
+                    .style('text-anchor', anchorFn);
+            }
+            else {
+                $polylines.attr('points', pointsFn);
+                $labels.attr('transform', transformFn).style('text-anchor', anchorFn);
+            }
+        }
+        else {
+            $chartContainer.selectAll('.item-polyline').remove();
+            $chartContainer.selectAll('.item-label').remove();
+        }
+    }
+    render() {
+        return b `
+      <div class="chart">
+        <svg>
+          <g class="chart-container">
+            <g class="arc-container"></g>
+          </g>
+        </svg>
+      </div>
+    `;
+    }
+};
+ChartPie.styles = [css_248z];
+__decorate([
+    e('svg')
+], ChartPie.prototype, "svgElement", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartPie.prototype, "width", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartPie.prototype, "margin", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'show-labels' })
+], ChartPie.prototype, "showLabels", void 0);
+__decorate([
+    n({ type: Array })
+], ChartPie.prototype, "data", void 0);
+ChartPie = __decorate([
+    IndividualComponent
+], ChartPie);
+
+export { ChartPie };
+//# sourceMappingURL=chart-pie.js.map

package/dist/chart-pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie.js","sources":["../../src/chart-pie/chart-pie.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-pie.scss';\n\nexport type ChartPieColor = {\n  color: string;\n};\n\nexport type ChartPieItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartPieColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push({\n    color: `var(--color-${colorName})`,\n  });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n  _prevDatum?: d3.PieArcDatum<ChartPieItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Pie\n * @tag wc-chart-pie\n * @rawTag chart-pie\n * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-pie width=\"400\"></wc-chart-pie>\n * <script>\n *   document.querySelector('wc-chart-pie').data = [\n *     { name: 'A', value: 30, label: 'Category A' },\n *     { name: 'B', value: 50, label: 'Category B' },\n *     { name: 'C', value: 20, label: 'Category C' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartPie extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width (and height) of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Margin around the chart. */\n  @property({ type: Number, reflect: true }) margin: number = 10;\n\n  /** Whether to show labels outside the chart. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n  showLabels: boolean = true;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartPieItem[] = [];\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 300);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getRadius(): number {\n    // Reserve 100px on each side for labels and padding\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartPieItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartPieColor>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const DURATION = 500;\n    const radius = this._getRadius();\n    const pieData = this._getPieData();\n    const colorScale = this._getColorScale();\n\n    const svg = d3.select(this.svgElement);\n\n    const pieArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\n      .innerRadius(0)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\n      .innerRadius(radius + 10)\n      .outerRadius(radius + 10);\n\n    // Update SVG dimensions and center transform\n    svg.attr('width', this.width).attr('height', this.width);\n    svg\n      .select('.chart-container')\n      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n    // Arc paths — keyed by name so D3 matches elements across updates\n    const $paths = svg\n      .select('.arc-container')\n      .selectAll<SVGPathElement, d3.PieArcDatum<ChartPieItem>>('.arc')\n      .data(pieData, d => d.data.name)\n      .join('path')\n      .attr('class', 'arc')\n      .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n    if (animate) {\n      $paths\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .attrTween('d', function (this: SVGPathElement, d) {\n          const self = this as ArcPathElement;\n          // Interpolate from the last rendered angles to the new ones.\n          // New (entering) arcs start collapsed at their startAngle.\n          const prev: { startAngle: number; endAngle: number } =\n            self._prevDatum ?? {\n              startAngle: d.startAngle,\n              endAngle: d.startAngle,\n            };\n          self._prevDatum = d;\n          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);\n          return (t: number) =>\n            pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';\n        });\n    } else {\n      // Initial render: draw immediately and seed previous-datum for later tweens\n      $paths\n        .each(function (this: SVGPathElement, d) {\n          (this as ArcPathElement)._prevDatum = d;\n        })\n        .attr('d', d => pieArc(d) ?? '');\n    }\n\n    // Label polylines and text\n    const $chartContainer = svg.select('.chart-container');\n\n    if (this.showLabels) {\n      const pointsFn = (d: d3.PieArcDatum<ChartPieItem>) => {\n        const posA = pieArc.centroid(d);\n        const posB = labelsArc.centroid(d);\n        const posC = posB.slice() as [number, number];\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return [posA, posB, posC].map(p => p.join(',')).join(' ');\n      };\n\n      const transformFn = (d: d3.PieArcDatum<ChartPieItem>) => {\n        const pos = labelsArc.centroid(d);\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return `translate(${pos})`;\n      };\n\n      const anchorFn = (d: d3.PieArcDatum<ChartPieItem>) => {\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        return midAngle < Math.PI ? 'start' : 'end';\n      };\n\n      const $polylines = $chartContainer\n        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartPieItem>>(\n          '.item-polyline',\n        )\n        .data(pieData, d => d.data.name)\n        .join('polyline')\n        .attr('class', 'item-polyline');\n\n      const $labels = $chartContainer\n        .selectAll<SVGTextElement, d3.PieArcDatum<ChartPieItem>>('.item-label')\n        .data(pieData, d => d.data.name)\n        .join('text')\n        .attr('class', 'item-label')\n        .text(d => d.data.label ?? '');\n\n      if (animate) {\n        $polylines\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('transform', transformFn)\n          .style('text-anchor', anchorFn);\n      } else {\n        $polylines.attr('points', pointsFn);\n        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n      }\n    } else {\n      $chartContainer.selectAll('.item-polyline').remove();\n      $chartContainer.selectAll('.item-label').remove();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"chart\">\n        <svg>\n          <g class=\"chart-container\">\n            <g class=\"arc-container\"></g>\n          </g>\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","pie","d3\n            .pie","d3\n            .scaleOrdinal","d3.select","d3\n            .arc","d3.easeCubicInOut","d3.interpolateNumber","html","styles","query","property"],"mappings":"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"}

package/dist/{class-map-BvQRv7eW.js → class-map-DpeNtqCn.js}

@@ -1,4 +1,4 @@
-import { E } from './PeacockComponent-CxJc63xj.js';
+import { E } from './IndividualComponent-tDnXrOLV.js';
 import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
 
 /**
@@ -8,4 +8,4 @@ import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
  */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
 export { e };
-//# sourceMappingURL=class-map-BvQRv7eW.js.map
+//# sourceMappingURL=class-map-DpeNtqCn.js.map

package/dist/{class-map-BvQRv7eW.js.map → class-map-DpeNtqCn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"class-map-BvQRv7eW.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"class-map-DpeNtqCn.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/clock.js

@@ -1,4 +1,4 @@
-import { i, _ as __decorate, n, P as PeacockComponent, a as i$1, b } from './PeacockComponent-CxJc63xj.js';
+import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
 
 class ClockController {
     constructor(host, timeout = 1000) {
@@ -44,19 +44,18 @@ var css_248z = i`* {
 
 /**
  * @label Clock
- * @tag base-clock
+ * @tag wc-clock
  * @rawTag clock
- *
  * @summary Displays the current time in a given timezone.
  * @overview
  *  - Clocks are used to display the current time in a specified timezone.
  *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ * @tags display
  *
  * @example
  * ```html
- * <base-clock></base-clock>
+ * <wc-clock></wc-clock>
  * ```
- * @tags display
  */
 let Clock = class Clock extends i$1 {
     constructor() {
@@ -78,7 +77,7 @@ __decorate([
     n()
 ], Clock.prototype, "timezone", void 0);
 Clock = __decorate([
-    PeacockComponent
+    IndividualComponent
 ], Clock);
 
 export { Clock };

package/dist/clock.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport PeacockComponent from 'src/PeacockComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag base-clock\n * @rawTag clock\n *\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n *\n * @example\n * ```html\n * <base-clock></base-clock>\n * ```\n * @tags display\n */\n@PeacockComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}
+{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag wc-clock\n * @rawTag clock\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n * @tags display\n *\n * @example\n * ```html\n * <wc-clock></wc-clock>\n * ```\n */\n@IndividualComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;AAcG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}

package/dist/code-editor.js

@@ -1,8 +1,9 @@
-import { i, _ as __decorate, n, P as PeacockComponent, A, b } from './PeacockComponent-CxJc63xj.js';
-import { r } from './state-B09bP3XH.js';
-import { e, a as isDarkMode, r as redispatchEvent } from './dispatch-event-utils-vbdiOSeC.js';
-import { e as e$1 } from './class-map-BvQRv7eW.js';
-import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-NneLARW8.js';
+import { i, _ as __decorate, n, I as IndividualComponent, A, b } from './IndividualComponent-tDnXrOLV.js';
+import { r } from './state-8v48Exzh.js';
+import { e } from './query-QBcUV-L_.js';
+import { e as e$1 } from './class-map-DpeNtqCn.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-BISF-Gl5.js';
+import { a as isDarkMode, r as redispatchEvent } from './dispatch-event-utils-B4odODQf.js';
 import './directive-Cuw6h7YA.js';
 
 // src/util.ts
@@ -43650,8 +43651,7 @@ var css_248z = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
-  --code-editor-border: 1px solid var(--color-outline);
-  --code-editor-border-radius: var(--shape-corner-small);
+  --code-editor-height: 300px;
 }
 
 .code-editor-loader {
@@ -43670,11 +43670,10 @@ var css_248z = i`@charset "UTF-8";
   display: block;
   height: 100%;
   position: relative;
-  --field-height: 300px;
-  min-height: 5rem;
+  --field-height: var(--code-editor-height);
 }
 .code-editor-component .editor {
-  height: var(--field-height);
+  height: var(--code-editor-height);
 }
 .code-editor-component .monaco-editor {
   --vscode-editor-background: transparent;
@@ -43688,6 +43687,18 @@ var css_248z = i`@charset "UTF-8";
   top: var(--spacing-200);
 }`;
 
+/**
+ * @label Code Editor
+ * @tag wc-code-editor
+ * @rawTag code-editor
+ * @summary A code editor component using Monaco Editor.
+ * @tags input
+ *
+ * @example
+ * ```html
+ * <wc-code-editor language="javascript"></wc-code-editor>
+ * ```
+ */
 // At module level, outside the class
 // @ts-ignore
 // At module level, outside the class
@@ -43709,20 +43720,22 @@ self.MonacoEnvironment = {
  * @tag code-editor
  * @rawTag code-editor
  *
- * @summary Code editor
+ * @summary A Monaco-based code editing component with syntax highlighting and theming.
  * @overview
- *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
- *  - It supports various programming languages and can display line numbers for better readability.
+ *  - CodeEditor wraps Monaco Editor as a web component.
+ *  - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.
+ *  - Emits `change` when content is edited and updates value from property changes.
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
- *   function helloWorld() {
- *     console.log('Hello, world!');
- *   }</code></pre>
- * </code-highlighter>
+ * <code-editor
+ *   language="javascript"
+ *   value="function hello() { console.log('Hello'); }"
+ *   lineNumbers="on"
+ *   minimap="false">
+ * </code-editor>
  * ```
- * @tags display
+ * @tags input, editor
  */
 let CodeEditor = class CodeEditor extends BaseInput {
     constructor() {
@@ -43812,7 +43825,7 @@ let CodeEditor = class CodeEditor extends BaseInput {
     async setBlur() { this.editorMonacoInstance?.trigger('keyboard', 'type', ''); /* Focus hack or use blur if available */ }
     render() {
         return b `
-    <base-field
+    <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -43825,15 +43838,15 @@ let CodeEditor = class CodeEditor extends BaseInput {
         })}"
       >
         ${(this.disabled || this.readonly)
-            ? b `<base-tag class="read-only-tag" color="red">Read Only</base-tag>`
+            ? b `<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
             : A}
         <div class="editor"></div>
         ${!this.editorMonacoInstance ? b `
           <div class="code-editor-loader">
-            <base-spinner></base-spinner> Loading...
+            <wc-spinner></wc-spinner> Loading...
           </div>
         ` : A}
-      </base-field>
+      </wc-field>
     `;
     }
 };
@@ -43869,7 +43882,7 @@ __decorate([
     e('.editor')
 ], CodeEditor.prototype, "editorElement", void 0);
 CodeEditor = __decorate([
-    PeacockComponent
+    IndividualComponent
 ], CodeEditor);
 var CodeEditor_default = CodeEditor;