@emuanalytics/flow-rdf-ui 0.0.18 → 0.0.19

package/dist/custom-elements.json

@@ -1847,12 +1847,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowBreadcrumb",
+          "name": "FlowBadge",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -1861,85 +1861,83 @@
           ],
           "slots": [
             {
-              "description": "One or more breadcrumb items to display.",
+              "description": "The badge's content.",
               "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
-              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "pill",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "separatorSlot",
+              "name": "pulse",
               "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "label",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "name": "pulse",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "superclass": {
             "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
           },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
           "status": "stable",
           "since": "2.0",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "tagName": "flow-ui-breadcrumb",
+          "tagName": "flow-ui-badge",
           "customElement": true
         }
       ],
@@ -1948,28 +1946,28 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "FlowBadge",
+            "module": "components/badge/badge.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "flow-ui-breadcrumb",
+          "name": "flow-ui-badge",
           "declaration": {
-            "name": "FlowBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "FlowBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.js",
+      "path": "components/breadcrumb/breadcrumb.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowBadge",
+          "name": "FlowBreadcrumb",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -1978,83 +1976,85 @@
           ],
           "slots": [
             {
-              "description": "The badge's content.",
+              "description": "One or more breadcrumb items to display.",
               "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
+              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "name": "separatorDir",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "pulse",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+                "text": "HTMLSlotElement"
+              }
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "separatorSlot",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "name": "pill",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
             },
             {
-              "name": "pulse",
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
             "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
           },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
           "status": "stable",
           "since": "2.0",
-          "tagName": "flow-ui-badge",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "tagName": "flow-ui-breadcrumb",
           "customElement": true
         }
       ],
@@ -2063,16 +2063,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowBadge",
-            "module": "components/badge/badge.js"
+            "name": "FlowBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "flow-ui-badge",
+          "name": "flow-ui-breadcrumb",
           "declaration": {
-            "name": "FlowBadge",
-            "module": "components/badge/badge.js"
+            "name": "FlowBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
           }
         }
       ]
