@aceshooting/lyra-ui 13.0.1 → 14.1.0

package/dist/components/charts/chart/box-plot.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-colors.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; min-inline-size: 0; min-block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); block-size: auto; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-chart-grid-color: var(--lr-color-border); --_lr-chart-tick-color: var(--lr-color-text-quiet); --_lr-chart-legend-color: var(--lr-color-text); --_lr-chart-tooltip-bg: var(--lr-color-surface); --_lr-chart-tooltip-text: var(--lr-color-text); } [part='base'] { position: relative; inline-size: 100%; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'legend' 'notice' 'table'; } [part='plot'] { grid-area: plot; position: relative; inline-size: 100%; block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); min-inline-size: 0; } [part='data-table'] { grid-area: table; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; } [part='data-table'][data-visually-hidden] { position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); overflow: clip; clip-path: inset(50%); white-space: nowrap; } [part='data-table'] table { max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-truncation'] { grid-area: notice; margin: 0; padding: var(--lr-space-xs); color: var(--lr-color-warning); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='legend'] { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; padding-block: var(--lr-space-xs); } [part~='legend-item'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); max-inline-size: 100%; border: 0; border-radius: var(--lr-radius); padding: var(--lr-space-2xs); gap: var(--lr-space-2xs); background: transparent; color: var(--lr-chart-legend-color, var(--_lr-chart-legend-color)); font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; } [part~='legend-item']:where(:hover) { background: var(--lr-chart-legend-item-hover-bg, var(--lr-color-brand-quiet)); } [part~='legend-item']:where(:active) { background: var( --lr-chart-legend-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part~='legend-item']:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='legend-item']:where([part~='legend-item-hidden']) { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } [part='legend-swatch'] { inline-size: var(--lr-space-s); block-size: var(--lr-space-s); flex: 0 0 auto; border-radius: var(--lr-radius-xs); } ${forcedColorLegendSwatchStyles} [part='base']:where([data-legend-position='top']) { grid-template-areas: 'legend' 'plot' 'notice' 'table'; } [part='base']:where([data-legend-position='inline-start']) { grid-template-areas: 'legend plot' 'notice notice' 'table table'; grid-template-columns: minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))) minmax(0, 1fr); } [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot legend' 'notice notice' 'table table'; grid-template-columns: minmax(0, 1fr) minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))); } @container (max-width: 479px) { [part='base']:where([data-legend-position='inline-start']), [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot' 'legend' 'notice' 'table'; grid-template-columns: minmax(0, 1fr); } } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); } canvas { inline-size: 100% !important; block-size: 100% !important; } [part='canvas'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); } [part='canvas']:hover { outline: var(--lr-chart-canvas-hover-outline-width, var(--lr-border-width-thin)) solid var(--lr-chart-grid-color, var(--_lr-chart-grid-color)); outline-offset: var(--lr-focus-ring-offset); } [part='canvas']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-table-toggle'] { align-self: flex-start; font: inherit; font-size: var(--lr-font-size-xs); min-block-size: var(--lr-icon-button-size); padding: var(--lr-size-0-15rem) var(--lr-size-0-5rem); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); max-inline-size: 100%; white-space: normal; overflow-wrap: break-word; cursor: pointer; } [part='data-table-toggle']:hover { background: var(--lr-box-plot-data-table-toggle-hover-bg, var(--lr-color-brand-quiet)); } [part='data-table-toggle']:active { background: var( --lr-box-plot-data-table-toggle-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='data-table-toggle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } `;export{styles};
+import{css}from"lit";import{forcedColorLegendSwatchStyles}from"./chart-forced-colors.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; min-inline-size: 0; min-block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); block-size: auto; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-chart-grid-color: var(--lr-color-border); --_lr-chart-tick-color: var(--lr-color-text-quiet); --_lr-chart-legend-color: var(--lr-color-text); --_lr-chart-tooltip-bg: var(--lr-color-surface); --_lr-chart-tooltip-text: var(--lr-color-text); } [part='base'] { position: relative; inline-size: 100%; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plot' 'legend' 'notice' 'table'; } [part='plot'] { grid-area: plot; position: relative; inline-size: 100%; block-size: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); min-inline-size: 0; } [part='data-table'] { grid-area: table; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; } [part='data-table'][data-visually-hidden] { position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); overflow: clip; clip-path: inset(50%); white-space: nowrap; } [part='data-table'] table { max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-truncation'] { grid-area: notice; margin: 0; padding: var(--lr-space-xs); color: var(--lr-color-warning); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='legend'] { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--lr-space-xs); min-inline-size: 0; max-inline-size: 100%; padding-block: var(--lr-space-xs); } [part~='legend-item'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); max-inline-size: 100%; border: 0; border-radius: var(--lr-radius); padding: var(--lr-space-2xs); gap: var(--lr-space-2xs); background: transparent; color: var(--lr-chart-legend-color, var(--_lr-chart-legend-color)); font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; } [part~='legend-item']:where(:hover) { background: var(--lr-chart-legend-item-hover-bg, var(--lr-color-brand-quiet)); } [part~='legend-item']:where(:active) { background: var( --lr-chart-legend-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part~='legend-item']:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='legend-item']:where([part~='legend-item-hidden']) { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } [part='legend-swatch'] { inline-size: var(--lr-space-s); block-size: var(--lr-space-s); flex: 0 0 auto; border-radius: var(--lr-radius-xs); } ${forcedColorLegendSwatchStyles} [part='base']:where([data-legend-position='top']) { grid-template-areas: 'legend' 'plot' 'notice' 'table'; } [part='base']:where([data-legend-position='inline-start']) { grid-template-areas: 'legend plot' 'notice notice' 'table table'; grid-template-columns: minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))) minmax(0, 1fr); } [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot legend' 'notice notice' 'table table'; grid-template-columns: minmax(0, 1fr) minmax(0, min(33cqi, var(--lr-chart-legend-side-max, var(--lr-size-15rem)))); } @container (max-width: 479px) { [part='base']:where([data-legend-position='inline-start']), [part='base']:where([data-legend-position='inline-end']) { grid-template-areas: 'plot' 'legend' 'notice' 'table'; grid-template-columns: minmax(0, 1fr); } } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: var(--lr-chart-height, var(--_lr-chart-height, var(--lr-size-280px))); } canvas { inline-size: 100% !important; block-size: 100% !important; } [part='canvas'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); } [part='canvas']:hover { outline: var(--lr-chart-canvas-hover-outline-width, var(--lr-border-width-thin)) solid var( --lr-chart-canvas-hover-outline-color, var(--lr-chart-grid-color, var(--_lr-chart-grid-color)) ); outline-offset: var(--lr-focus-ring-offset); } [part='canvas']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; max-inline-size: 100%; overflow-wrap: anywhere; } [part='data-table-toggle'] { align-self: flex-start; font: inherit; font-size: var(--lr-font-size-xs); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-size-0-15rem) var(--lr-size-0-5rem); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); max-inline-size: 100%; white-space: normal; overflow-wrap: break-word; cursor: pointer; } [part='data-table-toggle']:hover { background: var(--lr-box-plot-data-table-toggle-hover-bg, var(--lr-color-brand-quiet)); } [part='data-table-toggle']:active { background: var( --lr-box-plot-data-table-toggle-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); } [part='data-table-toggle']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } `;export{styles};

package/dist/components/charts/chart/chart-core-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","LogarithmicScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` \u2014 install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){registered||(mod.Chart.register(mod.LineController,mod.BarController,mod.ScatterController,mod.DoughnutController,mod.PieController,mod.RadarController,mod.PolarAreaController,mod.BubbleController,mod.LineElement,mod.PointElement,mod.BarElement,mod.ArcElement,mod.LinearScale,mod.CategoryScale,mod.RadialLinearScale,mod.LogarithmicScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const CHART_REGISTERABLE_KEYS=["LineController","BarController","ScatterController","DoughnutController","PieController","RadarController","PolarAreaController","BubbleController","LineElement","PointElement","BarElement","ArcElement","LinearScale","CategoryScale","RadialLinearScale","LogarithmicScale","Filler","Tooltip","Legend"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingChartCapability(candidate){if(!isObjectLike(candidate))return"module namespace";if(!isConstructor(candidate.Chart))return"Chart";if(typeof candidate.Chart.register!="function")return"Chart.register";if(!isObjectLike(candidate.defaults))return"defaults";for(const key of CHART_REGISTERABLE_KEYS)if(!isObjectLike(candidate[key]))return key}function isChartJsModule(candidate){return missingChartCapability(candidate)===void 0}function resolveChartJsModule(value){const module=resolveOptionalPeerCapability(value,isChartJsModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingChartCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`chart.js\`: missing or invalid \`${missing}\` capability.`)}let chartJs,registered=!1;async function loadChartModule(importChart=()=>import("chart.js")){try{return resolveChartJsModule(await importChart())}catch(err){return console.warn("<lr-chart> needs the optional peer dependency `chart.js` — install it with `pnpm add chart.js`:",err),null}}function registerCore(mod){registered||(mod.Chart.register(mod.LineController,mod.BarController,mod.ScatterController,mod.DoughnutController,mod.PieController,mod.RadarController,mod.PolarAreaController,mod.BubbleController,mod.LineElement,mod.PointElement,mod.BarElement,mod.ArcElement,mod.LinearScale,mod.CategoryScale,mod.RadialLinearScale,mod.LogarithmicScale,mod.Filler,mod.Tooltip,mod.Legend),registered=!0)}async function loadAndRegisterChartModule(importChart=()=>import("chart.js"),register=registerCore){const mod=await loadChartModule(importChart);if(!mod)return null;try{return register(mod),mod}catch(error){return console.warn("<lr-chart> could not register the optional `chart.js` peer:",error),null}}function loadChartJs(){return chartJs||(chartJs=loadAndRegisterChartModule()),chartJs}export{loadAndRegisterChartModule,loadChartJs,loadChartModule};

