@aquera/nile-elements 2.0.2 → 2.0.3

package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.d.ts

@@ -0,0 +1,135 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import '../nile-lite-tooltip/index';
+/** A single slice of the distribution rendered by `nile-segmented-progress-bar`. */
+export interface NileProgressSegment {
+    /** Legend label, also used in the default tooltip text. */
+    label: string;
+    /** Raw magnitude of this segment. */
+    value: number;
+    /** Any CSS color; falls back to the palette rotation when omitted. */
+    color?: string;
+    /** Overrides the default tooltip content for this segment. */
+    tooltip?: string;
+}
+/** Placement values forwarded to `nile-lite-tooltip`. */
+export type NileSegmentTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'auto' | 'auto-start' | 'auto-end';
+/**
+ * Nile segmented progress bar component.
+ *
+ * @tag nile-segmented-progress-bar
+ *
+ * @summary A config-driven, responsive multi-segment progress / distribution bar
+ * with an optional wrapping legend — a single rounded track split into colored
+ * proportional segments (for example Success / Failure / Errors / Running / Other).
+ * @status experimental
+ *
+ * @event nile-segment-click - Emitted when a segment or its legend entry is activated by click,
+ * `Enter` or `Space`. The `detail` contains `{ segment, index, percentage }`.
+ *
+ * @csspart container - The component's base wrapper.
+ * @csspart label - The optional heading above the bar.
+ * @csspart bar - The bar/track element (also exposed as `track`).
+ * @csspart track - The bar/track element (also exposed as `bar`).
+ * @csspart segment - An individual colored segment inside the track.
+ * @csspart legend - The wrapping legend row.
+ * @csspart legend-item - A single legend entry (swatch + label + value).
+ * @csspart legend-swatch - The small rounded square in the segment color.
+ * @csspart legend-label - The legend entry's label text.
+ * @csspart legend-value - The legend entry's bold value.
+ *
+ * @example
+ * <nile-segmented-progress-bar
+ *   label="Run outcomes"
+ *   .segments=${[
+ *     { label: 'Success', value: 45623 },
+ *     { label: 'Failure', value: 50342 },
+ *     { label: 'Errors', value: 682 },
+ *     { label: 'Running', value: 166 },
+ *     { label: 'Other', value: 1552 },
+ *   ]}
+ * ></nile-segmented-progress-bar>
+ */
+export declare class NileSegmentedProgressBar extends NileElement {
+    static styles: CSSResultGroup;
+    /** The segments to distribute across the bar. This is the component's config. */
+    segments: NileProgressSegment[];
+    /** Optional heading rendered above the bar. Nothing renders when empty. */
+    label: string;
+    /** Renders the legend below the bar. */
+    showLegend: boolean;
+    /** Wraps every segment in a `nile-lite-tooltip`. */
+    showTooltip: boolean;
+    /** Renders the bold value alongside each legend label. */
+    showValues: boolean;
+    /** The thickness of the bar. */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Optional denominator. When omitted the denominator is the sum of the segment
+     * values, so the segments always fill 100%. When larger than the sum, the
+     * remainder renders as an unfilled track.
+     */
+    total?: number;
+    /** Rounds the bar's outer ends. */
+    rounded: boolean;
+    /**
+     * Minimum rendered width, in pixels, of a non-zero segment. Guarantees sub-1%
+     * segments stay a discernible sliver. The largest segment absorbs whatever
+     * overflow this introduces, so the row still totals exactly 100%.
+     */
+    minSegmentWidth: number;
+    /** Passed straight through to `nile-lite-tooltip`'s `placement`. */
+    tooltipPlacement: NileSegmentTooltipPlacement;
+    /** Coerces a configured value into a usable, non-negative, finite number. */
+    private sanitizeValue;
+    /** The sanitized magnitude of every configured segment, in config order. */
+    private get values();
+    /** The sum of every sanitized segment value. */
+    private get sum();
+    /** The denominator the percentages are computed against. */
+    private get denominator();
+    /** Each segment's share of the denominator, in config order. */
+    private get percentages();
+    /**
+     * The index of the widest rendered segment. That segment is the one allowed to
+     * shrink, so it absorbs the overflow introduced by `minSegmentWidth` on the
+     * tiny ones and the row still adds up to exactly 100% of the track.
+     */
+    private get largestIndex();
+    /** Formats a percentage to one decimal, trimming a trailing `.0`. */
+    private formatPercentage;
+    /** The default tooltip / aria text for a segment. */
+    private describeSegment;
+    /** The tooltip content for a segment, honouring a per-segment override. */
+    private tooltipFor;
+    /**
+     * A single sentence describing the whole distribution, used as the track's
+     * accessible name so screen readers get the breakdown without tabbing it.
+     */
+    private get accessibleSummary();
+    updated(changedProperties: PropertyValues): void;
+    /** Logs invalid config the way `nile-progress-bar` reports out-of-range values. */
+    private validateConfig;
+    private activate;
+    /**
+     * `Enter` and `Space` activate a segment or legend entry. The affordances are
+     * `role="button"` elements rather than native buttons, so activation is wired
+     * up explicitly and a key press never double-fires alongside a synthetic click.
+     */
+    private handleKeyDown;
+    private renderSegment;
+    private renderLegendItem;
+    render(): TemplateResult;
+}
+export default NileSegmentedProgressBar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-segmented-progress-bar': NileSegmentedProgressBar;
+    }
+}

package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js

@@ -0,0 +1,373 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { styles } from './nile-segmented-progress-bar.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import '../nile-lite-tooltip/index';
+/** The number of palette classes declared in the stylesheet. */
+const PALETTE_LENGTH = 10;
+/**
+ * Nile segmented progress bar component.
+ *
+ * @tag nile-segmented-progress-bar
+ *
+ * @summary A config-driven, responsive multi-segment progress / distribution bar
+ * with an optional wrapping legend — a single rounded track split into colored
+ * proportional segments (for example Success / Failure / Errors / Running / Other).
+ * @status experimental
+ *
+ * @event nile-segment-click - Emitted when a segment or its legend entry is activated by click,
+ * `Enter` or `Space`. The `detail` contains `{ segment, index, percentage }`.
+ *
+ * @csspart container - The component's base wrapper.
+ * @csspart label - The optional heading above the bar.
+ * @csspart bar - The bar/track element (also exposed as `track`).
+ * @csspart track - The bar/track element (also exposed as `bar`).
+ * @csspart segment - An individual colored segment inside the track.
+ * @csspart legend - The wrapping legend row.
+ * @csspart legend-item - A single legend entry (swatch + label + value).
+ * @csspart legend-swatch - The small rounded square in the segment color.
+ * @csspart legend-label - The legend entry's label text.
+ * @csspart legend-value - The legend entry's bold value.
+ *
+ * @example
+ * <nile-segmented-progress-bar
+ *   label="Run outcomes"
+ *   .segments=${[
+ *     { label: 'Success', value: 45623 },
+ *     { label: 'Failure', value: 50342 },
+ *     { label: 'Errors', value: 682 },
+ *     { label: 'Running', value: 166 },
+ *     { label: 'Other', value: 1552 },
+ *   ]}
+ * ></nile-segmented-progress-bar>
+ */
+let NileSegmentedProgressBar = class NileSegmentedProgressBar extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The segments to distribute across the bar. This is the component's config. */
+        this.segments = [];
+        /** Optional heading rendered above the bar. Nothing renders when empty. */
+        this.label = '';
+        /** Renders the legend below the bar. */
+        this.showLegend = true;
+        /** Wraps every segment in a `nile-lite-tooltip`. */
+        this.showTooltip = true;
+        /** Renders the bold value alongside each legend label. */
+        this.showValues = true;
+        /** The thickness of the bar. */
+        this.size = 'medium';
+        /** Rounds the bar's outer ends. */
+        this.rounded = true;
+        /**
+         * Minimum rendered width, in pixels, of a non-zero segment. Guarantees sub-1%
+         * segments stay a discernible sliver. The largest segment absorbs whatever
+         * overflow this introduces, so the row still totals exactly 100%.
+         */
+        this.minSegmentWidth = 2;
+        /** Passed straight through to `nile-lite-tooltip`'s `placement`. */
+        this.tooltipPlacement = 'top';
+        /* #endregion */
+    }
+    /* #region Math */
+    /** Coerces a configured value into a usable, non-negative, finite number. */
+    sanitizeValue(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric) || numeric < 0)
+            return 0;
+        return numeric;
+    }
+    /** The sanitized magnitude of every configured segment, in config order. */
+    get values() {
+        const list = Array.isArray(this.segments) ? this.segments : [];
+        return list.map(segment => this.sanitizeValue(segment?.value));
+    }
+    /** The sum of every sanitized segment value. */
+    get sum() {
+        return this.values.reduce((runningTotal, value) => runningTotal + value, 0);
+    }
+    /** The denominator the percentages are computed against. */
+    get denominator() {
+        const sum = this.sum;
+        const total = Number(this.total);
+        if (Number.isFinite(total) && total > sum)
+            return total;
+        return sum;
+    }
+    /** Each segment's share of the denominator, in config order. */
+    get percentages() {
+        const denominator = this.denominator;
+        if (denominator <= 0)
+            return this.values.map(() => 0);
+        return this.values.map(value => (value / denominator) * 100);
+    }
+    /**
+     * The index of the widest rendered segment. That segment is the one allowed to
+     * shrink, so it absorbs the overflow introduced by `minSegmentWidth` on the
+     * tiny ones and the row still adds up to exactly 100% of the track.
+     */
+    get largestIndex() {
+        const values = this.values;
+        let largest = -1;
+        let largestValue = 0;
+        values.forEach((value, index) => {
+            if (value > largestValue) {
+                largestValue = value;
+                largest = index;
+            }
+        });
+        return largest;
+    }
+    /** Formats a percentage to one decimal, trimming a trailing `.0`. */
+    formatPercentage(percentage) {
+        if (!Number.isFinite(percentage))
+            return '0';
+        const rounded = Math.round(percentage * 10) / 10;
+        return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+    }
+    /* #endregion */
+    /* #region Text */
+    /** The default tooltip / aria text for a segment. */
+    describeSegment(index) {
+        const segment = this.segments?.[index];
+        const value = this.values[index] ?? 0;
+        const percentage = this.formatPercentage(this.percentages[index] ?? 0);
+        return `${segment?.label ?? ''}: ${value} (${percentage}%)`;
+    }
+    /** The tooltip content for a segment, honouring a per-segment override. */
+    tooltipFor(index) {
+        const override = this.segments?.[index]?.tooltip;
+        return override && override.length > 0
+            ? override
+            : this.describeSegment(index);
+    }
+    /**
+     * A single sentence describing the whole distribution, used as the track's
+     * accessible name so screen readers get the breakdown without tabbing it.
+     */
+    get accessibleSummary() {
+        const list = Array.isArray(this.segments) ? this.segments : [];
+        const parts = list.map((_, index) => this.describeSegment(index));
+        const body = parts.length > 0 ? parts.join(', ') : 'No data';
+        return this.label ? `${this.label}: ${body}` : body;
+    }
+    /* #endregion */
+    /* #region Validation */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('segments') || changedProperties.has('total')) {
+            this.validateConfig();
+        }
+    }
+    /** Logs invalid config the way `nile-progress-bar` reports out-of-range values. */
+    validateConfig() {
+        const list = Array.isArray(this.segments) ? this.segments : [];
+        list.forEach((segment, index) => {
+            const numeric = Number(segment?.value);
+            if (!Number.isFinite(numeric)) {
+                console.error(`[NileSegmentedProgressBar]: Invalid value (${String(segment?.value)}) detected at segment index ${index}. Value must be a finite number. Falling back to 0.`);
+                return;
+            }
+            if (numeric < 0) {
+                console.error(`[NileSegmentedProgressBar]: Invalid value (${numeric}) detected at segment index ${index}. Value must be greater than or equal to 0. Falling back to 0.`);
+            }
+        });
+        const total = Number(this.total);
+        if (this.total !== undefined && this.total !== null) {
+            if (!Number.isFinite(total) || total < 0) {
+                console.error(`[NileSegmentedProgressBar]: Invalid total (${String(this.total)}) detected. Total must be a finite number greater than or equal to 0. Falling back to the sum of the segment values.`);
+            }
+            else if (total < this.sum) {
+                console.error(`[NileSegmentedProgressBar]: Invalid total (${total}) detected. Total must be greater than or equal to the sum of the segment values (${this.sum}). Falling back to the sum.`);
+            }
+        }
+    }
+    /* #endregion */
+    /* #region Interaction */
+    activate(index) {
+        const segment = this.segments?.[index];
+        if (!segment)
+            return;
+        this.emit('nile-segment-click', {
+            segment,
+            index,
+            percentage: this.percentages[index] ?? 0,
+        });
+    }
+    /**
+     * `Enter` and `Space` activate a segment or legend entry. The affordances are
+     * `role="button"` elements rather than native buttons, so activation is wired
+     * up explicitly and a key press never double-fires alongside a synthetic click.
+     */
+    handleKeyDown(event, index) {
+        if (event.key !== 'Enter' &&
+            event.key !== ' ' &&
+            event.key !== 'Spacebar') {
+            return;
+        }
+        event.preventDefault();
+        this.activate(index);
+    }
+    /* #endregion */
+    /* #region Render */
+    renderSegment(index) {
+        const segment = this.segments[index];
+        const percentage = this.percentages[index] ?? 0;
+        if (percentage <= 0)
+            return nothing;
+        const isLargest = index === this.largestIndex;
+        const minWidth = Math.max(0, Number(this.minSegmentWidth) || 0);
+        const description = this.describeSegment(index);
+        const bar = html `
+      <div
+        part="segment"
+        role="button"
+        tabindex="0"
+        data-index=${index}
+        class=${classMap({
+            'segmented-progress-bar__segment': true,
+            [`segmented-progress-bar__palette-${index % PALETTE_LENGTH}`]: !segment.color,
+        })}
+        style=${styleMap({
+            flexBasis: `${percentage}%`,
+            // Only the widest segment may shrink, so it soaks up every pixel the
+            // min-width floors add to the row and the total stays at 100%.
+            flexShrink: isLargest ? '1' : '0',
+            minWidth: isLargest ? '0px' : `${minWidth}px`,
+            backgroundColor: segment.color || undefined,
+        })}
+        aria-label=${description}
+        @click=${() => this.activate(index)}
+        @keydown=${(event) => this.handleKeyDown(event, index)}
+      ></div>
+    `;
+        if (!this.showTooltip)
+            return bar;
+        return html `
+      <nile-lite-tooltip
+        size="small"
+        content=${this.tooltipFor(index)}
+        placement=${this.tooltipPlacement}
+      >
+        ${bar}
+      </nile-lite-tooltip>
+    `;
+    }
+    renderLegendItem(index) {
+        const segment = this.segments[index];
+        const value = this.values[index] ?? 0;
+        return html `
+      <div
+        part="legend-item"
+        role="button"
+        tabindex="0"
+        data-index=${index}
+        class="segmented-progress-bar__legend-item"
+        aria-label=${this.describeSegment(index)}
+        @click=${() => this.activate(index)}
+        @keydown=${(event) => this.handleKeyDown(event, index)}
+      >
+        <span
+          part="legend-swatch"
+          aria-hidden="true"
+          class=${classMap({
+            'segmented-progress-bar__legend-swatch': true,
+            [`segmented-progress-bar__palette-${index % PALETTE_LENGTH}`]: !segment.color,
+        })}
+          style=${styleMap({ backgroundColor: segment.color || undefined })}
+        ></span>
+        <span part="legend-label" class="segmented-progress-bar__legend-label"
+          >${segment.label}</span
+        >
+        ${this.showValues
+            ? html `<span
+              part="legend-value"
+              class="segmented-progress-bar__legend-value"
+              >${value}</span
+            >`
+            : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const segments = Array.isArray(this.segments) ? this.segments : [];
+        return html `
+      <div
+        part="container"
+        class=${classMap({
+            'segmented-progress-bar': true,
+            'segmented-progress-bar--small': this.size === 'small',
+            'segmented-progress-bar--medium': this.size === 'medium',
+            'segmented-progress-bar--large': this.size === 'large',
+            'segmented-progress-bar--rounded': this.rounded,
+        })}
+      >
+        ${this.label
+            ? html `<div part="label" class="segmented-progress-bar__label">
+              ${this.label}
+            </div>`
+            : nothing}
+
+        <div
+          part="bar track"
+          class="segmented-progress-bar__track"
+          role="group"
+          aria-label=${this.accessibleSummary}
+        >
+          ${segments.map((_, index) => this.renderSegment(index))}
+        </div>
+
+        ${this.showLegend
+            ? html `<div part="legend" class="segmented-progress-bar__legend">
+              ${segments.map((_, index) => this.renderLegendItem(index))}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+NileSegmentedProgressBar.styles = styles;
+__decorate([
+    property({ type: Array })
+], NileSegmentedProgressBar.prototype, "segments", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileSegmentedProgressBar.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileSegmentedProgressBar.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-tooltip' })
+], NileSegmentedProgressBar.prototype, "showTooltip", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-values' })
+], NileSegmentedProgressBar.prototype, "showValues", void 0);
+__decorate([
+    property({ reflect: true })
+], NileSegmentedProgressBar.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], NileSegmentedProgressBar.prototype, "total", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSegmentedProgressBar.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-segment-width' })
+], NileSegmentedProgressBar.prototype, "minSegmentWidth", void 0);
+__decorate([
+    property({ attribute: 'tooltip-placement' })
+], NileSegmentedProgressBar.prototype, "tooltipPlacement", void 0);
+NileSegmentedProgressBar = __decorate([
+    customElement('nile-segmented-progress-bar')
+], NileSegmentedProgressBar);
+export { NileSegmentedProgressBar };
+export default NileSegmentedProgressBar;
+//# sourceMappingURL=nile-segmented-progress-bar.js.map

package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-segmented-progress-bar.js","sourceRoot":"","sources":["../../../src/nile-segmented-progress-bar/nile-segmented-progress-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2026\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing } from 'lit';\nimport { styles } from './nile-segmented-progress-bar.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';\nimport '../nile-lite-tooltip/index';\n\n/** A single slice of the distribution rendered by `nile-segmented-progress-bar`. */\nexport interface NileProgressSegment {\n  /** Legend label, also used in the default tooltip text. */\n  label: string;\n  /** Raw magnitude of this segment. */\n  value: number;\n  /** Any CSS color; falls back to the palette rotation when omitted. */\n  color?: string;\n  /** Overrides the default tooltip content for this segment. */\n  tooltip?: string;\n}\n\n/** Placement values forwarded to `nile-lite-tooltip`. */\nexport type NileSegmentTooltipPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end';\n\n/** The number of palette classes declared in the stylesheet. */\nconst PALETTE_LENGTH = 10;\n\n/**\n * Nile segmented progress bar component.\n *\n * @tag nile-segmented-progress-bar\n *\n * @summary A config-driven, responsive multi-segment progress / distribution bar\n * with an optional wrapping legend — a single rounded track split into colored\n * proportional segments (for example Success / Failure / Errors / Running / Other).\n * @status experimental\n *\n * @event nile-segment-click - Emitted when a segment or its legend entry is activated by click,\n * `Enter` or `Space`. The `detail` contains `{ segment, index, percentage }`.\n *\n * @csspart container - The component's base wrapper.\n * @csspart label - The optional heading above the bar.\n * @csspart bar - The bar/track element (also exposed as `track`).\n * @csspart track - The bar/track element (also exposed as `bar`).\n * @csspart segment - An individual colored segment inside the track.\n * @csspart legend - The wrapping legend row.\n * @csspart legend-item - A single legend entry (swatch + label + value).\n * @csspart legend-swatch - The small rounded square in the segment color.\n * @csspart legend-label - The legend entry's label text.\n * @csspart legend-value - The legend entry's bold value.\n *\n * @example\n * <nile-segmented-progress-bar\n *   label=\"Run outcomes\"\n *   .segments=${[\n *     { label: 'Success', value: 45623 },\n *     { label: 'Failure', value: 50342 },\n *     { label: 'Errors', value: 682 },\n *     { label: 'Running', value: 166 },\n *     { label: 'Other', value: 1552 },\n *   ]}\n * ></nile-segmented-progress-bar>\n */\n@customElement('nile-segmented-progress-bar')\nexport class NileSegmentedProgressBar extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The segments to distribute across the bar. This is the component's config. */\n  @property({ type: Array }) segments: NileProgressSegment[] = [];\n\n  /** Optional heading rendered above the bar. Nothing renders when empty. */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Renders the legend below the bar. */\n  @property({ type: Boolean, attribute: 'show-legend' }) showLegend = true;\n\n  /** Wraps every segment in a `nile-lite-tooltip`. */\n  @property({ type: Boolean, attribute: 'show-tooltip' }) showTooltip = true;\n\n  /** Renders the bold value alongside each legend label. */\n  @property({ type: Boolean, attribute: 'show-values' }) showValues = true;\n\n  /** The thickness of the bar. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Optional denominator. When omitted the denominator is the sum of the segment\n   * values, so the segments always fill 100%. When larger than the sum, the\n   * remainder renders as an unfilled track.\n   */\n  @property({ type: Number }) total?: number;\n\n  /** Rounds the bar's outer ends. */\n  @property({ type: Boolean }) rounded = true;\n\n  /**\n   * Minimum rendered width, in pixels, of a non-zero segment. Guarantees sub-1%\n   * segments stay a discernible sliver. The largest segment absorbs whatever\n   * overflow this introduces, so the row still totals exactly 100%.\n   */\n  @property({ type: Number, attribute: 'min-segment-width' })\n  minSegmentWidth = 2;\n\n  /** Passed straight through to `nile-lite-tooltip`'s `placement`. */\n  @property({ attribute: 'tooltip-placement' })\n  tooltipPlacement: NileSegmentTooltipPlacement = 'top';\n\n  /* #region Math */\n\n  /** Coerces a configured value into a usable, non-negative, finite number. */\n  private sanitizeValue(value: unknown): number {\n    const numeric = Number(value);\n    if (!Number.isFinite(numeric) || numeric < 0) return 0;\n    return numeric;\n  }\n\n  /** The sanitized magnitude of every configured segment, in config order. */\n  private get values(): number[] {\n    const list = Array.isArray(this.segments) ? this.segments : [];\n    return list.map(segment => this.sanitizeValue(segment?.value));\n  }\n\n  /** The sum of every sanitized segment value. */\n  private get sum(): number {\n    return this.values.reduce((runningTotal, value) => runningTotal + value, 0);\n  }\n\n  /** The denominator the percentages are computed against. */\n  private get denominator(): number {\n    const sum = this.sum;\n    const total = Number(this.total);\n    if (Number.isFinite(total) && total > sum) return total;\n    return sum;\n  }\n\n  /** Each segment's share of the denominator, in config order. */\n  private get percentages(): number[] {\n    const denominator = this.denominator;\n    if (denominator <= 0) return this.values.map(() => 0);\n    return this.values.map(value => (value / denominator) * 100);\n  }\n\n  /**\n   * The index of the widest rendered segment. That segment is the one allowed to\n   * shrink, so it absorbs the overflow introduced by `minSegmentWidth` on the\n   * tiny ones and the row still adds up to exactly 100% of the track.\n   */\n  private get largestIndex(): number {\n    const values = this.values;\n    let largest = -1;\n    let largestValue = 0;\n    values.forEach((value, index) => {\n      if (value > largestValue) {\n        largestValue = value;\n        largest = index;\n      }\n    });\n    return largest;\n  }\n\n  /** Formats a percentage to one decimal, trimming a trailing `.0`. */\n  private formatPercentage(percentage: number): string {\n    if (!Number.isFinite(percentage)) return '0';\n    const rounded = Math.round(percentage * 10) / 10;\n    return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);\n  }\n\n  /* #endregion */\n\n  /* #region Text */\n\n  /** The default tooltip / aria text for a segment. */\n  private describeSegment(index: number): string {\n    const segment = this.segments?.[index];\n    const value = this.values[index] ?? 0;\n    const percentage = this.formatPercentage(this.percentages[index] ?? 0);\n    return `${segment?.label ?? ''}: ${value} (${percentage}%)`;\n  }\n\n  /** The tooltip content for a segment, honouring a per-segment override. */\n  private tooltipFor(index: number): string {\n    const override = this.segments?.[index]?.tooltip;\n    return override && override.length > 0\n      ? override\n      : this.describeSegment(index);\n  }\n\n  /**\n   * A single sentence describing the whole distribution, used as the track's\n   * accessible name so screen readers get the breakdown without tabbing it.\n   */\n  private get accessibleSummary(): string {\n    const list = Array.isArray(this.segments) ? this.segments : [];\n    const parts = list.map((_, index) => this.describeSegment(index));\n    const body = parts.length > 0 ? parts.join(', ') : 'No data';\n    return this.label ? `${this.label}: ${body}` : body;\n  }\n\n  /* #endregion */\n\n  /* #region Validation */\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('segments') || changedProperties.has('total')) {\n      this.validateConfig();\n    }\n  }\n\n  /** Logs invalid config the way `nile-progress-bar` reports out-of-range values. */\n  private validateConfig(): void {\n    const list = Array.isArray(this.segments) ? this.segments : [];\n\n    list.forEach((segment, index) => {\n      const numeric = Number(segment?.value);\n      if (!Number.isFinite(numeric)) {\n        console.error(\n          `[NileSegmentedProgressBar]: Invalid value (${String(\n            segment?.value\n          )}) detected at segment index ${index}. Value must be a finite number. Falling back to 0.`\n        );\n        return;\n      }\n      if (numeric < 0) {\n        console.error(\n          `[NileSegmentedProgressBar]: Invalid value (${numeric}) detected at segment index ${index}. Value must be greater than or equal to 0. Falling back to 0.`\n        );\n      }\n    });\n\n    const total = Number(this.total);\n    if (this.total !== undefined && this.total !== null) {\n      if (!Number.isFinite(total) || total < 0) {\n        console.error(\n          `[NileSegmentedProgressBar]: Invalid total (${String(\n            this.total\n          )}) detected. Total must be a finite number greater than or equal to 0. Falling back to the sum of the segment values.`\n        );\n      } else if (total < this.sum) {\n        console.error(\n          `[NileSegmentedProgressBar]: Invalid total (${total}) detected. Total must be greater than or equal to the sum of the segment values (${this.sum}). Falling back to the sum.`\n        );\n      }\n    }\n  }\n\n  /* #endregion */\n\n  /* #region Interaction */\n\n  private activate(index: number): void {\n    const segment = this.segments?.[index];\n    if (!segment) return;\n    this.emit('nile-segment-click', {\n      segment,\n      index,\n      percentage: this.percentages[index] ?? 0,\n    });\n  }\n\n  /**\n   * `Enter` and `Space` activate a segment or legend entry. The affordances are\n   * `role=\"button\"` elements rather than native buttons, so activation is wired\n   * up explicitly and a key press never double-fires alongside a synthetic click.\n   */\n  private handleKeyDown(event: KeyboardEvent, index: number): void {\n    if (\n      event.key !== 'Enter' &&\n      event.key !== ' ' &&\n      event.key !== 'Spacebar'\n    ) {\n      return;\n    }\n    event.preventDefault();\n    this.activate(index);\n  }\n\n  /* #endregion */\n\n  /* #region Render */\n\n  private renderSegment(index: number): TemplateResult | typeof nothing {\n    const segment = this.segments[index];\n    const percentage = this.percentages[index] ?? 0;\n    if (percentage <= 0) return nothing;\n\n    const isLargest = index === this.largestIndex;\n    const minWidth = Math.max(0, Number(this.minSegmentWidth) || 0);\n    const description = this.describeSegment(index);\n\n    const bar = html`\n      <div\n        part=\"segment\"\n        role=\"button\"\n        tabindex=\"0\"\n        data-index=${index}\n        class=${classMap({\n          'segmented-progress-bar__segment': true,\n          [`segmented-progress-bar__palette-${index % PALETTE_LENGTH}`]:\n            !segment.color,\n        })}\n        style=${styleMap({\n          flexBasis: `${percentage}%`,\n          // Only the widest segment may shrink, so it soaks up every pixel the\n          // min-width floors add to the row and the total stays at 100%.\n          flexShrink: isLargest ? '1' : '0',\n          minWidth: isLargest ? '0px' : `${minWidth}px`,\n          backgroundColor: segment.color || undefined,\n        })}\n        aria-label=${description}\n        @click=${() => this.activate(index)}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event, index)}\n      ></div>\n    `;\n\n    if (!this.showTooltip) return bar;\n\n    return html`\n      <nile-lite-tooltip\n        size=\"small\"\n        content=${this.tooltipFor(index)}\n        placement=${this.tooltipPlacement}\n      >\n        ${bar}\n      </nile-lite-tooltip>\n    `;\n  }\n\n  private renderLegendItem(index: number): TemplateResult {\n    const segment = this.segments[index];\n    const value = this.values[index] ?? 0;\n\n    return html`\n      <div\n        part=\"legend-item\"\n        role=\"button\"\n        tabindex=\"0\"\n        data-index=${index}\n        class=\"segmented-progress-bar__legend-item\"\n        aria-label=${this.describeSegment(index)}\n        @click=${() => this.activate(index)}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event, index)}\n      >\n        <span\n          part=\"legend-swatch\"\n          aria-hidden=\"true\"\n          class=${classMap({\n            'segmented-progress-bar__legend-swatch': true,\n            [`segmented-progress-bar__palette-${index % PALETTE_LENGTH}`]:\n              !segment.color,\n          })}\n          style=${styleMap({ backgroundColor: segment.color || undefined })}\n        ></span>\n        <span part=\"legend-label\" class=\"segmented-progress-bar__legend-label\"\n          >${segment.label}</span\n        >\n        ${this.showValues\n          ? html`<span\n              part=\"legend-value\"\n              class=\"segmented-progress-bar__legend-value\"\n              >${value}</span\n            >`\n          : nothing}\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const segments = Array.isArray(this.segments) ? this.segments : [];\n\n    return html`\n      <div\n        part=\"container\"\n        class=${classMap({\n          'segmented-progress-bar': true,\n          'segmented-progress-bar--small': this.size === 'small',\n          'segmented-progress-bar--medium': this.size === 'medium',\n          'segmented-progress-bar--large': this.size === 'large',\n          'segmented-progress-bar--rounded': this.rounded,\n        })}\n      >\n        ${this.label\n          ? html`<div part=\"label\" class=\"segmented-progress-bar__label\">\n              ${this.label}\n            </div>`\n          : nothing}\n\n        <div\n          part=\"bar track\"\n          class=\"segmented-progress-bar__track\"\n          role=\"group\"\n          aria-label=${this.accessibleSummary}\n        >\n          ${segments.map((_, index) => this.renderSegment(index))}\n        </div>\n\n        ${this.showLegend\n          ? html`<div part=\"legend\" class=\"segmented-progress-bar__legend\">\n              ${segments.map((_, index) => this.renderLegendItem(index))}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileSegmentedProgressBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-segmented-progress-bar': NileSegmentedProgressBar;\n  }\n}\n"]}

package/dist/src/nile-segmented-progress-bar/nile-segmented-progress-bar.test.d.ts

@@ -0,0 +1 @@
+import './nile-segmented-progress-bar';