@aquera/nile-elements 2.0.2 → 2.0.3

package/dist/nile-segmented-progress-bar/index.cjs.js

@@ -0,0 +1,2 @@
+System.register(["./nile-segmented-progress-bar.cjs.js","tslib","lit","./nile-segmented-progress-bar.css.cjs.js","lit/directives/class-map.js","lit/directives/style-map.js","lit/decorators.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js","../nile-lite-tooltip/nile-lite-tooltip.cjs.js","../nile-lite-tooltip/nile-lite-tooltip.css.cjs.js","../tippy.esm-78baa8f2.cjs.js","../nile-lite-tooltip/utils.cjs.js","../utilities/visibility-manager.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nileSegmentedProgressBarCjsJs){_export("NileSegmentedProgressBar",_nileSegmentedProgressBarCjsJs.N);},function(_tslib){},function(_lit){},function(_nileSegmentedProgressBarCssCjsJs){},function(_litDirectivesClassMapJs){},function(_litDirectivesStyleMapJs){},function(_litDecoratorsJs){},function(_internalNileElementCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_nileLiteTooltipNileLiteTooltipCjsJs){},function(_nileLiteTooltipNileLiteTooltipCssCjsJs){},function(_tippyEsm009CjsJs){},function(_nileLiteTooltipUtilsCjsJs){},function(_utilitiesVisibilityManagerCjsJs){}],execute:function execute(){}};});
+//# sourceMappingURL=index.cjs.js.map

package/dist/nile-segmented-progress-bar/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/nile-segmented-progress-bar/index.esm.js

@@ -0,0 +1 @@
+export{N as NileSegmentedProgressBar}from"./nile-segmented-progress-bar.esm.js";import"tslib";import"lit";import"./nile-segmented-progress-bar.css.esm.js";import"lit/directives/class-map.js";import"lit/directives/style-map.js";import"lit/decorators.js";import"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";import"../nile-lite-tooltip/nile-lite-tooltip.esm.js";import"../nile-lite-tooltip/nile-lite-tooltip.css.esm.js";import"../tippy.esm-57628c2b.esm.js";import"../nile-lite-tooltip/utils.esm.js";import"../utilities/visibility-manager.esm.js";

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

@@ -0,0 +1,2 @@
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","./nile-segmented-progress-bar.css.cjs.js","lit/directives/class-map.js","lit/directives/style-map.js","lit/decorators.js","../internal/nile-element.cjs.js","../nile-lite-tooltip/nile-lite-tooltip.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js","../nile-lite-tooltip/nile-lite-tooltip.css.cjs.js","../tippy.esm-78baa8f2.cjs.js","../nile-lite-tooltip/utils.cjs.js","../utilities/visibility-manager.cjs.js"],function(_export,_context){"use strict";var e,t,s,i,r,a,n,o,l,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,d;function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.nothing;s=_lit.html;},function(_nileSegmentedProgressBarCssCjsJs){i=_nileSegmentedProgressBarCssCjsJs.s;},function(_litDirectivesClassMapJs){r=_litDirectivesClassMapJs.classMap;},function(_litDirectivesStyleMapJs){a=_litDirectivesStyleMapJs.styleMap;},function(_litDecoratorsJs){n=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_nileLiteTooltipNileLiteTooltipCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_nileLiteTooltipNileLiteTooltipCssCjsJs){},function(_tippyEsm009CjsJs){},function(_nileLiteTooltipUtilsCjsJs){},function(_utilitiesVisibilityManagerCjsJs){}],execute:function execute(){_export("N",d=/*#__PURE__*/function(_l){function d(){var _this;_classCallCheck(this,d);_this=_callSuper(this,d,arguments),_this.segments=[],_this.label="",_this.showLegend=!0,_this.showTooltip=!0,_this.showValues=!0,_this.size="medium",_this.rounded=!0,_this.minSegmentWidth=2,_this.tooltipPlacement="top";return _this;}_inherits(d,_l);return _createClass(d,[{key:"sanitizeValue",value:function sanitizeValue(e){var t=Number(e);return!Number.isFinite(t)||t<0?0:t;}},{key:"values",get:function get(){var _this2=this;return(Array.isArray(this.segments)?this.segments:[]).map(function(e){return _this2.sanitizeValue(e===null||e===void 0?void 0:e.value);});}},{key:"sum",get:function get(){return this.values.reduce(function(e,t){return e+t;},0);}},{key:"denominator",get:function get(){var e=this.sum,t=Number(this.total);return Number.isFinite(t)&&t>e?t:e;}},{key:"percentages",get:function get(){var e=this.denominator;return e<=0?this.values.map(function(){return 0;}):this.values.map(function(t){return t/e*100;});}},{key:"largestIndex",get:function get(){var e=this.values;var t=-1,s=0;return e.forEach(function(e,i){e>s&&(s=e,t=i);}),t;}},{key:"formatPercentage",value:function formatPercentage(e){if(!Number.isFinite(e))return"0";var t=Math.round(10*e)/10;return Number.isInteger(t)?String(t):t.toFixed(1);}},{key:"describeSegment",value:function describeSegment(e){var _this$segments,_this$values$e,_this$percentages$e,_t$label;var t=(_this$segments=this.segments)===null||_this$segments===void 0?void 0:_this$segments[e],s=(_this$values$e=this.values[e])!==null&&_this$values$e!==void 0?_this$values$e:0,i=this.formatPercentage((_this$percentages$e=this.percentages[e])!==null&&_this$percentages$e!==void 0?_this$percentages$e:0);return"".concat((_t$label=t===null||t===void 0?void 0:t.label)!==null&&_t$label!==void 0?_t$label:"",": ").concat(s," (").concat(i,"%)");}},{key:"tooltipFor",value:function tooltipFor(e){var _this$segments2;var t=(_this$segments2=this.segments)===null||_this$segments2===void 0||(_this$segments2=_this$segments2[e])===null||_this$segments2===void 0?void 0:_this$segments2.tooltip;return t&&t.length>0?t:this.describeSegment(e);}},{key:"accessibleSummary",get:function get(){var _this3=this;var e=(Array.isArray(this.segments)?this.segments:[]).map(function(e,t){return _this3.describeSegment(t);}),t=e.length>0?e.join(", "):"No data";return this.label?"".concat(this.label,": ").concat(t):t;}},{key:"updated",value:function updated(e){_superPropGet(d,"updated",this,3)([e]),(e.has("segments")||e.has("total"))&&this.validateConfig();}},{key:"validateConfig",value:function validateConfig(){(Array.isArray(this.segments)?this.segments:[]).forEach(function(e,t){var s=Number(e===null||e===void 0?void 0:e.value);Number.isFinite(s)?s<0&&console.error("[NileSegmentedProgressBar]: Invalid value (".concat(s,") detected at segment index ").concat(t,". Value must be greater than or equal to 0. Falling back to 0.")):console.error("[NileSegmentedProgressBar]: Invalid value (".concat(String(e===null||e===void 0?void 0:e.value),") detected at segment index ").concat(t,". Value must be a finite number. Falling back to 0."));});var e=Number(this.total);void 0!==this.total&&null!==this.total&&(!Number.isFinite(e)||e<0?console.error("[NileSegmentedProgressBar]: Invalid total (".concat(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.")):e<this.sum&&console.error("[NileSegmentedProgressBar]: Invalid total (".concat(e,") detected. Total must be greater than or equal to the sum of the segment values (").concat(this.sum,"). Falling back to the sum.")));}},{key:"activate",value:function activate(e){var _this$segments3,_this$percentages$e2;var t=(_this$segments3=this.segments)===null||_this$segments3===void 0?void 0:_this$segments3[e];t&&this.emit("nile-segment-click",{segment:t,index:e,percentage:(_this$percentages$e2=this.percentages[e])!==null&&_this$percentages$e2!==void 0?_this$percentages$e2:0});}},{key:"handleKeyDown",value:function handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),this.activate(t));}},{key:"renderSegment",value:function renderSegment(e){var _this$percentages$e3,_this4=this;var i=this.segments[e],n=(_this$percentages$e3=this.percentages[e])!==null&&_this$percentages$e3!==void 0?_this$percentages$e3:0;if(n<=0)return t;var o=e===this.largestIndex,l=Math.max(0,Number(this.minSegmentWidth)||0),_d=this.describeSegment(e),m=s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div\n        part=\"segment\"\n        role=\"button\"\n        tabindex=\"0\"\n        data-index=","\n        class=","\n        style=","\n        aria-label=","\n        @click=","\n        @keydown=","\n      ></div>\n    "])),e,r(_defineProperty({"segmented-progress-bar__segment":!0},"segmented-progress-bar__palette-"+e%10,!i.color)),a({flexBasis:"".concat(n,"%"),flexShrink:o?"1":"0",minWidth:o?"0px":"".concat(l,"px"),backgroundColor:i.color||void 0}),_d,function(){return _this4.activate(e);},function(t){return _this4.handleKeyDown(t,e);});return this.showTooltip?s(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n      <nile-lite-tooltip\n        size=\"small\"\n        content=","\n        placement=","\n      >\n        ","\n      </nile-lite-tooltip>\n    "])),this.tooltipFor(e),this.tooltipPlacement,m):m;}},{key:"renderLegendItem",value:function renderLegendItem(e){var _this$values$e2,_this5=this;var i=this.segments[e],n=(_this$values$e2=this.values[e])!==null&&_this$values$e2!==void 0?_this$values$e2:0;return s(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n      <div\n        part=\"legend-item\"\n        role=\"button\"\n        tabindex=\"0\"\n        data-index=","\n        class=\"segmented-progress-bar__legend-item\"\n        aria-label=","\n        @click=","\n        @keydown=","\n      >\n        <span\n          part=\"legend-swatch\"\n          aria-hidden=\"true\"\n          class=","\n          style=","\n        ></span>\n        <span part=\"legend-label\" class=\"segmented-progress-bar__legend-label\"\n          >","</span\n        >\n        ","\n      </div>\n    "])),e,this.describeSegment(e),function(){return _this5.activate(e);},function(t){return _this5.handleKeyDown(t,e);},r(_defineProperty({"segmented-progress-bar__legend-swatch":!0},"segmented-progress-bar__palette-"+e%10,!i.color)),a({backgroundColor:i.color||void 0}),i.label,this.showValues?s(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<span\n              part=\"legend-value\"\n              class=\"segmented-progress-bar__legend-value\"\n              >","</span\n            >"])),n):t);}},{key:"render",value:function render(){var _this6=this;var e=Array.isArray(this.segments)?this.segments:[];return s(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n      <div\n        part=\"container\"\n        class=","\n      >\n        ","\n\n        <div\n          part=\"bar track\"\n          class=\"segmented-progress-bar__track\"\n          role=\"group\"\n          aria-label=","\n        >\n          ","\n        </div>\n\n        ","\n      </div>\n    "])),r({"segmented-progress-bar":!0,"segmented-progress-bar--small":"small"===this.size,"segmented-progress-bar--medium":"medium"===this.size,"segmented-progress-bar--large":"large"===this.size,"segmented-progress-bar--rounded":this.rounded}),this.label?s(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["<div part=\"label\" class=\"segmented-progress-bar__label\">\n              ","\n            </div>"])),this.label):t,this.accessibleSummary,e.map(function(e,t){return _this6.renderSegment(t);}),this.showLegend?s(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["<div part=\"legend\" class=\"segmented-progress-bar__legend\">\n              ","\n            </div>"])),e.map(function(e,t){return _this6.renderLegendItem(t);})):t);}}]);}(l));d.styles=i,e([n({type:Array})],d.prototype,"segments",void 0),e([n({type:String,reflect:!0})],d.prototype,"label",void 0),e([n({type:Boolean,attribute:"show-legend"})],d.prototype,"showLegend",void 0),e([n({type:Boolean,attribute:"show-tooltip"})],d.prototype,"showTooltip",void 0),e([n({type:Boolean,attribute:"show-values"})],d.prototype,"showValues",void 0),e([n({reflect:!0})],d.prototype,"size",void 0),e([n({type:Number})],d.prototype,"total",void 0),e([n({type:Boolean})],d.prototype,"rounded",void 0),e([n({type:Number,attribute:"min-segment-width"})],d.prototype,"minSegmentWidth",void 0),e([n({attribute:"tooltip-placement"})],d.prototype,"tooltipPlacement",void 0),_export("N",d=e([o("nile-segmented-progress-bar")],d));}};});
+//# sourceMappingURL=nile-segmented-progress-bar.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-segmented-progress-bar.cjs.js","sources":["../../../src/nile-segmented-progress-bar/nile-segmented-progress-bar.ts"],"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"],"names":["NileSegmentedProgressBar","d","this","segments","label","showLegend","showTooltip","showValues","size","rounded","minSegmentWidth","tooltipPlacement","_this","_inherits","_l","_createClass","key","value","sanitizeValue","numeric","Number","isFinite","get","_this2","Array","isArray","map","segment","sum","values","reduce","runningTotal","total","percentages","denominator","largest","largestValue","forEach","index","formatPercentage","percentage","Math","round","isInteger","String","toFixed","describeSegment","concat","_t$label","tooltipFor","_this$segments2","override","tooltip","length","parts","_","body","join","updated","changedProperties","super","has","validateConfig","console","error","undefined","activate","_this$segments3","_this$percentages$e2","emit","handleKeyDown","event","preventDefault","renderSegment","_this$percentages$e3","nothing","isLargest","largestIndex","minWidth","max","description","bar","html","_templateObject","_taggedTemplateLiteral","classMap","color","styleMap","flexBasis","flexShrink","backgroundColor","_templateObject2","renderLegendItem","_this$values$e2","_templateObject3","_templateObject4","render","_templateObject5","_templateObject6","accessibleSummary","_templateObject7","NileElement","styles","__decorate","property","type","prototype","reflect","Boolean","attribute","customElement"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 \u2014 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 \u2014 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"]))));}};});
+//# sourceMappingURL=nile-segmented-progress-bar.css.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-segmented-progress-bar.css.cjs.js","sources":["../../../src/nile-segmented-progress-bar/nile-segmented-progress-bar.css.ts"],"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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTASaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -0,0 +1,243 @@
+import{css as e}from"lit";const r=e`
+  :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{r as s};

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

@@ -0,0 +1,69 @@
+import{__decorate as e}from"tslib";import{nothing as t,html as s}from"lit";import{s as i}from"./nile-segmented-progress-bar.css.esm.js";import{classMap as r}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";import{property as n,customElement as o}from"lit/decorators.js";import{N as l}from"../internal/nile-element.esm.js";import"../nile-lite-tooltip/nile-lite-tooltip.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";import"../nile-lite-tooltip/nile-lite-tooltip.css.esm.js";import"../tippy.esm-57628c2b.esm.js";import"../nile-lite-tooltip/utils.esm.js";import"../utilities/visibility-manager.esm.js";let m=class extends l{constructor(){super(...arguments),this.segments=[],this.label="",this.showLegend=!0,this.showTooltip=!0,this.showValues=!0,this.size="medium",this.rounded=!0,this.minSegmentWidth=2,this.tooltipPlacement="top"}sanitizeValue(e){const t=Number(e);return!Number.isFinite(t)||t<0?0:t}get values(){return(Array.isArray(this.segments)?this.segments:[]).map((e=>this.sanitizeValue(e?.value)))}get sum(){return this.values.reduce(((e,t)=>e+t),0)}get denominator(){const e=this.sum,t=Number(this.total);return Number.isFinite(t)&&t>e?t:e}get percentages(){const e=this.denominator;return e<=0?this.values.map((()=>0)):this.values.map((t=>t/e*100))}get largestIndex(){const e=this.values;let t=-1,s=0;return e.forEach(((e,i)=>{e>s&&(s=e,t=i)})),t}formatPercentage(e){if(!Number.isFinite(e))return"0";const t=Math.round(10*e)/10;return Number.isInteger(t)?String(t):t.toFixed(1)}describeSegment(e){const t=this.segments?.[e],s=this.values[e]??0,i=this.formatPercentage(this.percentages[e]??0);return`${t?.label??""}: ${s} (${i}%)`}tooltipFor(e){const t=this.segments?.[e]?.tooltip;return t&&t.length>0?t:this.describeSegment(e)}get accessibleSummary(){const e=(Array.isArray(this.segments)?this.segments:[]).map(((e,t)=>this.describeSegment(t))),t=e.length>0?e.join(", "):"No data";return this.label?`${this.label}: ${t}`:t}updated(e){super.updated(e),(e.has("segments")||e.has("total"))&&this.validateConfig()}validateConfig(){(Array.isArray(this.segments)?this.segments:[]).forEach(((e,t)=>{const s=Number(e?.value);Number.isFinite(s)?s<0&&console.error(`[NileSegmentedProgressBar]: Invalid value (${s}) detected at segment index ${t}. Value must be greater than or equal to 0. Falling back to 0.`):console.error(`[NileSegmentedProgressBar]: Invalid value (${String(e?.value)}) detected at segment index ${t}. Value must be a finite number. Falling back to 0.`)}));const e=Number(this.total);void 0!==this.total&&null!==this.total&&(!Number.isFinite(e)||e<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.`):e<this.sum&&console.error(`[NileSegmentedProgressBar]: Invalid total (${e}) detected. Total must be greater than or equal to the sum of the segment values (${this.sum}). Falling back to the sum.`))}activate(e){const t=this.segments?.[e];t&&this.emit("nile-segment-click",{segment:t,index:e,percentage:this.percentages[e]??0})}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),this.activate(t))}renderSegment(e){const i=this.segments[e],n=this.percentages[e]??0;if(n<=0)return t;const o=e===this.largestIndex,l=Math.max(0,Number(this.minSegmentWidth)||0),m=this.describeSegment(e),d=s`
+      <div
+        part="segment"
+        role="button"
+        tabindex="0"
+        data-index=${e}
+        class=${r({"segmented-progress-bar__segment":!0,["segmented-progress-bar__palette-"+e%10]:!i.color})}
+        style=${a({flexBasis:`${n}%`,flexShrink:o?"1":"0",minWidth:o?"0px":`${l}px`,backgroundColor:i.color||void 0})}
+        aria-label=${m}
+        @click=${()=>this.activate(e)}
+        @keydown=${t=>this.handleKeyDown(t,e)}
+      ></div>
+    `;return this.showTooltip?s`
+      <nile-lite-tooltip
+        size="small"
+        content=${this.tooltipFor(e)}
+        placement=${this.tooltipPlacement}
+      >
+        ${d}
+      </nile-lite-tooltip>
+    `:d}renderLegendItem(e){const i=this.segments[e],n=this.values[e]??0;return s`
+      <div
+        part="legend-item"
+        role="button"
+        tabindex="0"
+        data-index=${e}
+        class="segmented-progress-bar__legend-item"
+        aria-label=${this.describeSegment(e)}
+        @click=${()=>this.activate(e)}
+        @keydown=${t=>this.handleKeyDown(t,e)}
+      >
+        <span
+          part="legend-swatch"
+          aria-hidden="true"
+          class=${r({"segmented-progress-bar__legend-swatch":!0,["segmented-progress-bar__palette-"+e%10]:!i.color})}
+          style=${a({backgroundColor:i.color||void 0})}
+        ></span>
+        <span part="legend-label" class="segmented-progress-bar__legend-label"
+          >${i.label}</span
+        >
+        ${this.showValues?s`<span
+              part="legend-value"
+              class="segmented-progress-bar__legend-value"
+              >${n}</span
+            >`:t}
+      </div>
+    `}render(){const e=Array.isArray(this.segments)?this.segments:[];return s`
+      <div
+        part="container"
+        class=${r({"segmented-progress-bar":!0,"segmented-progress-bar--small":"small"===this.size,"segmented-progress-bar--medium":"medium"===this.size,"segmented-progress-bar--large":"large"===this.size,"segmented-progress-bar--rounded":this.rounded})}
+      >
+        ${this.label?s`<div part="label" class="segmented-progress-bar__label">
+              ${this.label}
+            </div>`:t}
+
+        <div
+          part="bar track"
+          class="segmented-progress-bar__track"
+          role="group"
+          aria-label=${this.accessibleSummary}
+        >
+          ${e.map(((e,t)=>this.renderSegment(t)))}
+        </div>
+
+        ${this.showLegend?s`<div part="legend" class="segmented-progress-bar__legend">
+              ${e.map(((e,t)=>this.renderLegendItem(t)))}
+            </div>`:t}
+      </div>
+    `}};m.styles=i,e([n({type:Array})],m.prototype,"segments",void 0),e([n({type:String,reflect:!0})],m.prototype,"label",void 0),e([n({type:Boolean,attribute:"show-legend"})],m.prototype,"showLegend",void 0),e([n({type:Boolean,attribute:"show-tooltip"})],m.prototype,"showTooltip",void 0),e([n({type:Boolean,attribute:"show-values"})],m.prototype,"showValues",void 0),e([n({reflect:!0})],m.prototype,"size",void 0),e([n({type:Number})],m.prototype,"total",void 0),e([n({type:Boolean})],m.prototype,"rounded",void 0),e([n({type:Number,attribute:"min-segment-width"})],m.prototype,"minSegmentWidth",void 0),e([n({attribute:"tooltip-placement"})],m.prototype,"tooltipPlacement",void 0),m=e([o("nile-segmented-progress-bar")],m);export{m as N};