@redvars/peacock 3.8.3 → 3.8.4

package/dist/chart-bar.js

@@ -3,7 +3,7 @@ import { n } from './property-B49QQ8pS.js';
 import { e } from './query-CHb9Ft_d.js';
 import { o } from './style-map-BQD5Et1D.js';
 import { o as ordinal, s as select } from './transform-DSwFSqzD.js';
-import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-CYoGNXnK.js';
+import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-CapLbc2e.js';
 import './base-Cl6v8-BZ.js';
 import './directive-ZPhl09Yt.js';
 

package/dist/chart-doughnut.js

@@ -8,6 +8,7 @@ import './array-D5vjT2Xm.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/chart-doughnut.js.map

@@ -1 +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 { select, arc, pie, scaleOrdinal, easeCubicInOut, interpolateNumber, PieArcDatum, BaseType } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\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?: 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 pieGenerator = pie<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pieGenerator(this.data);\n  }\n\n  private _getColorScale() {\n    return 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 = select(this.svgElement);\n\n    const doughnutArc = arc<PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = arc<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, 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(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 = interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = 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(easeCubicInOut)\n        .tween('text', function (this: BaseType) {\n          const sel = select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = 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: 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: 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: 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, 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, 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(easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(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","scaleOrdinal","easeCubicInOut","html","styles","query","property"],"mappings":"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"}
+{"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 { select, arc, pie, scaleOrdinal, easeCubicInOut, interpolateNumber, PieArcDatum, BaseType } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\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?: 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 pieGenerator = pie<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pieGenerator(this.data);\n  }\n\n  private _getColorScale() {\n    return 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 = select(this.svgElement);\n\n    const doughnutArc = arc<PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = arc<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, 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(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 = interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = 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(easeCubicInOut)\n        .tween('text', function (this: BaseType) {\n          const sel = select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = 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: 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: 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: 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, 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, 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(easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(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","scaleOrdinal","easeCubicInOut","html","styles","query","property"],"mappings":"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"}

package/dist/chart-pie.js

@@ -8,6 +8,7 @@ import './array-D5vjT2Xm.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/chart-pie.js.map

@@ -1 +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 { select, arc, pie, scaleOrdinal, PieArcDatum, easeCubicInOut, interpolateNumber } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\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?: 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 pieGenerator = pie<ChartPieItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pieGenerator(this.data);\n  }\n\n  private _getColorScale() {\n    return 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 = select(this.svgElement);\n\n    const pieArc = arc<PieArcDatum<ChartPieItem>>()\n      .innerRadius(0)\n      .outerRadius(radius);\n\n    const labelsArc = arc<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, 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(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 = interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = 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: 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: 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: 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, 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, 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(easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(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","scaleOrdinal","easeCubicInOut","html","styles","query","property"],"mappings":"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"}
+{"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 { select, arc, pie, scaleOrdinal, PieArcDatum, easeCubicInOut, interpolateNumber } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\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?: 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 pieGenerator = pie<ChartPieItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pieGenerator(this.data);\n  }\n\n  private _getColorScale() {\n    return 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 = select(this.svgElement);\n\n    const pieArc = arc<PieArcDatum<ChartPieItem>>()\n      .innerRadius(0)\n      .outerRadius(radius);\n\n    const labelsArc = arc<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, 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(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 = interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = 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: 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: 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: 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, 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, 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(easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(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","scaleOrdinal","easeCubicInOut","html","styles","query","property"],"mappings":"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"}

package/dist/chart-stacked-bar.js

@@ -3,7 +3,7 @@ import { n } from './property-B49QQ8pS.js';
 import { e } from './query-CHb9Ft_d.js';
 import { o } from './style-map-BQD5Et1D.js';
 import { o as ordinal, s as select } from './transform-DSwFSqzD.js';
-import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-CYoGNXnK.js';
+import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-CapLbc2e.js';
 import { c as constant, a as array } from './array-D5vjT2Xm.js';
 import './base-Cl6v8-BZ.js';
 import './directive-ZPhl09Yt.js';

package/dist/checkbox.js

@@ -9,6 +9,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import { html, LitElement, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { spread } from '@/__internal/directive/spread.js';\nimport styles from './checkbox.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Checkbox\n * @tag wc-checkbox\n * @rawTag checkbox\n * @summary Captures boolean input with an optional indeterminate mode.\n * @overview\n * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>\n * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>\n * @cssprop --checkbox-size: Size of the checkbox container.\n * @cssprop --checkbox-selected-color: Color of the checkbox when selected.\n * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.\n * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.\n * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.\n * @fires {CustomEvent} change - Dispatched when the checkbox value changes.\n * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.\n * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.\n * @tags input, form\n *\n * @example\n * ```html\n * <wc-checkbox label=\"Accept terms\"></wc-checkbox>\n * ```\n */\n@IndividualComponent\nexport class Checkbox extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The input field name.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The checkbox label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * The input field value (checked state).\n   */\n  @property({ type: Boolean, reflect: true })\n  value: boolean = false;\n\n  /**\n   * If true, displays the checkbox in an indeterminate state.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean = false;\n\n  /**\n   * If true, the checkbox has rounded corners. Defaults to `false`.\n   */\n  @property({ type: Boolean })\n  rounded: boolean = false;\n\n  /**\n   * The checkbox size.\n   * Possible values are: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the checkbox is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the checkbox. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the checkbox container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the checkbox (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content is present. */\n  @state()\n  private slotHasContent = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes();\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      this.tabindex = this.getAttribute('tabindex') || undefined;\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.clickHandler(evt);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    if (!this.disabled && !this.readonly) {\n      this.value = !this.value;\n      this.indeterminate = false;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: { value: this.value, originalEvent: ev },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n      this.containerElement?.focus();\n    }\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleKeyUp = (evt: KeyboardEvent) => {\n    if (evt.key === 'Enter') {\n      this.clickHandler(evt);\n    }\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      checkbox: true,\n      'state-checked': this.value,\n      'state-indeterminate': !this.value && this.indeterminate,\n      [`size-${this.size}`]: true,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      rounded: this.rounded,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          id=\"container\"\n          class=\"container\"\n          tabindex=${this.tabindex || 0}\n          @keyup=${this.handleKeyUp}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          role=\"checkbox\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.value\n            ? 'true'\n            : this.indeterminate\n              ? 'mixed'\n              : 'false'}\n          ${spread(this.configAria)}\n        >\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <wc-focus-ring class=\"focus-ring\" for=\"container\"></wc-focus-ring>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <svg class=\"icon\" viewBox=\"0 0 12 12\">\n            ${this.value\n              ? svg`\n                  <path\n                    class=\"checkmark\"\n                    d=\"M2 6L5 9L10 2\"\n                  />\n                `\n              : this.indeterminate\n                ? svg`<rect\n                    class=\"indeterminate\"\n                    x=\"2\"\n                    y=\"5\"\n                    width=\"8\"\n                    height=\"2\"\n                  />`\n                : ''}\n          </svg>\n        </div>\n\n        <input\n          type=\"checkbox\"\n          class=\"input-native\"\n          name=${this.name}\n          .checked=${this.value}\n          .indeterminate=${this.indeterminate}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @click=${this.clickHandler}\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","svg","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import { html, LitElement, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { spread } from '@/__internal/directive/spread.js';\nimport styles from './checkbox.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Checkbox\n * @tag wc-checkbox\n * @rawTag checkbox\n * @summary Captures boolean input with an optional indeterminate mode.\n * @overview\n * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>\n * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>\n * @cssprop --checkbox-size: Size of the checkbox container.\n * @cssprop --checkbox-selected-color: Color of the checkbox when selected.\n * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.\n * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.\n * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.\n * @fires {CustomEvent} change - Dispatched when the checkbox value changes.\n * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.\n * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.\n * @tags input, form\n *\n * @example\n * ```html\n * <wc-checkbox label=\"Accept terms\"></wc-checkbox>\n * ```\n */\n@IndividualComponent\nexport class Checkbox extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The input field name.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The checkbox label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * The input field value (checked state).\n   */\n  @property({ type: Boolean, reflect: true })\n  value: boolean = false;\n\n  /**\n   * If true, displays the checkbox in an indeterminate state.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean = false;\n\n  /**\n   * If true, the checkbox has rounded corners. Defaults to `false`.\n   */\n  @property({ type: Boolean })\n  rounded: boolean = false;\n\n  /**\n   * The checkbox size.\n   * Possible values are: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the checkbox is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the checkbox. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the checkbox container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the checkbox (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content is present. */\n  @state()\n  private slotHasContent = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes();\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      this.tabindex = this.getAttribute('tabindex') || undefined;\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.clickHandler(evt);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    if (!this.disabled && !this.readonly) {\n      this.value = !this.value;\n      this.indeterminate = false;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: { value: this.value, originalEvent: ev },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n      this.containerElement?.focus();\n    }\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleKeyUp = (evt: KeyboardEvent) => {\n    if (evt.key === 'Enter') {\n      this.clickHandler(evt);\n    }\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      checkbox: true,\n      'state-checked': this.value,\n      'state-indeterminate': !this.value && this.indeterminate,\n      [`size-${this.size}`]: true,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      rounded: this.rounded,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          id=\"container\"\n          class=\"container\"\n          tabindex=${this.tabindex || 0}\n          @keyup=${this.handleKeyUp}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          role=\"checkbox\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.value\n            ? 'true'\n            : this.indeterminate\n              ? 'mixed'\n              : 'false'}\n          ${spread(this.configAria)}\n        >\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <wc-focus-ring class=\"focus-ring\" for=\"container\"></wc-focus-ring>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <svg class=\"icon\" viewBox=\"0 0 12 12\">\n            ${this.value\n              ? svg`\n                  <path\n                    class=\"checkmark\"\n                    d=\"M2 6L5 9L10 2\"\n                  />\n                `\n              : this.indeterminate\n                ? svg`<rect\n                    class=\"indeterminate\"\n                    x=\"2\"\n                    y=\"5\"\n                    width=\"8\"\n                    height=\"2\"\n                  />`\n                : ''}\n          </svg>\n        </div>\n\n        <input\n          type=\"checkbox\"\n          class=\"input-native\"\n          name=${this.name}\n          .checked=${this.value}\n          .indeterminate=${this.indeterminate}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @click=${this.clickHandler}\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","svg","styles","property","state","query"],"mappings":"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"}

package/dist/chip.js

@@ -17,6 +17,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../src/chip/chip/chip.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport styles from './chip.scss';\nimport sizeStyles from './chip-sizes.scss';\nimport { spread } from '@/__internal/directive/spread.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinBaseButton } from '@/button/base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\n/**\n * @label Chip\n * @tag wc-chip\n * @rawTag chip\n * @summary Chip component for displaying compact information with optional actions.\n * @tags display\n *\n * @example\n * ```html\n * <wc-chip>Chip content</wc-chip>\n * ```\n */\n@IndividualComponent\nexport class Chip extends mixinBaseButton(\n  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),\n) {\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  // Define styles (Lit handles Scoping via Shadow DOM by default)\n  // You would typically import your tag.scss.js here or use the css tag\n  static styles = [styles, sizeStyles];\n\n  /** If true, the tag will have a close icon. */\n  @property({ type: Boolean }) dismissible = false;\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /** True when the `icon` slot contains at least one node. */\n  @state() private _hasIconSlotContent = false;\n\n  /** When true, renders the chip in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the chip is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  __renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this._hasIconSlotContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  private _dismissClickHandler(e: MouseEvent) {\n    e.stopPropagation();\n\n    // Custom Event: tag--dismiss\n    this.dispatchEvent(\n      new CustomEvent('tag--dismiss', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderCloseButton() {\n    if (!this.dismissible) return nothing;\n\n    return html`\n      <button\n        class=\"close-btn\"\n        @click=${this._dismissClickHandler}\n        aria-label=\"Dismiss\"\n      >\n        <wc-icon class=\"close-btn-icon\" name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  render() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n\n      ${this.renderChipElement()} ${this.__renderTooltip()}\n    `;\n  }\n\n  renderChipElement() {\n    const cssClasses = {\n      chip: true,\n      button: true,\n      selected: this.selected,\n      dismissible: this.dismissible,\n      'icon-slot-has-content': this._hasIconSlotContent,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderChipContent()}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      href=${this.href}\n      target=${this.target}\n      tabindex=${this.disabled ? '-1' : '0'}\n      role=\"button\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n      ${spread(this.configAria)}\n    >\n      ${this.renderChipContent()}\n    </a>`;\n  }\n\n  renderChipContent() {\n    return html`\n      <div class=\"tag-content\">\n        <div class=\"icon-slot-container\">\n          ${this.selected\n            ? html`<wc-icon class=\"selected-icon\" name=\"check\"></wc-icon>`\n            : html`<slot name=\"icon\"></slot>`}\n        </div>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        ${this._renderCloseButton()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","sizeStyles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"chip.js","sources":["../../src/chip/chip/chip.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport styles from './chip.scss';\nimport sizeStyles from './chip-sizes.scss';\nimport { spread } from '@/__internal/directive/spread.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinBaseButton } from '@/button/base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\n/**\n * @label Chip\n * @tag wc-chip\n * @rawTag chip\n * @summary Chip component for displaying compact information with optional actions.\n * @tags display\n *\n * @example\n * ```html\n * <wc-chip>Chip content</wc-chip>\n * ```\n */\n@IndividualComponent\nexport class Chip extends mixinBaseButton(\n  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),\n) {\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  // Define styles (Lit handles Scoping via Shadow DOM by default)\n  // You would typically import your tag.scss.js here or use the css tag\n  static styles = [styles, sizeStyles];\n\n  /** If true, the tag will have a close icon. */\n  @property({ type: Boolean }) dismissible = false;\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /** True when the `icon` slot contains at least one node. */\n  @state() private _hasIconSlotContent = false;\n\n  /** When true, renders the chip in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the chip is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  __renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this._hasIconSlotContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  private _dismissClickHandler(e: MouseEvent) {\n    e.stopPropagation();\n\n    // Custom Event: tag--dismiss\n    this.dispatchEvent(\n      new CustomEvent('tag--dismiss', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderCloseButton() {\n    if (!this.dismissible) return nothing;\n\n    return html`\n      <button\n        class=\"close-btn\"\n        @click=${this._dismissClickHandler}\n        aria-label=\"Dismiss\"\n      >\n        <wc-icon class=\"close-btn-icon\" name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  render() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n\n      ${this.renderChipElement()} ${this.__renderTooltip()}\n    `;\n  }\n\n  renderChipElement() {\n    const cssClasses = {\n      chip: true,\n      button: true,\n      selected: this.selected,\n      dismissible: this.dismissible,\n      'icon-slot-has-content': this._hasIconSlotContent,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderChipContent()}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      href=${this.href}\n      target=${this.target}\n      tabindex=${this.disabled ? '-1' : '0'}\n      role=\"button\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n      ${spread(this.configAria)}\n    >\n      ${this.renderChipContent()}\n    </a>`;\n  }\n\n  renderChipContent() {\n    return html`\n      <div class=\"tag-content\">\n        <div class=\"icon-slot-container\">\n          ${this.selected\n            ? html`<wc-icon class=\"selected-icon\" name=\"check\"></wc-icon>`\n            : html`<slot name=\"icon\"></slot>`}\n        </div>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        ${this._renderCloseButton()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","sizeStyles","property","state","query"],"mappings":"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"}

package/dist/clock.js

@@ -25,6 +25,7 @@ class ClockController {
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

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 IndividualComponent from '@/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;;;;"}
+{"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 '@/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

@@ -37322,6 +37322,7 @@ Object.assign(globalThis, {
 var css_248z = i`@charset "UTF-8";
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {