@jsekulowicz/ds-components 0.1.0

package/dist/molecules/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/molecules/alert/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD;;;;;;GAMG;AACH,MAAM,OAAO,OAAQ,SAAQ,SAAS;IAAtC;;QAG+B,SAAI,GAAc,MAAM,CAAC;QAEV,gBAAW,GAAG,KAAK,CAAC;QACnC,sBAAiB,GAAG,KAAK,CAAC;QASvD,aAAQ,GAAG,GAAS,EAAE;YACpB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;YAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;IAwBJ,CAAC;aAzCiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,AAArC,CAAsC;IAOnD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAED,QAAQ,CAGN;IAEO,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QACzD,OAAO,IAAI,CAAA,wCAAwC,IAAI;;UAEjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO;;;;QAItF,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,mEAAmE,IAAI,CAAC,QAAQ;;;;;;;;;oBAS1E;YACZ,CAAC,CAAC,OAAO;WACN,CAAC;IACV,CAAC;;AAtC4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA0B;AAC1C;IAAX,QAAQ,EAAE;wCAAkB;AACe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAqB;AACnC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B"}

package/dist/molecules/alert/alert.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const alertStyles: import("lit").CSSResult;
+//# sourceMappingURL=alert.styles.d.ts.map

package/dist/molecules/alert/alert.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAiEvB,CAAC"}

package/dist/molecules/alert/alert.styles.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+export const alertStyles = css `
+  :host {
+    display: block;
+  }
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ds-space-3);
+    padding: var(--ds-space-4);
+    border-radius: var(--ds-radius-sm);
+    border-left: 3px solid var(--ds-color-accent);
+    background: var(--ds-color-bg-subtle);
+    color: var(--ds-color-fg);
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-sm);
+    line-height: 1.5;
+  }
+  :host([tone='info']) .alert {
+    border-left-color: var(--ds-color-accent);
+    background: var(--ds-color-accent-subtle);
+  }
+  :host([tone='success']) .alert {
+    border-left-color: var(--ds-color-success);
+    background: var(--ds-color-success-subtle);
+  }
+  :host([tone='warning']) .alert {
+    border-left-color: var(--ds-color-warning);
+    background: var(--ds-color-warning-subtle);
+  }
+  :host([tone='danger']) .alert {
+    border-left-color: var(--ds-color-danger);
+    background: var(--ds-color-danger-subtle);
+  }
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+  }
+  .title {
+    font-family: var(--ds-font-display);
+    font-weight: var(--ds-font-weight-semibold);
+    font-size: var(--ds-font-size-md);
+    letter-spacing: var(--ds-letter-spacing-display);
+  }
+  .close {
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: inherit;
+    padding: var(--ds-space-1);
+    margin: calc(var(--ds-space-1) * -1);
+    cursor: pointer;
+    border-radius: var(--ds-radius-xs);
+  }
+  .close:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow: var(--ds-shadow-focus);
+  }
+  .icon {
+    flex-shrink: 0;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-top: 0.1rem;
+  }
+`;
+//# sourceMappingURL=alert.styles.js.map

package/dist/molecules/alert/alert.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE7B,CAAC"}

package/dist/molecules/alert/define.d.ts

@@ -0,0 +1,7 @@
+import { DsAlert } from './alert.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-alert': DsAlert;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/molecules/alert/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/molecules/alert/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAMrC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/molecules/alert/define.js

@@ -0,0 +1,5 @@
+import { DsAlert } from './alert.js';
+if (!customElements.get('ds-alert')) {
+    customElements.define('ds-alert', DsAlert);
+}
+//# sourceMappingURL=define.js.map

package/dist/molecules/alert/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/molecules/alert/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;IACpC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7C,CAAC"}

package/dist/molecules/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { DsAlert, type AlertTone } from './alert.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/molecules/alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/molecules/alert/index.js

@@ -0,0 +1,2 @@
+export { DsAlert } from './alert.js';
+//# sourceMappingURL=index.js.map

package/dist/molecules/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,YAAY,CAAC"}

package/dist/molecules/bar-chart/bar-chart.d.ts

@@ -0,0 +1,35 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import type { BarChartRow, BarChartSeries } from './types.js';
+/**
+ * @tag ds-bar-chart
+ * @summary Responsive grouped or stacked bar chart with keyboard navigation and hover tooltips.
+ * @event ds-bar-focus - Emitted when the active group changes by keyboard or pointer. Detail: `{ groupIndex, domainValue, values }`.
+ * @csspart chart - The internal `<svg>` element.
+ * @csspart tooltip - The floating tooltip container.
+ * @csspart legend - The legend wrapper.
+ */
+export declare class DsBarChart<T extends BarChartRow = BarChartRow> extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    data: readonly T[];
+    domain: keyof T & string;
+    series: readonly BarChartSeries[];
+    stacked: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    title: string;
+    height: number;
+    showLegend: boolean;
+    formatValue?: (v: number) => string;
+    formatDomain?: (v: unknown) => string;
+    private _width;
+    private _activeIndex;
+    private _focusMode;
+    private _frame;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    private computeLayoutSnapshot;
+}
+//# sourceMappingURL=bar-chart.d.ts.map

package/dist/molecules/bar-chart/bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../src/molecules/bar-chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAmC,MAAM,KAAK,CAAC;AAEtF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAYjD,OAAO,KAAK,EAAiB,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAU7E;;;;;;;GAOG;AACH,qBAAa,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,SAAS;;IAC5E,OAAgB,MAAM,4BAAyC;IAE/B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IAC5C,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAA0B;IAC9B,MAAM,EAAE,SAAS,cAAc,EAAE,CAAM;IAC3B,OAAO,UAAS;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACxC,KAAK,SAAM;IACJ,MAAM,SAAO;IAC6B,UAAU,UAAQ;IACxD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IAE7D,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,UAAU,CAAuC;IAEjD,OAAO,CAAC,MAAM,CAAe;IAGrC,YAAY,IAAI,IAAI;IAiBpB,oBAAoB,IAAI,IAAI;IAmE5B,MAAM,IAAI,cAAc;IA2NjC,OAAO,CAAC,qBAAqB;CA8H9B"}

package/dist/molecules/bar-chart/bar-chart.js

@@ -0,0 +1,506 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { barChartStyles } from './bar-chart.styles.js';
+import { colorForIndex } from './colors.js';
+import { niceMax, generateTicks, groupData, computeGroupBands, computeGroupedBars, computeStackSegments, } from './layout.js';
+const MARGIN = { top: 16, right: 16, bottomBase: 36, leftBase: 44 };
+const BAND_OUTER_GAP = 0.18;
+const BAR_INNER_GAP = 2;
+const MIN_SEGMENT_HEIGHT = 1;
+const FALLBACK_WIDTH = 640;
+const TOOLTIP_MAX_WIDTH = 220;
+const TOOLTIP_EDGE_GAP = 8;
+/**
+ * @tag ds-bar-chart
+ * @summary Responsive grouped or stacked bar chart with keyboard navigation and hover tooltips.
+ * @event ds-bar-focus - Emitted when the active group changes by keyboard or pointer. Detail: `{ groupIndex, domainValue, values }`.
+ * @csspart chart - The internal `<svg>` element.
+ * @csspart tooltip - The floating tooltip container.
+ * @csspart legend - The legend wrapper.
+ */
+export class DsBarChart extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.domain = '';
+        this.series = [];
+        this.stacked = false;
+        this.title = '';
+        this.height = 320;
+        this.showLegend = true;
+        this._width = 0;
+        this._activeIndex = null;
+        this._focusMode = null;
+        this.#onKeydown = (event) => {
+            const count = this.data.length;
+            if (count === 0) {
+                return;
+            }
+            const current = this._activeIndex ?? -1;
+            let next;
+            switch (event.key) {
+                case 'ArrowRight':
+                    next = Math.min(count - 1, current + 1);
+                    break;
+                case 'ArrowLeft':
+                    next = Math.max(0, current < 0 ? 0 : current - 1);
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = count - 1;
+                    break;
+                case 'Escape':
+                    this._focusMode = null;
+                    this.#setActive(null);
+                    return;
+                default: return;
+            }
+            event.preventDefault();
+            this._focusMode = 'keyboard';
+            this.#setActive(next);
+        };
+        this.#onPointerMove = (event) => {
+            const layout = this.#computeLayout();
+            if (!layout.bands.length) {
+                return;
+            }
+            const rect = this._frame.getBoundingClientRect();
+            const localX = event.clientX - rect.left - layout.margin.left;
+            if (localX < 0 || localX > layout.innerWidth) {
+                this.#setActive(null);
+                return;
+            }
+            const index = Math.min(layout.bands.length - 1, Math.max(0, Math.floor(localX / Math.max(1, layout.bands[0].bandWidth))));
+            this._focusMode = 'pointer';
+            this.#setActive(index);
+        };
+        this.#onPointerLeave = () => {
+            if (this._focusMode === 'pointer') {
+                this._focusMode = null;
+            }
+            this.#setActive(null);
+        };
+        this.#onBlur = () => {
+            this._focusMode = null;
+            this.#setActive(null);
+        };
+    }
+    static { this.styles = [...DsElement.styles, barChartStyles]; }
+    #resizeObserver;
+    firstUpdated() {
+        this.#observeResize();
+        this.#remeasureNextFrame();
+    }
+    #remeasureNextFrame() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            return;
+        }
+        requestAnimationFrame(() => {
+            const measured = this._frame.clientWidth;
+            if (measured > 0 && measured !== this._width) {
+                this._width = measured;
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = undefined;
+    }
+    #observeResize() {
+        if (!this._frame || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.#resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                this._width = Math.max(0, entry.contentRect.width);
+            }
+        });
+        this.#resizeObserver.observe(this._frame);
+    }
+    #seriesLabel(s) {
+        return s.label ?? s.key;
+    }
+    #seriesColor(s, i) {
+        return s.color ?? colorForIndex(i);
+    }
+    #formatValue(v) {
+        return this.formatValue ? this.formatValue(v) : String(v);
+    }
+    #formatDomain(v) {
+        return this.formatDomain ? this.formatDomain(v) : String(v ?? '');
+    }
+    #computeLayout() {
+        const groups = groupData(this.data, this.domain, this.series.map(s => s.key));
+        const maxValue = groups.reduce((acc, g) => {
+            const v = this.stacked ? g.total : Math.max(...Object.values(g.values), 0);
+            return Math.max(acc, v);
+        }, 0);
+        const yMax = niceMax(maxValue);
+        const ticks = generateTicks(yMax);
+        const margin = {
+            top: MARGIN.top,
+            right: MARGIN.right,
+            bottom: MARGIN.bottomBase + (this.xAxisLabel ? 18 : 0),
+            left: MARGIN.leftBase + (this.yAxisLabel ? 18 : 0),
+        };
+        const width = this._width > 0 ? this._width : FALLBACK_WIDTH;
+        const innerWidth = Math.max(0, width - margin.left - margin.right);
+        const innerHeight = Math.max(0, this.height - margin.top - margin.bottom);
+        const bands = computeGroupBands(innerWidth, groups.length, BAND_OUTER_GAP);
+        return { groups, yMax, ticks, margin, width, innerWidth, innerHeight, bands };
+    }
+    #xTickEvery(bandWidth) {
+        if (bandWidth >= 24)
+            return 1;
+        if (bandWidth >= 12)
+            return 2;
+        if (bandWidth >= 6)
+            return 4;
+        return Math.max(1, Math.ceil(32 / Math.max(1, bandWidth)));
+    }
+    #xLabelRotation(bandWidth) {
+        return bandWidth < 48 ? -35 : 0;
+    }
+    render() {
+        const layout = this.#computeLayout();
+        const { groups, yMax, innerHeight, width, margin, bands, ticks } = layout;
+        if (groups.length === 0) {
+            return html `<div class="frame" style="height:${this.height}px" tabindex="0"></div>`;
+        }
+        return html `
+      <div
+        class="frame"
+        style="height:${this.height}px"
+        tabindex="0"
+        role="application"
+        aria-label=${this.#rootAriaLabel(groups.length)}
+        aria-describedby="${this.uid}-desc"
+        aria-activedescendant=${this._activeIndex == null ? nothing : `${this.uid}-group-${this._activeIndex}`}
+        @keydown=${this.#onKeydown}
+        @pointermove=${this.#onPointerMove}
+        @pointerleave=${this.#onPointerLeave}
+        @blur=${this.#onBlur}
+        part="chart"
+      >
+        <svg role="img" aria-hidden="true" viewBox="0 0 ${width} ${this.height}" width=${width} height=${this.height} preserveAspectRatio="none">
+          <g transform="translate(${margin.left}, ${margin.top})">
+            ${this.#renderGrid(ticks, innerHeight, layout.innerWidth, yMax)}
+            ${this.#renderYAxis(ticks, innerHeight, margin.left, yMax)}
+            ${this.#renderXAxis(groups, bands, innerHeight, margin)}
+            ${this.#renderBars(groups, bands, innerHeight, yMax)}
+            ${this.#renderFocusRing(bands, innerHeight, groups, yMax)}
+          </g>
+        </svg>
+        ${this.#renderTooltip(layout)}
+        ${this.#renderSrTable(groups)}
+        <div class="sr-only" id="${this.uid}-live" role="status" aria-live="polite">${this.#liveText(groups)}</div>
+      </div>
+      ${this.showLegend ? this.#renderLegend() : nothing}
+    `;
+    }
+    #rootAriaLabel(groupCount) {
+        const base = this.title || 'Bar chart';
+        const seriesLabels = this.series.map(s => this.#seriesLabel(s)).join(', ');
+        return `${base}: ${groupCount} ${this.stacked ? 'stacked ' : ''}groups, series: ${seriesLabels}. Use left and right arrow keys to move between groups.`;
+    }
+    #liveText(groups) {
+        if (this._activeIndex == null) {
+            return '';
+        }
+        const g = groups[this._activeIndex];
+        if (!g) {
+            return '';
+        }
+        const domain = this.#formatDomain(g.domain);
+        const parts = this.series.map((s) => {
+            return `${this.#seriesLabel(s)} ${this.#formatValue(g.values[s.key] ?? 0)}`;
+        });
+        const total = this.stacked ? `. Total ${this.#formatValue(g.total)}` : '';
+        return `${domain}: ${parts.join(', ')}${total}.`;
+    }
+    #renderGrid(ticks, innerHeight, innerWidth, yMax) {
+        return svg `
+      <g class="grid" aria-hidden="true">
+        ${ticks.map(tick => {
+            const y = innerHeight - (tick / yMax) * innerHeight;
+            return svg `<line x1="0" x2=${innerWidth} y1=${y} y2=${y}></line>`;
+        })}
+      </g>
+    `;
+    }
+    #renderYAxis(ticks, innerHeight, marginLeft, yMax) {
+        return svg `
+      <g class="axis axis-y" aria-hidden="true">
+        <line x1="0" x2="0" y1="0" y2=${innerHeight}></line>
+        ${ticks.map(tick => {
+            const y = innerHeight - (tick / yMax) * innerHeight;
+            return svg `
+            <g transform="translate(0, ${y})">
+              <line x1="-4" x2="0" y1="0" y2="0"></line>
+              <text x="-8" y="0" text-anchor="end" dominant-baseline="middle">${this.#formatValue(tick)}</text>
+            </g>
+          `;
+        })}
+        ${this.yAxisLabel
+            ? svg `<text class="axis-label" transform="translate(${-marginLeft + 12}, ${innerHeight / 2}) rotate(-90)" text-anchor="middle">${this.yAxisLabel}</text>`
+            : nothing}
+      </g>
+    `;
+    }
+    #renderXAxis(groups, bands, innerHeight, margin) {
+        const firstBand = bands[0];
+        const lastBand = bands[bands.length - 1];
+        const bandWidth = firstBand.bandWidth;
+        const every = this.#xTickEvery(bandWidth);
+        const rotation = this.#xLabelRotation(bandWidth);
+        return svg `
+      <g class="axis axis-x" aria-hidden="true" transform="translate(0, ${innerHeight})">
+        <line x1="0" x2=${lastBand.x + lastBand.bandWidth} y1="0" y2="0"></line>
+        ${groups.map((g, i) => {
+            if (i % every !== 0) {
+                return nothing;
+            }
+            const band = bands[i];
+            const cx = band.x + band.bandWidth / 2;
+            const text = this.#formatDomain(g.domain);
+            return svg `
+            <g transform="translate(${cx}, 0)">
+              <line x1="0" x2="0" y1="0" y2="4"></line>
+              <text y="18" text-anchor=${rotation ? 'end' : 'middle'} transform=${rotation ? `rotate(${rotation}) translate(-4, -6)` : ''}>${text}</text>
+            </g>
+          `;
+        })}
+        ${this.xAxisLabel
+            ? svg `<text class="axis-label" x=${lastBand.x / 2 + firstBand.bandWidth / 2} y=${margin.bottom - 8} text-anchor="middle">${this.xAxisLabel}</text>`
+            : nothing}
+      </g>
+    `;
+    }
+    #renderBars(groups, bands, innerHeight, yMax) {
+        return svg `${groups.map((g, gi) => {
+            const band = bands[gi];
+            const inactive = this._activeIndex != null && this._activeIndex !== gi ? 'inactive' : '';
+            const content = this.stacked
+                ? this.#renderStackedBars(g, band, innerHeight, yMax)
+                : this.#renderGroupedBars(g, band, innerHeight, yMax);
+            return svg `<g class="bar-group ${inactive}" id="${this.uid}-group-${gi}" data-index=${gi}>${content}</g>`;
+        })}`;
+    }
+    #renderStackedBars(g, band, innerHeight, yMax) {
+        const segments = computeStackSegments(g.values, this.series.map(s => s.key), innerHeight, yMax);
+        return svg `${segments.map((seg, si) => {
+            const s = this.series[si];
+            const height = seg.value > 0 ? Math.max(MIN_SEGMENT_HEIGHT, seg.height) : 0;
+            const y = innerHeight - (segments.slice(0, si + 1).reduce((a, v) => a + Math.max(v.value > 0 ? MIN_SEGMENT_HEIGHT : 0, v.height), 0));
+            return svg `<rect class="bar" x=${band.innerX} y=${y} width=${band.innerWidth} height=${height} fill=${this.#seriesColor(s, si)}></rect>`;
+        })}`;
+    }
+    #renderGroupedBars(g, band, innerHeight, yMax) {
+        const bars = computeGroupedBars(band.innerX, band.innerWidth, this.series.length, BAR_INNER_GAP);
+        return svg `${this.series.map((s, si) => {
+            const bar = bars[si];
+            const value = g.values[s.key] ?? 0;
+            const h = yMax > 0 ? (value / yMax) * innerHeight : 0;
+            const drawH = value > 0 ? Math.max(MIN_SEGMENT_HEIGHT, h) : 0;
+            const y = innerHeight - drawH;
+            return svg `<rect class="bar" x=${bar.x} y=${y} width=${bar.width} height=${drawH} fill=${this.#seriesColor(s, si)}></rect>`;
+        })}`;
+    }
+    #activeGroupMaxHeight(groups, innerHeight, yMax) {
+        if (this._activeIndex == null || yMax <= 0) {
+            return 0;
+        }
+        const g = groups[this._activeIndex];
+        if (!g) {
+            return 0;
+        }
+        const value = this.stacked ? g.total : Math.max(...Object.values(g.values), 0);
+        return (value / yMax) * innerHeight;
+    }
+    #renderFocusRing(bands, innerHeight, groups, yMax) {
+        if (this._activeIndex == null || this._focusMode !== 'keyboard') {
+            return nothing;
+        }
+        const band = bands[this._activeIndex];
+        if (!band) {
+            return nothing;
+        }
+        const maxHeight = this.#activeGroupMaxHeight(groups, innerHeight, yMax);
+        const drawHeight = Math.max(4, maxHeight);
+        const y = innerHeight - drawHeight - 2;
+        return svg `<rect class="focus-ring" x=${band.innerX - 2} y=${y} width=${band.innerWidth + 4} height=${drawHeight + 4} rx="4"></rect>`;
+    }
+    #renderTooltip(layout) {
+        const { bands, groups, margin, innerHeight, yMax } = layout;
+        const hidden = this._activeIndex == null;
+        const group = this._activeIndex != null ? groups[this._activeIndex] : undefined;
+        const band = this._activeIndex != null ? bands[this._activeIndex] : undefined;
+        const x = this.#tooltipLeft(band ? margin.left + band.innerX + band.innerWidth / 2 : 0, layout.width);
+        const maxHeight = this.#activeGroupMaxHeight(groups, innerHeight, yMax);
+        const barTopY = margin.top + (innerHeight - maxHeight);
+        const placeBelow = barTopY < 96;
+        const y = barTopY;
+        return html `
+      <div
+        class="tooltip"
+        part="tooltip"
+        role="tooltip"
+        data-position=${placeBelow ? 'below' : 'above'}
+        ?hidden=${hidden}
+        style="left:${x}px; top:${y}px"
+      >
+        ${group ? html `
+          <div class="tooltip-title">${this.#formatDomain(group.domain)}</div>
+          <ul class="tooltip-rows">
+            ${this.series.map((s, si) => html `
+              <li class="tooltip-row-label">
+                <span class="tooltip-swatch" style="background:${this.#seriesColor(s, si)}"></span>
+                ${this.#seriesLabel(s)}
+              </li>
+              <li class="tooltip-row-value">${this.#formatValue(group.values[s.key] ?? 0)}</li>
+            `)}
+            ${this.stacked ? html `
+              <li class="tooltip-row-label">Total</li>
+              <li class="tooltip-row-value">${this.#formatValue(group.total)}</li>
+            ` : nothing}
+          </ul>
+        ` : nothing}
+      </div>
+    `;
+    }
+    computeLayoutSnapshot() {
+        return this.#computeLayout();
+    }
+    #tooltipLeft(x, width) {
+        const tooltipWidth = Math.min(TOOLTIP_MAX_WIDTH, Math.max(0, width - TOOLTIP_EDGE_GAP * 2));
+        const half = tooltipWidth / 2;
+        if (half === 0) {
+            return x;
+        }
+        return Math.min(Math.max(x, half + TOOLTIP_EDGE_GAP), width - half - TOOLTIP_EDGE_GAP);
+    }
+    #renderLegend() {
+        return html `
+      <div class="legend" part="legend">
+        ${this.series.map((s, i) => html `
+          <span class="legend-item">
+            <span class="legend-swatch" style="background:${this.#seriesColor(s, i)}"></span>
+            ${this.#seriesLabel(s)}
+          </span>
+        `)}
+      </div>
+    `;
+    }
+    #renderSrTable(groups) {
+        return html `
+      <div class="sr-only" id="${this.uid}-desc">
+        <table>
+          <caption>${this.title || 'Bar chart data'}</caption>
+          <thead>
+            <tr>
+              <th scope="col">${this.xAxisLabel ?? String(this.domain)}</th>
+              ${this.series.map(s => html `<th scope="col">${this.#seriesLabel(s)}</th>`)}
+              ${this.stacked ? html `<th scope="col">Total</th>` : nothing}
+            </tr>
+          </thead>
+          <tbody>
+            ${groups.map(g => html `
+              <tr>
+                <th scope="row">${this.#formatDomain(g.domain)}</th>
+                ${this.series.map((s) => {
+            return html `<td>${this.#formatValue(g.values[s.key] ?? 0)}</td>`;
+        })}
+                ${this.stacked ? html `<td>${this.#formatValue(g.total)}</td>` : nothing}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+    }
+    #setActive(index) {
+        if (this._activeIndex === index) {
+            return;
+        }
+        this._activeIndex = index;
+        if (index == null) {
+            return;
+        }
+        const g = this.#computeLayout().groups[index];
+        if (!g) {
+            return;
+        }
+        this.emit('ds-bar-focus', {
+            detail: {
+                groupIndex: index,
+                domainValue: g.domain,
+                values: this.series.map((s) => ({
+                    key: s.key,
+                    label: this.#seriesLabel(s),
+                    value: g.values[s.key] ?? 0,
+                })),
+            },
+        });
+    }
+    #onKeydown;
+    #onPointerMove;
+    #onPointerLeave;
+    #onBlur;
+}
+__decorate([
+    property({ attribute: false })
+], DsBarChart.prototype, "data", void 0);
+__decorate([
+    property()
+], DsBarChart.prototype, "domain", void 0);
+__decorate([
+    property({ attribute: false })
+], DsBarChart.prototype, "series", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsBarChart.prototype, "stacked", void 0);
+__decorate([
+    property({ attribute: 'x-axis-label' })
+], DsBarChart.prototype, "xAxisLabel", void 0);
+__decorate([
+    property({ attribute: 'y-axis-label' })
+], DsBarChart.prototype, "yAxisLabel", void 0);
+__decorate([
+    property()
+], DsBarChart.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], DsBarChart.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-legend' })
+], DsBarChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ attribute: false })
+], DsBarChart.prototype, "formatValue", void 0);
+__decorate([
+    property({ attribute: false })
+], DsBarChart.prototype, "formatDomain", void 0);
+__decorate([
+    state()
+], DsBarChart.prototype, "_width", void 0);
+__decorate([
+    state()
+], DsBarChart.prototype, "_activeIndex", void 0);
+__decorate([
+    state()
+], DsBarChart.prototype, "_focusMode", void 0);
+__decorate([
+    query('.frame')
+], DsBarChart.prototype, "_frame", void 0);
+//# sourceMappingURL=bar-chart.js.map