@aquera/nile-elements 2.0.2 → 2.0.4

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

@@ -0,0 +1,252 @@
+/**
+ * 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 { css } from 'lit';
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(
+      --nile-webkit-font-smoothing,
+      var(--ng-webkit-font-smoothing)
+    );
+    -moz-osx-font-smoothing: var(
+      --nile-moz-osx-font-smoothing,
+      var(--ng-moz-osx-font-smoothing)
+    );
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    display: block;
+    width: 100%;
+  }
+
+  .segmented-progress-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-2));
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+  }
+
+  /* #region Label */
+
+  .segmented-progress-bar__label {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  /* #endregion */
+
+  /* #region Track */
+
+  .segmented-progress-bar__track {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    background-color: var(
+      --nile-progress-bar-track-color-stroke,
+      var(--ng-colors-bg-quaternary)
+    );
+    border-radius: var(--nile-radius-none, var(--ng-radius-none));
+    height: var(--nile-height-8px, var(--ng-height-8px));
+  }
+
+  .segmented-progress-bar--rounded .segmented-progress-bar__track {
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+  }
+
+  .segmented-progress-bar--small .segmented-progress-bar__track {
+    height: var(--nile-height-4px, var(--ng-height-4px));
+  }
+
+  .segmented-progress-bar--medium .segmented-progress-bar__track {
+    height: var(--nile-height-8px, var(--ng-height-8px));
+  }
+
+  .segmented-progress-bar--large .segmented-progress-bar__track {
+    height: var(--nile-height-12px, var(--ng-height-12px));
+  }
+ 
+  .segmented-progress-bar__track nile-lite-tooltip {
+    display: contents;
+  }
+
+  /* #endregion */
+
+  /* #region Segments */
+
+  .segmented-progress-bar__segment {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    padding: var(--nile-spacing-none, var(--ng-spacing-0));
+    margin: var(--nile-spacing-none, var(--ng-spacing-0));
+    border: none;
+    border-radius: var(--nile-radius-none, var(--ng-radius-none));
+    height: 100%;
+    align-self: stretch;
+    box-sizing: border-box;
+    cursor: pointer;
+    flex-grow: 0;
+    transition: opacity 0.15s ease-in-out;
+  }
+
+  .segmented-progress-bar__segment:hover {
+    opacity: 0.85;
+  }
+
+  .segmented-progress-bar__segment:focus-visible {
+    outline: var(--nile-height-2px, var(--ng-height-2px)) solid
+      var(--nile-colors-brand-600, var(--ng-colors-border-brand));
+    outline-offset: var(--nile-height-1px, var(--ng-height-1px));
+  }
+
+  /* #endregion */
+
+  .segmented-progress-bar__palette-0 {
+    background-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));
+  }
+
+  .segmented-progress-bar__palette-1 {
+    background-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-500));
+  }
+
+  .segmented-progress-bar__palette-2 {
+    background-color: var(--nile-colors-orange-500, var(--ng-componentcolors-utility-orange-500));
+  }
+
+  .segmented-progress-bar__palette-3 {
+    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-blue-500));
+  }
+  .segmented-progress-bar__palette-4 {
+    background-color: var(--nile-colors-neutral-700, var(--ng-componentcolors-utility-gray-500));
+  }
+
+  .segmented-progress-bar__palette-5 {
+    background-color: var(--nile-colors-purple-500, var(--ng-componentcolors-utility-purple-500));
+  }
+
+  .segmented-progress-bar__palette-6 {
+    background-color: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));
+  }
+
+  .segmented-progress-bar__palette-7 {
+    background-color: var(--nile-colors-pink-500, var(--ng-componentcolors-utility-pink-500));
+  }
+
+  .segmented-progress-bar__palette-8 {
+    background-color: var(--nile-colors-indigo-500, var(--ng-componentcolors-utility-indigo-500));
+  }
+
+  .segmented-progress-bar__palette-9 {
+  background-color: var(--nile-colors-fuchsia-500, var(--ng-componentcolors-utility-fuchsia-500));
+  }
+
+  /* #endregion */
+
+  /* #region Legend */
+
+  .segmented-progress-bar__legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--nile-spacing-lg, var(--ng-spacing-4));
+    row-gap: var(--nile-spacing-sm, var(--ng-spacing-2));
+    width: 100%;
+    min-width: 0;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-1));
+  }
+
+  .segmented-progress-bar__legend-item {
+    appearance: none;
+    -webkit-appearance: none;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-2));
+    padding: var(--nile-spacing-none, var(--ng-spacing-0));
+    margin: var(--nile-spacing-none, var(--ng-spacing-0));
+    border: none;
+    background: none;
+    border-radius: var(--nile-radius-xs, var(--ng-radius-xs));
+    cursor: pointer;
+    /* Keep swatch, label and value on one line — never break mid-entry. */
+    white-space: nowrap;
+    flex: 0 0 auto;
+    max-width: 100%;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .segmented-progress-bar__legend-item:focus-visible {
+    outline: var(--nile-height-2px, var(--ng-height-2px)) solid
+      var(--nile-colors-brand-600, var(--ng-colors-border-brand));
+    outline-offset: var(--nile-height-2px, var(--ng-height-2px));
+  }
+
+  .segmented-progress-bar__legend-swatch {
+    flex: none;
+    width: var(--nile-height-10px, var(--ng-height-10px));
+    height: var(--nile-height-10px, var(--ng-height-10px));
+    border-radius: var(--nile-radius-xxs, var(--ng-radius-xxs));
+  }
+
+  .segmented-progress-bar__legend-label {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-text-secondary, var(--ng-colors-text-secondary-700));
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .segmented-progress-bar__legend-value {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  /* #endregion */
+
+  /* #region Sizes — legend scales with the bar */
+
+  .segmented-progress-bar--small .segmented-progress-bar__legend-swatch {
+    width: var(--nile-height-8px, var(--ng-height-8px));
+    height: var(--nile-height-8px, var(--ng-height-8px));
+  }
+
+  .segmented-progress-bar--small .segmented-progress-bar__legend-label,
+  .segmented-progress-bar--small .segmented-progress-bar__legend-value {
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-xs));
+  }
+
+  .segmented-progress-bar--large .segmented-progress-bar__legend-swatch {
+    width: var(--nile-height-12px, var(--ng-height-12px));
+    height: var(--nile-height-12px, var(--ng-height-12px));
+  }
+
+  .segmented-progress-bar--large .segmented-progress-bar__legend-label,
+  .segmented-progress-bar--large .segmented-progress-bar__legend-value {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-md));
+  }
+
+  /* #endregion */
+
+  @media (prefers-reduced-motion: reduce) {
+    .segmented-progress-bar__segment {
+      transition: none;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-segmented-progress-bar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-segmented-progress-bar.css.js","sourceRoot":"","sources":["../../../src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: block;\n    width: 100%;\n  }\n\n  .segmented-progress-bar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-2));\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  /* #region Label */\n\n  .segmented-progress-bar__label {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  /* #endregion */\n\n  /* #region Track */\n\n  .segmented-progress-bar__track {\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n    overflow: hidden;\n    background-color: var(\n      --nile-progress-bar-track-color-stroke,\n      var(--ng-colors-bg-quaternary)\n    );\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n    height: var(--nile-height-8px, var(--ng-height-8px));\n  }\n\n  .segmented-progress-bar--rounded .segmented-progress-bar__track {\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n\n  .segmented-progress-bar--small .segmented-progress-bar__track {\n    height: var(--nile-height-4px, var(--ng-height-4px));\n  }\n\n  .segmented-progress-bar--medium .segmented-progress-bar__track {\n    height: var(--nile-height-8px, var(--ng-height-8px));\n  }\n\n  .segmented-progress-bar--large .segmented-progress-bar__track {\n    height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n \n  .segmented-progress-bar__track nile-lite-tooltip {\n    display: contents;\n  }\n\n  /* #endregion */\n\n  /* #region Segments */\n\n  .segmented-progress-bar__segment {\n    appearance: none;\n    -webkit-appearance: none;\n    display: block;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0));\n    margin: var(--nile-spacing-none, var(--ng-spacing-0));\n    border: none;\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n    height: 100%;\n    align-self: stretch;\n    box-sizing: border-box;\n    cursor: pointer;\n    flex-grow: 0;\n    transition: opacity 0.15s ease-in-out;\n  }\n\n  .segmented-progress-bar__segment:hover {\n    opacity: 0.85;\n  }\n\n  .segmented-progress-bar__segment:focus-visible {\n    outline: var(--nile-height-2px, var(--ng-height-2px)) solid\n      var(--nile-colors-brand-600, var(--ng-colors-border-brand));\n    outline-offset: var(--nile-height-1px, var(--ng-height-1px));\n  }\n\n  /* #endregion */\n\n  .segmented-progress-bar__palette-0 {\n    background-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  .segmented-progress-bar__palette-1 {\n    background-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-500));\n  }\n\n  .segmented-progress-bar__palette-2 {\n    background-color: var(--nile-colors-orange-500, var(--ng-componentcolors-utility-orange-500));\n  }\n\n  .segmented-progress-bar__palette-3 {\n    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-blue-500));\n  }\n  .segmented-progress-bar__palette-4 {\n    background-color: var(--nile-colors-neutral-700, var(--ng-componentcolors-utility-gray-500));\n  }\n\n  .segmented-progress-bar__palette-5 {\n    background-color: var(--nile-colors-purple-500, var(--ng-componentcolors-utility-purple-500));\n  }\n\n  .segmented-progress-bar__palette-6 {\n    background-color: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));\n  }\n\n  .segmented-progress-bar__palette-7 {\n    background-color: var(--nile-colors-pink-500, var(--ng-componentcolors-utility-pink-500));\n  }\n\n  .segmented-progress-bar__palette-8 {\n    background-color: var(--nile-colors-indigo-500, var(--ng-componentcolors-utility-indigo-500));\n  }\n\n  .segmented-progress-bar__palette-9 {\n  background-color: var(--nile-colors-fuchsia-500, var(--ng-componentcolors-utility-fuchsia-500));\n  }\n\n  /* #endregion */\n\n  /* #region Legend */\n\n  .segmented-progress-bar__legend {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    column-gap: var(--nile-spacing-lg, var(--ng-spacing-4));\n    row-gap: var(--nile-spacing-sm, var(--ng-spacing-2));\n    width: 100%;\n    min-width: 0;\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-1));\n  }\n\n  .segmented-progress-bar__legend-item {\n    appearance: none;\n    -webkit-appearance: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-2));\n    padding: var(--nile-spacing-none, var(--ng-spacing-0));\n    margin: var(--nile-spacing-none, var(--ng-spacing-0));\n    border: none;\n    background: none;\n    border-radius: var(--nile-radius-xs, var(--ng-radius-xs));\n    cursor: pointer;\n    /* Keep swatch, label and value on one line — never break mid-entry. */\n    white-space: nowrap;\n    flex: 0 0 auto;\n    max-width: 100%;\n    font-family: inherit;\n    text-align: left;\n  }\n\n  .segmented-progress-bar__legend-item:focus-visible {\n    outline: var(--nile-height-2px, var(--ng-height-2px)) solid\n      var(--nile-colors-brand-600, var(--ng-colors-border-brand));\n    outline-offset: var(--nile-height-2px, var(--ng-height-2px));\n  }\n\n  .segmented-progress-bar__legend-swatch {\n    flex: none;\n    width: var(--nile-height-10px, var(--ng-height-10px));\n    height: var(--nile-height-10px, var(--ng-height-10px));\n    border-radius: var(--nile-radius-xxs, var(--ng-radius-xxs));\n  }\n\n  .segmented-progress-bar__legend-label {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-text-secondary, var(--ng-colors-text-secondary-700));\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .segmented-progress-bar__legend-value {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  /* #endregion */\n\n  /* #region Sizes — legend scales with the bar */\n\n  .segmented-progress-bar--small .segmented-progress-bar__legend-swatch {\n    width: var(--nile-height-8px, var(--ng-height-8px));\n    height: var(--nile-height-8px, var(--ng-height-8px));\n  }\n\n  .segmented-progress-bar--small .segmented-progress-bar__legend-label,\n  .segmented-progress-bar--small .segmented-progress-bar__legend-value {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-xs));\n  }\n\n  .segmented-progress-bar--large .segmented-progress-bar__legend-swatch {\n    width: var(--nile-height-12px, var(--ng-height-12px));\n    height: var(--nile-height-12px, var(--ng-height-12px));\n  }\n\n  .segmented-progress-bar--large .segmented-progress-bar__legend-label,\n  .segmented-progress-bar--large .segmented-progress-bar__legend-value {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-md));\n  }\n\n  /* #endregion */\n\n  @media (prefers-reduced-motion: reduce) {\n    .segmented-progress-bar__segment {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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;
+    }
+}