package/dist/components/charts/chart/chart-feature-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,annotationResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` \u2014 charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled \u2014 charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` \u2014 charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}async function loadAnnotationPlugin(importAnnotation=()=>import("chartjs-plugin-annotation")){try{return resolveChartPlugin(await importAnnotation(),"chartjs-plugin-annotation")}catch(err){console.warn("<lr-chart> annotations need the optional peer dependency `chartjs-plugin-annotation` \u2014 charts still render without it, but the `annotations` property has no effect until it is installed with `pnpm add chartjs-plugin-annotation`:",err);return}}async function loadChartAndAnnotation(loadChart,importAnnotation=()=>import("chartjs-plugin-annotation")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadAnnotationPlugin(importAnnotation);if(!plugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(plugin)}catch(err){return console.warn("<lr-chart> annotations could not be enabled \u2014 charts still render without them, but the `annotations` property has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin}}function loadChartJsWithAnnotationResult(importAnnotation=()=>import("chartjs-plugin-annotation")){return annotationResultLoad??=loadChartAndAnnotation(loadChartJs,importAnnotation)}export{loadAnnotationPlugin,loadChartAndAnnotation,loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithAnnotationResult,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};
+import{resolveOptionalPeerCapability}from"../../../internal/optional-peer-capabilities.js";import{loadChartJs,loadChartModule}from"./chart-core-loader.js";import{notifyAnnotationPluginRegistered}from"../../../internal/chart-annotation-registration.js";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isChartPlugin(candidate){return isObjectLike(candidate)&&typeof candidate.id=="string"&&candidate.id.trim().length>0}function resolveChartPlugin(value,packageName){const plugin=resolveOptionalPeerCapability(value,isChartPlugin);if(plugin)return plugin;throw new Error(`Invalid optional peer \`${packageName}\`: expected a plugin with a non-empty string \`id\`.`)}let zoomResultLoad,dataLabelsResultLoad,annotationResultLoad,zoomLoad,dataLabelsLoad;async function loadChartAndZoom(importChart=()=>import("chart.js"),importZoom=()=>import("chartjs-plugin-zoom"),needsZoom=!1){const mod=await loadChartModule(importChart);if(!mod)return null;if(!needsZoom)return{mod,zoomPlugin:void 0};let zoomPlugin;try{zoomPlugin=resolveChartPlugin(await importZoom(),"chartjs-plugin-zoom")}catch(err){console.warn("<lr-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` — charts still render without it, but the `zoom` attribute has no effect until it is installed with `pnpm add chartjs-plugin-zoom`:",err)}return{mod,zoomPlugin}}async function loadChartAndRegisterZoom(loadChart,importZoom=()=>import("chartjs-plugin-zoom")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const zoomPlugin=(await loadChartAndZoom(()=>Promise.resolve(mod),importZoom,!0))?.zoomPlugin;if(!zoomPlugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(zoomPlugin)}catch(err){return console.warn("<lr-chart> zoom support could not be enabled — charts still render without it, but the `zoom` attribute has no effect:",err),{kind:"feature-unavailable",mod}}return{kind:"available",mod,plugin:zoomPlugin}}function loadChartJsWithZoomResult(importZoom=()=>import("chartjs-plugin-zoom")){return zoomResultLoad??=loadChartAndRegisterZoom(loadChartJs,importZoom)}function loadChartJsWithZoom(importZoom=()=>import("chartjs-plugin-zoom")){return zoomLoad??=loadChartJsWithZoomResult(importZoom).then(result=>result.kind==="core-unavailable"?null:result.mod)}async function loadDataLabelsPlugin(importDataLabels=()=>import("chartjs-plugin-datalabels")){try{return resolveChartPlugin(await importDataLabels(),"chartjs-plugin-datalabels")}catch(err){console.warn("<lr-chart> data labels need the optional peer dependency `chartjs-plugin-datalabels` — charts still render without it, but the `data-labels`/`stack-totals` attributes have no effect until it is installed with `pnpm add chartjs-plugin-datalabels`:",err);return}}async function loadChartAndDataLabels(loadChart,importDataLabels=()=>import("chartjs-plugin-datalabels")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadDataLabelsPlugin(importDataLabels);return plugin?{kind:"available",mod,plugin}:{kind:"feature-unavailable",mod}}function loadChartJsWithDataLabelsResult(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsResultLoad??=loadChartAndDataLabels(loadChartJs,importDataLabels)}function loadChartJsWithDataLabels(importDataLabels=()=>import("chartjs-plugin-datalabels")){return dataLabelsLoad??=loadChartJsWithDataLabelsResult(importDataLabels).then(result=>result.kind==="core-unavailable"?null:{mod:result.mod,plugin:result.kind==="available"?result.plugin:void 0})}async function loadAnnotationPlugin(importAnnotation=()=>import("chartjs-plugin-annotation")){try{return resolveChartPlugin(await importAnnotation(),"chartjs-plugin-annotation")}catch(err){console.warn("<lr-chart> annotations need the optional peer dependency `chartjs-plugin-annotation` — charts still render without it, but the `annotations` property has no effect until it is installed with `pnpm add chartjs-plugin-annotation`:",err);return}}async function loadChartAndAnnotation(loadChart,importAnnotation=()=>import("chartjs-plugin-annotation")){const mod=await loadChart();if(!mod)return{kind:"core-unavailable"};const plugin=await loadAnnotationPlugin(importAnnotation);if(!plugin)return{kind:"feature-unavailable",mod};try{mod.Chart.register(plugin)}catch(err){return console.warn("<lr-chart> annotations could not be enabled — charts still render without them, but the `annotations` property has no effect:",err),{kind:"feature-unavailable",mod}}return notifyAnnotationPluginRegistered(),{kind:"available",mod,plugin}}function loadChartJsWithAnnotationResult(importAnnotation=()=>import("chartjs-plugin-annotation")){return annotationResultLoad??=loadChartAndAnnotation(loadChartJs,importAnnotation)}export{loadAnnotationPlugin,loadChartAndAnnotation,loadChartAndDataLabels,loadChartAndRegisterZoom,loadChartAndZoom,loadChartJsWithAnnotationResult,loadChartJsWithDataLabels,loadChartJsWithDataLabelsResult,loadChartJsWithZoom,loadChartJsWithZoomResult,loadDataLabelsPlugin};

package/dist/components/charts/chart/chart-preload.d.ts

@@ -1,4 +1,4 @@
-export interface LyraChartPreloadOptions{readonly zoom?:boolean;readonly dataLabels?:boolean;readonly boxPlot?:boolean;}export interface LyraChartPreloadResult{readonly core:boolean;readonly zoom?:boolean;readonly dataLabels?:boolean;readonly boxPlot?:boolean;}
+export interface LyraChartPreloadOptions{readonly zoom?:boolean;readonly dataLabels?:boolean;readonly annotations?:boolean;readonly boxPlot?:boolean;}export interface LyraChartPreloadResult{readonly core:boolean;readonly zoom?:boolean;readonly dataLabels?:boolean;readonly annotations?:boolean;readonly boxPlot?:boolean;}
 /**
 * Preloads the chart peer capabilities a route is about to use. Core Chart.js is always loaded;
 * optional feature peers are requested only when their corresponding flag is true. Every loader

package/dist/components/charts/chart/chart-preload.js

@@ -1 +1 @@
-import{loadChartJs}from"./chart-core-loader.js";import{loadChartJsWithDataLabelsResult,loadChartJsWithZoomResult}from"./chart-feature-loader.js";let boxPlotPreload;async function preloadBoxPlot(){const{loadBoxPlotAndRegister}=await import("./box-plot.class.js");return await loadBoxPlotAndRegister()!==null}async function preloadCharts(options={}){const[core,zoom,dataLabels,boxPlot]=await Promise.all([loadChartJs(),options.zoom?loadChartJsWithZoomResult():void 0,options.dataLabels?loadChartJsWithDataLabelsResult():void 0,options.boxPlot?boxPlotPreload??=preloadBoxPlot():void 0]);return{core:core!==null,...options.zoom?{zoom:zoom?.kind==="available"}:{},...options.dataLabels?{dataLabels:dataLabels?.kind==="available"}:{},...options.boxPlot?{boxPlot}:{}}}export{preloadCharts};
+import{loadChartJs}from"./chart-core-loader.js";import{loadChartJsWithAnnotationResult,loadChartJsWithDataLabelsResult,loadChartJsWithZoomResult}from"./chart-feature-loader.js";let boxPlotPreload;async function preloadBoxPlot(){const{loadBoxPlotAndRegister}=await import("./box-plot.class.js");return await loadBoxPlotAndRegister()!==null}async function preloadCharts(options={}){const[core,zoom,dataLabels,annotations,boxPlot]=await Promise.all([loadChartJs(),options.zoom?loadChartJsWithZoomResult():void 0,options.dataLabels?loadChartJsWithDataLabelsResult():void 0,options.annotations?loadChartJsWithAnnotationResult():void 0,options.boxPlot?boxPlotPreload??=preloadBoxPlot():void 0]);return{core:core!==null,...options.zoom?{zoom:zoom?.kind==="available"}:{},...options.dataLabels?{dataLabels:dataLabels?.kind==="available"}:{},...options.annotations?{annotations:annotations?.kind==="available"}:{},...options.boxPlot?{boxPlot}:{}}}export{preloadCharts};

package/dist/components/charts/chart/chart.class.d.ts

@@ -16,7 +16,8 @@ readonly pointRadius?:number|readonly number[];
 * Per-segment (the line between two consecutive points) border color, indexed by the
 * *starting* point of each segment — e.g. `['red', 'green']` on 3 points colors the first
 * segment red and the second green. Wired to Chart.js's `segment.borderColor`, and cycled
-* when shorter than the segment count. Only meaningful for line-type series.
+* when shorter than the segment count. Sampled segments retain the original source starting
+* point's palette index. Only meaningful for line-type series.
 */
 readonly segmentColors?:readonly string[];readonly type?:'line'|'bar';}export type LyraChartType='line'|'bar'|'scatter'|'pie'|'doughnut'|'radar'|'polarArea'|'bubble';export type LyraChartGrid='x'|'y'|'both'|'none';export type LyraChartIndexAxis='x'|'y';
 /** Scale type for a chart's value axis. The categorical axis is never affected. */
@@ -29,7 +30,9 @@ export type LyraChartScaleType='linear'|'logarithmic';
 * numbers, is dropped rather than handed to Chart.js, where it would silently render nothing or
 * throw. `axis` defaults to `'y'`, the value axis for the common threshold case.
 */
-export interface LyraChartAnnotation{readonly axis?:LyraChartIndexAxis;readonly value?:number;readonly from?:number;readonly to?:number;readonly label?:string;readonly tone?:LyraVariant;}export type LyraChartLayoutPosition='left'|'top'|'right'|'bottom'|'center'|'chartArea'|{[scaleId:string]:number;};export type LyraChartLegendPosition=LyraChartLayoutPosition|'start'|'end'|'auto';export type LyraChartValueFormatterContext='tick'|'tooltip'|'legend'|'table';export type LyraChartValueFormatter=(value:number,context:LyraChartValueFormatterContext)=>string;export type LyraChartFormatSurface=LyraChartValueFormatterContext|'visual'|'spoken'|'export';export interface LyraChartFormatterContext{readonly value:number;readonly surface:LyraChartFormatSurface;readonly datasetIndex?:number;readonly index?:number;readonly label?:string;readonly seriesLabel?:string;readonly statistic?:'min'|'q1'|'median'|'q3'|'max'|'total';}export type LyraChartFormatter=(context:LyraChartFormatterContext)=>string;export type LyraChartExportFormat='csv'|'png';export interface LyraChartArea{readonly top:number;readonly left:number;readonly right:number;readonly bottom:number;readonly width:number;readonly height:number;}
+export interface LyraChartAnnotation{readonly axis?:LyraChartIndexAxis;readonly value?:number;readonly from?:number;readonly to?:number;readonly label?:string;readonly tone?:LyraVariant;}export type LyraChartLayoutPosition='left'|'top'|'right'|'bottom'|'center'|'chartArea'|{[scaleId:string]:number;};export type LyraChartLegendPosition=LyraChartLayoutPosition|'start'|'end'|'auto';export type LyraChartValueFormatterContext='tick'|'tooltip'|'legend'|'table';export type LyraChartValueFormatter=(value:number,context:LyraChartValueFormatterContext)=>string;export type LyraChartFormatSurface=LyraChartValueFormatterContext|'visual'|'spoken'|'export';
+/** Identifies which numeric component of a structured datum the formatter receives. */
+export type LyraChartStatistic='x'|'y'|'r'|'min'|'q1'|'median'|'q3'|'max'|'total';export interface LyraChartFormatterContext{readonly value:number;readonly surface:LyraChartFormatSurface;readonly datasetIndex?:number;readonly index?:number;readonly label?:string;readonly seriesLabel?:string;readonly statistic?:LyraChartStatistic;}export type LyraChartFormatter=(context:LyraChartFormatterContext)=>string;export type LyraChartExportFormat='csv'|'png';export interface LyraChartArea{readonly top:number;readonly left:number;readonly right:number;readonly bottom:number;readonly width:number;readonly height:number;}
 /** A Chart.js-compatible plugin shape without making `chart.js` a type dependency for consumers. */
 export interface LyraChartPlugin{readonly id:string;}
 /** Dataset configuration accepted by the raw `config` passthrough. */
@@ -55,6 +58,8 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * are independent implementations. Requires the optional peer dep `chart.js`; `chartjs-plugin-zoom`
 * (for `zoom`) and `chartjs-plugin-datalabels` (for `data-labels`/`stack-totals`)
 * are further optional peers loaded only on demand.
+* With IntersectionObserver available, canvas construction waits for the first delivered
+* visibility decision; without it, drawing starts as soon as the peer and canvas are ready.
 *
 * **API mirror note:** the real `wa-chart` docs page
 * (https://webawesome.com/docs/components/chart/) documents a `config:
@@ -139,7 +144,9 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * @cssprop [--lr-chart-tooltip-text=var(--lr-color-text)] - Tooltip text color. Resolved via
 *   `getComputedStyle` on every draw.
 * @cssprop [--lr-chart-canvas-hover-outline-width=var(--lr-border-width-thin)] - Width of the
-*   `[part='canvas']` hover-state outline (its color is `--lr-chart-grid-color`, above).
+*   `[part='canvas']` hover-state outline.
+* @cssprop [--lr-chart-canvas-hover-outline-color=var(--lr-chart-grid-color)] - Color of the
+*   `[part='canvas']` hover-state outline.
 * @cssprop [--lr-chart-pattern-step=var(--lr-space-2xs)] - Tile size of the texture painted on
 *   `[part='legend-swatch']` while `forced-colors: active` matches, where every series collapses to
 *   one system color and the stripe/crosshatch pattern becomes the only channel keeping series
@@ -172,7 +179,9 @@ export interface LyraChartDatumActivateDetail<TKind extends LyraChartDatumKind=L
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();type:LyraChartType;labels:string[];private _datasets;private datasetsSource;
+export declare class LyraChart extends LyraElement<LyraChartEventMap>{protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];constructor();type:LyraChartType;labels:string[];private labelsSnapshot?;private annotationsSnapshot?;private hiddenDatasetsSnapshot?;
+/** Public collection identities remain observable; internal computation uses these one-read copies. */
+private canonicalLabels;private canonicalAnnotations;private canonicalHiddenDatasets;private _datasets;private datasetsSource;
 /** Simplified chart series. Non-record entries are dropped while valid sibling series remain. */
 get datasets():readonly LyraChartSeries[];set datasets(value:readonly LyraChartSeries[]);
 /**
@@ -235,12 +244,15 @@ annotations:readonly LyraChartAnnotation[];
 /** Maximum value-axis bound. Non-finite values are ignored. */
 max:number|null;
 /** Minimum value-axis bound. Non-finite values are ignored. */
-min:number|null;
-/** Chart.js plugins attached to this chart instance. */
-plugins:LyraChartPlugin[];
+min:number|null;private _plugins;private pluginsSource;
+/** Chart.js plugins attached to this chart instance. Valid plugins retain their opaque identity.
+* @default [] */
+get plugins():readonly LyraChartPlugin[];set plugins(value:readonly LyraChartPlugin[]);
 /**
 * Formats numeric (value-axis) ticks, tooltip values, legend values, and generated accessible
 * table cells from one callback.
+* Horizontal scalar tooltips use parsed x, including a raw config indexAxis override;
+* structured points retain their y-value contract. The context-object formatter shares this rule.
 * Never runs against the categorical x-axis's own labels (line/bar's `labels` strings) —
 * Chart.js's category scale passes the tick index to `ticks.callback`, not the label text,
 * so formatting it would corrupt the axis.
@@ -316,7 +328,7 @@ stackTotals:boolean;
 * model for canvas rendering, append mutation, CSV export, the accessible name/summary, keyboard
 * navigation/events, the DOM legend, and the fallback data table.
 */
-config?:LyraChartConfiguration;private slottedConfig?;
+private _config?;private configSource;get config():LyraChartConfiguration|undefined;set config(value:LyraChartConfiguration|undefined);private slottedConfig?;
 /** Subclass hook for removing raw peer keys that contradict a derived public contract. */
 protected normalizeEffectiveConfig(config:LyraChartConfiguration|undefined):LyraChartConfiguration|undefined;private effectiveConfig;private onConfigSlotChange;
 /**
@@ -325,6 +337,10 @@ protected normalizeEffectiveConfig(config:LyraChartConfiguration|undefined):Lyra
 * while an omitted member falls back to the simplified property surface.
 */
 private effectiveData;
+/** Validates peer callback indexes against the visual data sent to Chart.js. */
+private callbackDatasetIndex;
+/** Validates a peer callback's visual row as well as its visual dataset. */
+private callbackIndexes;
 /** The public controlled snapshot when supplied, otherwise the effective configuration default. */
 private effectiveHiddenDatasetIndexes;
 /** Applies the public controlled state to the live Chart.js metadata after any data replacement. */
@@ -348,7 +364,7 @@ private loading;
 * True once the optional `chart.js` peer failed to load (not installed) -- `render()` fails
 * closed into a visible `part="error"` and announces through the document-level sink.
 */
-private loadFailed;private loadLibrary;private loadZoomFeature;private loadDataLabelsFeature;private loadAnnotationFeature;private loadGeneration;private zoomLoadGeneration;private dataLabelsLoadGeneration;private annotationLoadGeneration;private zoomFeatureState;private dataLabelsFeatureState;private annotationFeatureState;private dataLabelsPlugin?;private annotationPlugin?;private zoomed;private visible;private intersectionObserver?;private intersectionGeneration;private reducedMotionQuery?;private reducedMotionWindow?;private canvasEl?;
+private loadFailed;private loadLibrary;private loadZoomFeature;private loadDataLabelsFeature;private loadAnnotationFeature;private loadGeneration;private zoomLoadGeneration;private dataLabelsLoadGeneration;private annotationLoadGeneration;private zoomFeatureState;private dataLabelsFeatureState;private annotationFeatureState;private dataLabelsPlugin?;private annotationPlugin?;private stopAnnotationRegistrationWatch?;private zoomed;private visible;private intersectionObserver?;private intersectionGeneration;private reducedMotionQuery?;private reducedMotionWindow?;private canvasEl?;
 /** The current Chart.js instance. Read it only while the element is connected and loaded. */
 chart?:LyraChartInstance;private chartJsModule?;private resizeObserver?;private resizeDrawFrame?;private resizeDrawFrameOwner?;private lastObservedInlineSize?;private autoLegendPosition;private resolvedChartArea?;private chartAreaUpdateQueued;private builtType?;private builtPlugins;private visualDatasetSourceIndexes?;private visualRowSourceIndexes?;private suppressZoomComplete;private descriptionId;private keyboardDatumIndex;private keyboardDatumAnnouncement;
 /** Shared document-level regions that carry announcements. The visually hidden datum copy is an
@@ -375,7 +391,14 @@ private applyDataLabelsPlugin;private get zoomFeatureAvailable();private feature
 * through `chart.update()`. Force reconstruction so the next `draw()` takes the `new Chart()`
 * branch that reads `config.plugins`.
 */
-private applyAnnotationPlugin;private requestDataLabelsFeature;
+private applyAnnotationPlugin;
+/**
+* `chartjs-plugin-annotation` creates its per-chart state only in `beforeInit`, so once it is
+* registered globally every chart constructed earlier throws inside the plugin on its next
+* update. A chart that requested the feature rebuilds through `applyAnnotationPlugin()`; every
+* other live chart rebuilds here so a sibling's annotations cannot break it.
+*/
+private rebuildAfterAnnotationRegistration;private requestDataLabelsFeature;
 /**
 * Resets a stale `zoomed` flag before the render pass that's about to call
 * `draw()`: a `type` (or `config.type` override) change that lands on a