@@ -19589,6 +19589,52 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/visually-hidden/visually-hidden.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowVisuallyHidden",
+          "slots": [
+            {
+              "description": "The content to be visually hidden.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "summary": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/visually-hidden",
+          "status": "stable",
+          "since": "2.0",
+          "tagName": "flow-ui-visually-hidden",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowVisuallyHidden",
+            "module": "components/visually-hidden/visually-hidden.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "flow-ui-visually-hidden",
+          "declaration": {
+            "name": "FlowVisuallyHidden",
+            "module": "components/visually-hidden/visually-hidden.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tree-item/tree-item.js",
@@ -19992,52 +20038,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/visually-hidden/visually-hidden.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowVisuallyHidden",
-          "slots": [
-            {
-              "description": "The content to be visually hidden.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "summary": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/visually-hidden",
-          "status": "stable",
-          "since": "2.0",
-          "tagName": "flow-ui-visually-hidden",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowVisuallyHidden",
-            "module": "components/visually-hidden/visually-hidden.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "flow-ui-visually-hidden",
-          "declaration": {
-            "name": "FlowVisuallyHidden",
-            "module": "components/visually-hidden/visually-hidden.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/chart/chartjs-plugins/dayjs.adapter.js",
@@ -20267,6 +20267,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "0.0.18"
+    "version": "0.0.19"
   }
 }

package/dist/flow-rdf-ui.d.ts

@@ -6,6 +6,7 @@ import { ChartOptions } from 'chart.js';
 import { ChartTypeRegistry } from 'chart.js';
 import { CSSResultGroup } from 'lit';
 import { LitElement } from 'lit';
+import { MatrixDataPoint } from 'chartjs-chart-matrix';
 import { Plugin as Plugin_2 } from 'chart.js';
 import { Point } from 'chart.js';
 import { PropertyValueMap } from 'lit';
@@ -691,7 +692,7 @@ export declare class FlowChart extends FlowRdfElement {
     private _chartRef;
     private _chart;
     /** The Chart.js chart instance. */
-    get chart(): ChartJs<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>;
+    get chart(): ChartJs<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | MatrixDataPoint | null)[], unknown>;
     /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
     type: string;
     /** The Chart.js `options` object. */

package/dist/flow-rdf-ui.js

@@ -1,4 +1,10 @@
-import { defaults as defaults$1, Chart, Element as Element$1, Animations, _adapters, DoughnutController, PolarAreaController, Scale, LinearScale, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from "chart.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { DatasetController, Element as Element$1, defaults as defaults$1, Chart, Animations, _adapters, DoughnutController, PolarAreaController, Scale, LinearScale, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from "chart.js";
 import { Chart as Chart2 } from "chart.js";
 /**
  * @license
@@ -8081,7 +8087,7 @@ const styles$I = i$8`
     position: relative;
     width: 100%;
     height: 100%;
-    padding: var(--flow-ui-spacing-x-small);
+    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
 /*!
@@ -9236,6 +9242,216 @@ function _isDomSupported() {
   }
   return passiveSupported;
 })();
+/*!
+ * chartjs-chart-matrix v2.0.1
+ * https://chartjs-chart-matrix.pages.dev/
+ * (c) 2023 Jukka Kurkela
+ * Released under the MIT license
+ */
+var version$2 = "2.0.1";
+class MatrixController extends DatasetController {
+  initialize() {
+    this.enableOptionSharing = true;
+    super.initialize();
+  }
+  update(mode) {
+    const me = this;
+    const meta = me._cachedMeta;
+    me.updateElements(meta.data, 0, meta.data.length, mode);
+  }
+  updateElements(rects, start, count, mode) {
+    const me = this;
+    const reset = mode === "reset";
+    const { xScale, yScale } = me._cachedMeta;
+    const firstOpts = me.resolveDataElementOptions(start, mode);
+    const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
+    for (let i3 = start; i3 < start + count; i3++) {
+      const parsed = !reset && me.getParsed(i3);
+      const x2 = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+      const y2 = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+      const options = me.resolveDataElementOptions(i3, mode);
+      const { width, height, anchorX, anchorY } = options;
+      const properties = {
+        x: resolveX(anchorX, x2, width),
+        y: resolveY(anchorY, y2, height),
+        width,
+        height,
+        options
+      };
+      me.updateElement(rects[i3], i3, properties, mode);
+    }
+    me.updateSharedOptions(sharedOptions, mode);
+  }
+  draw() {
+    const me = this;
+    const data = me.getMeta().data || [];
+    let i3, ilen;
+    for (i3 = 0, ilen = data.length; i3 < ilen; ++i3) {
+      data[i3].draw(me._ctx);
+    }
+  }
+}
+__publicField(MatrixController, "id", "matrix");
+__publicField(MatrixController, "version", version$2);
+__publicField(MatrixController, "defaults", {
+  dataElementType: "matrix",
+  animations: {
+    numbers: {
+      type: "number",
+      properties: ["x", "y", "width", "height"]
+    }
+  }
+});
+__publicField(MatrixController, "overrides", {
+  interaction: {
+    mode: "nearest",
+    intersect: true
+  },
+  scales: {
+    x: {
+      type: "linear",
+      offset: true
+    },
+    y: {
+      type: "linear",
+      reverse: true
+    }
+  }
+});
+function resolveX(anchorX, x2, width) {
+  if (anchorX === "left" || anchorX === "start") {
+    return x2;
+  }
+  if (anchorX === "right" || anchorX === "end") {
+    return x2 - width;
+  }
+  return x2 - width / 2;
+}
+function resolveY(anchorY, y2, height) {
+  if (anchorY === "top" || anchorY === "start") {
+    return y2;
+  }
+  if (anchorY === "bottom" || anchorY === "end") {
+    return y2 - height;
+  }
+  return y2 - height / 2;
+}
+function getBounds(rect, useFinalPosition) {
+  const { x: x2, y: y2, width, height } = rect.getProps(["x", "y", "width", "height"], useFinalPosition);
+  return { left: x2, top: y2, right: x2 + width, bottom: y2 + height };
+}
+function limit(value, min2, max2) {
+  return Math.max(Math.min(value, max2), min2);
+}
+function parseBorderWidth(rect, maxW, maxH) {
+  const value = rect.options.borderWidth;
+  let t2, r2, b2, l2;
+  if (isObject$1(value)) {
+    t2 = +value.top || 0;
+    r2 = +value.right || 0;
+    b2 = +value.bottom || 0;
+    l2 = +value.left || 0;
+  } else {
+    t2 = r2 = b2 = l2 = +value || 0;
+  }
+  return {
+    t: limit(t2, 0, maxH),
+    r: limit(r2, 0, maxW),
+    b: limit(b2, 0, maxH),
+    l: limit(l2, 0, maxW)
+  };
+}
+function boundingRects(rect) {
+  const bounds = getBounds(rect);
+  const width = bounds.right - bounds.left;
+  const height = bounds.bottom - bounds.top;
+  const border = parseBorderWidth(rect, width / 2, height / 2);
+  return {
+    outer: {
+      x: bounds.left,
+      y: bounds.top,
+      w: width,
+      h: height
+    },
+    inner: {
+      x: bounds.left + border.l,
+      y: bounds.top + border.t,
+      w: width - border.l - border.r,
+      h: height - border.t - border.b
+    }
+  };
+}
+function inRange(rect, x2, y2, useFinalPosition) {
+  const skipX = x2 === null;
+  const skipY = y2 === null;
+  const bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
+  return bounds && (skipX || x2 >= bounds.left && x2 <= bounds.right) && (skipY || y2 >= bounds.top && y2 <= bounds.bottom);
+}
+class MatrixElement extends Element$1 {
+  constructor(cfg) {
+    super();
+    this.options = void 0;
+    this.width = void 0;
+    this.height = void 0;
+    if (cfg) {
+      Object.assign(this, cfg);
+    }
+  }
+  draw(ctx) {
+    const options = this.options;
+    const { inner, outer } = boundingRects(this);
+    const radius = toTRBLCorners(options.borderRadius);
+    ctx.save();
+    if (outer.w !== inner.w || outer.h !== inner.h) {
+      ctx.beginPath();
+      addRoundedRectPath(ctx, { x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius });
+      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fill();
+      ctx.fillStyle = options.borderColor;
+      ctx.fill("evenodd");
+    } else {
+      ctx.beginPath();
+      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+  inRange(mouseX, mouseY, useFinalPosition) {
+    return inRange(this, mouseX, mouseY, useFinalPosition);
+  }
+  inXRange(mouseX, useFinalPosition) {
+    return inRange(this, mouseX, null, useFinalPosition);
+  }
+  inYRange(mouseY, useFinalPosition) {
+    return inRange(this, null, mouseY, useFinalPosition);
+  }
+  getCenterPoint(useFinalPosition) {
+    const { x: x2, y: y2, width, height } = this.getProps(["x", "y", "width", "height"], useFinalPosition);
+    return {
+      x: x2 + width / 2,
+      y: y2 + height / 2
+    };
+  }
+  tooltipPosition() {
+    return this.getCenterPoint();
+  }
+  getRange(axis) {
+    return axis === "x" ? this.width / 2 : this.height / 2;
+  }
+}
+__publicField(MatrixElement, "id", "matrix");
+__publicField(MatrixElement, "defaults", {
+  backgroundColor: void 0,
+  borderColor: void 0,
+  borderWidth: void 0,
+  borderRadius: 0,
+  anchorX: "center",
+  anchorY: "center",
+  width: 20,
+  height: 20
+});
 /*!
 * chartjs-plugin-annotation v3.0.1
 * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -10044,15 +10260,15 @@ function verifyScaleOptions(annotations, scales) {
     verifyScaleIDs(annotation2, scales);
   }
 }
-function changeScaleLimit(scale, range, limit, suggestedLimit) {
-  if (isNumberFinite(range[limit]) && !scaleLimitDefined(scale.options, limit, suggestedLimit)) {
-    const changed = scale[limit] !== range[limit];
-    scale[limit] = range[limit];
+function changeScaleLimit(scale, range, limit2, suggestedLimit) {
+  if (isNumberFinite(range[limit2]) && !scaleLimitDefined(scale.options, limit2, suggestedLimit)) {
+    const changed = scale[limit2] !== range[limit2];
+    scale[limit2] = range[limit2];
     return changed;
   }
 }
-function scaleLimitDefined(scaleOptions, limit, suggestedLimit) {
-  return defined(scaleOptions[limit]) || defined(scaleOptions[suggestedLimit]);
+function scaleLimitDefined(scaleOptions, limit2, suggestedLimit) {
+  return defined(scaleOptions[limit2]) || defined(scaleOptions[suggestedLimit]);
 }
 function verifyScaleIDs(annotation2, scales) {
   for (const key of ["scaleID", "xScaleID", "yScaleID"]) {
@@ -10621,8 +10837,8 @@ LineAnnotation.defaultRoutes = {
   borderColor: "color"
 };
 function inAxisRange(element, { mouseX, mouseY }, axis, { hBorderWidth, useFinalPosition }) {
-  const limit = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
-  return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
+  const limit2 = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
+  return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
 }
 function isLineInArea({ x: x2, y: y2, x2: x22, y2: y22 }, { top, right, bottom, left }) {
   return !(x2 < left && x22 < left || x2 > right && x22 > right || y2 < top && y22 < top || y2 > bottom && y22 > bottom);
@@ -10861,9 +11077,9 @@ class EllipseAnnotation extends Element$1 {
     }
     const { x: x2, y: y2, x2: x22, y2: y22 } = this.getProps(["x", "y", "x2", "y2"], useFinalPosition);
     const hBorderWidth = borderWidth / 2;
-    const limit = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
+    const limit2 = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
     const rotatedPoint = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians(-rotation));
-    return rotatedPoint[axis] >= limit.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit.end + hBorderWidth + EPSILON;
+    return rotatedPoint[axis] >= limit2.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit2.end + hBorderWidth + EPSILON;
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -10946,8 +11162,8 @@ class PointAnnotation extends Element$1 {
       return inPointRange({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), width / 2, borderWidth);
     }
     const hBorderWidth = borderWidth / 2;
-    const limit = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
-    return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth;
+    const limit2 = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
+    return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth;
   }
   getCenterPoint(useFinalPosition) {
     return getElementCenterPoint(this, useFinalPosition);
@@ -13166,16 +13382,27 @@ function initializeChartJs() {
     Legend,
     Tooltip,
     Title,
-    annotation
+    annotation,
+    MatrixController,
+    MatrixElement
   );
   Tooltip.positioners.cursor = CursorPositioner;
   Interaction.modes.interpolate = Interpolate;
   Chart.defaults.animation = false;
   Chart.defaults.responsive = true;
   Chart.defaults.maintainAspectRatio = false;
+  Chart.defaults.layout.padding = {
+    top: 5,
+    right: 10,
+    bottom: 5,
+    left: 5
+  };
   Chart.defaults.plugins.legend.position = "bottom";
   Chart.defaults.plugins.legend.align = "start";
   Chart.defaults.plugins.tooltip.position = "cursor";
+  Chart.defaults.plugins.title.font = { size: 12 };
+  Chart.defaults.plugins.title.align = "start";
+  Chart.defaults.plugins.title.padding = { top: 0, bottom: 10 };
 }
 function registerChartComponent(...components) {
   Chart.register(...components);
@@ -31526,7 +31753,7 @@ const styles = i$8`
   }
 
 `;
-var __defProp = Object.defineProperty;
+var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -31534,7 +31761,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp(target, key, result);
+    __defProp2(target, key, result);
   return result;
 };
 class FlowToolButton extends FlowRdfElement {
@@ -31743,7 +31970,7 @@ const translation = {
   toggleColorFormat: "Toggle color format"
 };
 registerTranslation(translation);
-const version = "0.0.18";
+const version = "0.0.19";
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;

package/dist/flow-rdf-ui.umd.cjs

@@ -1,7 +1,13 @@
 (function(global2, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("chart.js")) : typeof define === "function" && define.amd ? define(["exports", "chart.js"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.FlowRDFUI = {}, global2.ChartJS));
 })(this, function(exports2, chart_js) {
-  "use strict";
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
   /**
    * @license
    * Copyright 2019 Google LLC
@@ -8083,7 +8089,7 @@
     position: relative;
     width: 100%;
     height: 100%;
-    padding: var(--flow-ui-spacing-x-small);
+    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
   /*!
@@ -9238,6 +9244,216 @@
     }
     return passiveSupported;
   })();
+  /*!
+   * chartjs-chart-matrix v2.0.1
+   * https://chartjs-chart-matrix.pages.dev/
+   * (c) 2023 Jukka Kurkela
+   * Released under the MIT license
+   */
+  var version$2 = "2.0.1";
+  class MatrixController extends chart_js.DatasetController {
+    initialize() {
+      this.enableOptionSharing = true;
+      super.initialize();
+    }
+    update(mode) {
+      const me = this;
+      const meta = me._cachedMeta;
+      me.updateElements(meta.data, 0, meta.data.length, mode);
+    }
+    updateElements(rects, start, count, mode) {
+      const me = this;
+      const reset = mode === "reset";
+      const { xScale, yScale } = me._cachedMeta;
+      const firstOpts = me.resolveDataElementOptions(start, mode);
+      const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
+      for (let i2 = start; i2 < start + count; i2++) {
+        const parsed = !reset && me.getParsed(i2);
+        const x2 = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+        const y2 = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+        const options = me.resolveDataElementOptions(i2, mode);
+        const { width, height, anchorX, anchorY } = options;
+        const properties = {
+          x: resolveX(anchorX, x2, width),
+          y: resolveY(anchorY, y2, height),
+          width,
+          height,
+          options
+        };
+        me.updateElement(rects[i2], i2, properties, mode);
+      }
+      me.updateSharedOptions(sharedOptions, mode);
+    }
+    draw() {
+      const me = this;
+      const data = me.getMeta().data || [];
+      let i2, ilen;
+      for (i2 = 0, ilen = data.length; i2 < ilen; ++i2) {
+        data[i2].draw(me._ctx);
+      }
+    }
+  }
+  __publicField(MatrixController, "id", "matrix");
+  __publicField(MatrixController, "version", version$2);
+  __publicField(MatrixController, "defaults", {
+    dataElementType: "matrix",
+    animations: {
+      numbers: {
+        type: "number",
+        properties: ["x", "y", "width", "height"]
+      }
+    }
+  });
+  __publicField(MatrixController, "overrides", {
+    interaction: {
+      mode: "nearest",
+      intersect: true
+    },
+    scales: {
+      x: {
+        type: "linear",
+        offset: true
+      },
+      y: {
+        type: "linear",
+        reverse: true
+      }
+    }
+  });
+  function resolveX(anchorX, x2, width) {
+    if (anchorX === "left" || anchorX === "start") {
+      return x2;
+    }
+    if (anchorX === "right" || anchorX === "end") {
+      return x2 - width;
+    }
+    return x2 - width / 2;
+  }
+  function resolveY(anchorY, y2, height) {
+    if (anchorY === "top" || anchorY === "start") {
+      return y2;
+    }
+    if (anchorY === "bottom" || anchorY === "end") {
+      return y2 - height;
+    }
+    return y2 - height / 2;
+  }
+  function getBounds(rect, useFinalPosition) {
+    const { x: x2, y: y2, width, height } = rect.getProps(["x", "y", "width", "height"], useFinalPosition);
+    return { left: x2, top: y2, right: x2 + width, bottom: y2 + height };
+  }
+  function limit(value, min2, max2) {
+    return Math.max(Math.min(value, max2), min2);
+  }
+  function parseBorderWidth(rect, maxW, maxH) {
+    const value = rect.options.borderWidth;
+    let t2, r2, b2, l2;
+    if (isObject$1(value)) {
+      t2 = +value.top || 0;
+      r2 = +value.right || 0;
+      b2 = +value.bottom || 0;
+      l2 = +value.left || 0;
+    } else {
+      t2 = r2 = b2 = l2 = +value || 0;
+    }
+    return {
+      t: limit(t2, 0, maxH),
+      r: limit(r2, 0, maxW),
+      b: limit(b2, 0, maxH),
+      l: limit(l2, 0, maxW)
+    };
+  }
+  function boundingRects(rect) {
+    const bounds = getBounds(rect);
+    const width = bounds.right - bounds.left;
+    const height = bounds.bottom - bounds.top;
+    const border = parseBorderWidth(rect, width / 2, height / 2);
+    return {
+      outer: {
+        x: bounds.left,
+        y: bounds.top,
+        w: width,
+        h: height
+      },
+      inner: {
+        x: bounds.left + border.l,
+        y: bounds.top + border.t,
+        w: width - border.l - border.r,
+        h: height - border.t - border.b
+      }
+    };
+  }
+  function inRange(rect, x2, y2, useFinalPosition) {
+    const skipX = x2 === null;
+    const skipY = y2 === null;
+    const bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
+    return bounds && (skipX || x2 >= bounds.left && x2 <= bounds.right) && (skipY || y2 >= bounds.top && y2 <= bounds.bottom);
+  }
+  class MatrixElement extends chart_js.Element {
+    constructor(cfg) {
+      super();
+      this.options = void 0;
+      this.width = void 0;
+      this.height = void 0;
+      if (cfg) {
+        Object.assign(this, cfg);
+      }
+    }
+    draw(ctx) {
+      const options = this.options;
+      const { inner, outer } = boundingRects(this);
+      const radius = toTRBLCorners(options.borderRadius);
+      ctx.save();
+      if (outer.w !== inner.w || outer.h !== inner.h) {
+        ctx.beginPath();
+        addRoundedRectPath(ctx, { x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius });
+        addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+        ctx.fillStyle = options.backgroundColor;
+        ctx.fill();
+        ctx.fillStyle = options.borderColor;
+        ctx.fill("evenodd");
+      } else {
+        ctx.beginPath();
+        addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius });
+        ctx.fillStyle = options.backgroundColor;
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+    inRange(mouseX, mouseY, useFinalPosition) {
+      return inRange(this, mouseX, mouseY, useFinalPosition);
+    }
+    inXRange(mouseX, useFinalPosition) {
+      return inRange(this, mouseX, null, useFinalPosition);
+    }
+    inYRange(mouseY, useFinalPosition) {
+      return inRange(this, null, mouseY, useFinalPosition);
+    }
+    getCenterPoint(useFinalPosition) {
+      const { x: x2, y: y2, width, height } = this.getProps(["x", "y", "width", "height"], useFinalPosition);
+      return {
+        x: x2 + width / 2,
+        y: y2 + height / 2
+      };
+    }
+    tooltipPosition() {
+      return this.getCenterPoint();
+    }
+    getRange(axis) {
+      return axis === "x" ? this.width / 2 : this.height / 2;
+    }
+  }
+  __publicField(MatrixElement, "id", "matrix");
+  __publicField(MatrixElement, "defaults", {
+    backgroundColor: void 0,
+    borderColor: void 0,
+    borderWidth: void 0,
+    borderRadius: 0,
+    anchorX: "center",
+    anchorY: "center",
+    width: 20,
+    height: 20
+  });
   /*!
   * chartjs-plugin-annotation v3.0.1
   * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -10046,15 +10262,15 @@
       verifyScaleIDs(annotation2, scales);
     }
   }
-  function changeScaleLimit(scale, range, limit, suggestedLimit) {
-    if (isNumberFinite(range[limit]) && !scaleLimitDefined(scale.options, limit, suggestedLimit)) {
-      const changed = scale[limit] !== range[limit];
-      scale[limit] = range[limit];
+  function changeScaleLimit(scale, range, limit2, suggestedLimit) {
+    if (isNumberFinite(range[limit2]) && !scaleLimitDefined(scale.options, limit2, suggestedLimit)) {
+      const changed = scale[limit2] !== range[limit2];
+      scale[limit2] = range[limit2];
       return changed;
     }
   }
-  function scaleLimitDefined(scaleOptions, limit, suggestedLimit) {
-    return defined(scaleOptions[limit]) || defined(scaleOptions[suggestedLimit]);
+  function scaleLimitDefined(scaleOptions, limit2, suggestedLimit) {
+    return defined(scaleOptions[limit2]) || defined(scaleOptions[suggestedLimit]);
   }
   function verifyScaleIDs(annotation2, scales) {
     for (const key of ["scaleID", "xScaleID", "yScaleID"]) {
@@ -10623,8 +10839,8 @@
     borderColor: "color"
   };
   function inAxisRange(element, { mouseX, mouseY }, axis, { hBorderWidth, useFinalPosition }) {
-    const limit = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
-    return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
+    const limit2 = rangeLimit(mouseX, mouseY, element.getProps(["x", "y", "x2", "y2"], useFinalPosition), axis);
+    return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth || isOnLabel(element, { mouseX, mouseY }, useFinalPosition, axis);
   }
   function isLineInArea({ x: x2, y: y2, x2: x22, y2: y22 }, { top, right, bottom, left }) {
     return !(x2 < left && x22 < left || x2 > right && x22 > right || y2 < top && y22 < top || y2 > bottom && y22 > bottom);
@@ -10863,9 +11079,9 @@
       }
       const { x: x2, y: y2, x2: x22, y2: y22 } = this.getProps(["x", "y", "x2", "y2"], useFinalPosition);
       const hBorderWidth = borderWidth / 2;
-      const limit = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
+      const limit2 = axis === "y" ? { start: y2, end: y22 } : { start: x2, end: x22 };
       const rotatedPoint = rotated({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), toRadians(-rotation));
-      return rotatedPoint[axis] >= limit.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit.end + hBorderWidth + EPSILON;
+      return rotatedPoint[axis] >= limit2.start - hBorderWidth - EPSILON && rotatedPoint[axis] <= limit2.end + hBorderWidth + EPSILON;
     }
     getCenterPoint(useFinalPosition) {
       return getElementCenterPoint(this, useFinalPosition);
@@ -10948,8 +11164,8 @@
         return inPointRange({ x: mouseX, y: mouseY }, this.getCenterPoint(useFinalPosition), width / 2, borderWidth);
       }
       const hBorderWidth = borderWidth / 2;
-      const limit = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
-      return limit.value >= limit.start - hBorderWidth && limit.value <= limit.end + hBorderWidth;
+      const limit2 = axis === "y" ? { start: y2, end: y22, value: mouseY } : { start: x2, end: x22, value: mouseX };
+      return limit2.value >= limit2.start - hBorderWidth && limit2.value <= limit2.end + hBorderWidth;
     }
     getCenterPoint(useFinalPosition) {
       return getElementCenterPoint(this, useFinalPosition);
@@ -13168,16 +13384,27 @@
       chart_js.Legend,
       chart_js.Tooltip,
       chart_js.Title,
-      annotation
+      annotation,
+      MatrixController,
+      MatrixElement
     );
     chart_js.Tooltip.positioners.cursor = CursorPositioner;
     chart_js.Interaction.modes.interpolate = Interpolate;
     chart_js.Chart.defaults.animation = false;
     chart_js.Chart.defaults.responsive = true;
     chart_js.Chart.defaults.maintainAspectRatio = false;
+    chart_js.Chart.defaults.layout.padding = {
+      top: 5,
+      right: 10,
+      bottom: 5,
+      left: 5
+    };
     chart_js.Chart.defaults.plugins.legend.position = "bottom";
     chart_js.Chart.defaults.plugins.legend.align = "start";
     chart_js.Chart.defaults.plugins.tooltip.position = "cursor";
+    chart_js.Chart.defaults.plugins.title.font = { size: 12 };
+    chart_js.Chart.defaults.plugins.title.align = "start";
+    chart_js.Chart.defaults.plugins.title.padding = { top: 0, bottom: 10 };
   }
   function registerChartComponent(...components) {
     chart_js.Chart.register(...components);
@@ -31528,7 +31755,7 @@ body > .os-scrollbar {
   }
 
 `;
-  var __defProp = Object.defineProperty;
+  var __defProp2 = Object.defineProperty;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __decorateClass = (decorators, target, key, kind) => {
     var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -31536,7 +31763,7 @@ body > .os-scrollbar {
       if (decorator = decorators[i2])
         result = (kind ? decorator(target, key, result) : decorator(result)) || result;
     if (kind && result)
-      __defProp(target, key, result);
+      __defProp2(target, key, result);
     return result;
   };
   class FlowToolButton extends FlowRdfElement {
@@ -31745,7 +31972,7 @@ body > .os-scrollbar {
     toggleColorFormat: "Toggle color format"
   };
   registerTranslation(translation);
-  const version = "0.0.18";
+  const version = "0.0.19";
   const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;

package/dist/vscode.html-custom-data.json

@@ -316,18 +316,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-breadcrumb",
-      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-badge",
       "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -356,6 +344,18 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-breadcrumb",
+      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-card",
       "description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
@@ -1941,6 +1941,12 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-visually-hidden",
+      "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "flow-ui-tree-item",
       "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-expand** - Emitted when the tree item expands.\n- **flow-ui-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **flow-ui-collapse** - Emitted when the tree item collapses.\n- **flow-ui-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **flow-ui-lazy-change** - Emitted when the tree item's lazy state changes.\n- **flow-ui-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _FlowTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
@@ -1967,12 +1973,6 @@
         }
       ],
       "references": []
-    },
-    {
-      "name": "flow-ui-visually-hidden",
-      "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
-      "attributes": [],
-      "references": []
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emuanalytics/flow-rdf-ui",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "main": "dist/flow-rdf-ui.umd.cjs",
   "module": "dist/flow-rdf-ui.js",
@@ -21,6 +21,7 @@
     "@shoelace-style/animations": "^1.1.0",
     "@shoelace-style/localize": "^3.1.1",
     "chartjs-adapter-dayjs-4": "^1.0.4",
+    "chartjs-chart-matrix": "^2.0.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "clone-deep": "^4.0.1",
     "composed-offset-position": "^0.0.4",