@limetech/lime-elements 40.20.0 → 40.20.1

package/dist/collection/components/chart/chart.css

@@ -102,7 +102,7 @@
 * @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.
 * @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--contrast-100), 0.6)`, which is light in light mode and dark in dark mode.
 * @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `rgb(var(--contrast-900), 0.4)`.
-* @prop --chart-item-border-radius: Defines the roundness of corners of items in `bar` and `stacked-bar` charts.
+* @prop --chart-item-border-radius: Defines the roundness of corners of items in `bar` and `stacked-bar` charts. Takes one to four lengths, like `border-radius`.
 * @prop --chart-scatter-item-size: Defines the diameter of the dots in a `scatter` chart. Defaults to `0.5rem`.
 */
 :host(limel-chart) {
@@ -148,11 +148,13 @@
   );
 }
 
-:host(limel-chart[type=stacked-bar][orientation=landscape]) {
+:host(limel-chart[type=stacked-bar][orientation=landscape]),
+:host(limel-chart[type=stacked-bar][orientation=landscape]) .plot {
   min-height: 0.5rem;
 }
 
-:host(limel-chart[type=stacked-bar][orientation=portrait]) {
+:host(limel-chart[type=stacked-bar][orientation=portrait]),
+:host(limel-chart[type=stacked-bar][orientation=portrait]) .plot {
   min-width: 0.5rem;
 }
 
@@ -179,9 +181,22 @@
   aspect-ratio: 1;
 }
 
+:host(limel-chart[type=bar][data-fallback-height]),
+:host(limel-chart[type=dot][data-fallback-height]),
+:host(limel-chart[type=line][data-fallback-height]),
+:host(limel-chart[type=area][data-fallback-height]),
+:host(limel-chart[type=scatter][data-fallback-height]) {
+  aspect-ratio: 2;
+}
+
 .plot {
-  position: absolute;
-  inset: 0;
+  flex-grow: 1;
+  contain: size;
+}
+
+:host(limel-chart[type=stacked-bar]) .plot {
+  border-radius: 0.25rem;
+  overflow: hidden;
 }
 
 table {

package/dist/collection/components/chart/chart.js

@@ -252,6 +252,9 @@ export class Chart {
         }
         this.observeSize();
         const { clientWidth: width, clientHeight: height } = this.plot;
+        if (width && !height) {
+            this.host.toggleAttribute('data-fallback-height', true);
+        }
         if (!width || !height) {
             return;
         }

package/dist/collection/components/chart/options.js

@@ -197,7 +197,7 @@ function getAxisSeries(settings, theme) {
         return getLineSeries(settings, theme);
     }
     if (settings.type === 'dot') {
-        return getDotSeries(settings);
+        return getDotSeries(settings, theme);
     }
     return getBarSeries(settings, theme);
 }
@@ -212,7 +212,7 @@ function getBarSeries(settings, theme) {
                 borderRadius: theme.itemBorderRadius,
             },
         })),
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -228,7 +228,7 @@ function getBarSeries(settings, theme) {
         seriesIndex: 1,
     };
 }
-function getDotSeries(settings) {
+function getDotSeries(settings, theme) {
     const { items, orientation } = settings;
     const point = (index, value) => orientation === 'landscape' ? [index, value] : [value, index];
     const ends = {
@@ -238,7 +238,7 @@ function getDotSeries(settings) {
             value: point(index, getMaximumValue(item)),
             itemStyle: { color: item.color },
         })),
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -285,7 +285,7 @@ function getLineSeries(settings, theme) {
             itemStyle: { color: item.color },
         })),
         areaStyle: area ? { color: color, opacity: AREA_OPACITY } : undefined,
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -321,11 +321,7 @@ function drawScatter(settings, theme) {
                 itemStyle: { color: item.color },
             };
         }),
-        label: {
-            show: settings.displayItemText || settings.displayItemValue,
-            position: 'top',
-            formatter: ({ dataIndex }) => getPointLabel(settings, items[dataIndex]),
-        },
+        label: Object.assign(Object.assign({ show: settings.displayItemText || settings.displayItemValue, position: 'top' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => getPointLabel(settings, items[dataIndex]) }),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -355,6 +351,7 @@ function drawPie(settings, theme) {
             value: whole - sum,
             itemStyle: { color: theme.backgroundColor },
             emphasis: { disabled: true },
+            cursor: getCursor(false),
         });
     }
     const innerRadius = settings.type === 'doughnut' ? '50%' : 0;
@@ -547,12 +544,11 @@ function getAxisName(settings, name, theme) {
         nameTextStyle: { color: theme.textColor },
     };
 }
-function getValueLabel(settings) {
-    return {
-        show: settings.displayItemValue,
-        position: settings.orientation === 'landscape' ? 'top' : 'right',
-        formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type),
-    };
+function getValueLabel(settings, theme) {
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type) });
+}
+function getLabelStyle(theme) {
+    return { color: theme.textColor, textBorderWidth: 0 };
 }
 function getPointLabel(settings, item) {
     const parts = [];

package/dist/collection/components/chart/theme.js

@@ -63,6 +63,18 @@ export function createThemeReader(root) {
         probe.style.width = '';
         return Number.isFinite(pixels) ? pixels : 0;
     };
+    const resolveCorners = (value) => {
+        probe.style.borderRadius = value;
+        const style = getComputedStyle(probe);
+        const corners = [
+            style.borderTopLeftRadius,
+            style.borderTopRightRadius,
+            style.borderBottomRightRadius,
+            style.borderBottomLeftRadius,
+        ];
+        probe.style.borderRadius = '';
+        return corners.map((corner) => resolveLength(corner));
+    };
     return {
         color: (value) => (isColor(value) ? resolveColor(value) : undefined),
         theme: () => ({
@@ -73,7 +85,7 @@ export function createThemeReader(root) {
             backgroundColor: resolvePublicColor('--limel-chart-background-color'),
             dividerColor: resolvePublicColor('--limel-chart-item-divider-color'),
             surfaceColor: resolveColor('var(--limel-chart-surface-color)'),
-            itemBorderRadius: resolveLength('var(--limel-chart-item-border-radius)'),
+            itemBorderRadius: resolveCorners('var(--limel-chart-item-border-radius)'),
             scatterItemSize: resolveLength('var(--limel-chart-scatter-item-size)'),
             fontFamily: getComputedStyle(root.host).fontFamily,
             npsColors: [

package/dist/esm/limel-chart.entry.js

@@ -50563,7 +50563,7 @@ function getAxisSeries(settings, theme) {
         return getLineSeries(settings, theme);
     }
     if (settings.type === 'dot') {
-        return getDotSeries(settings);
+        return getDotSeries(settings, theme);
     }
     return getBarSeries(settings, theme);
 }
@@ -50578,7 +50578,7 @@ function getBarSeries(settings, theme) {
                 borderRadius: theme.itemBorderRadius,
             },
         })),
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -50594,7 +50594,7 @@ function getBarSeries(settings, theme) {
         seriesIndex: 1,
     };
 }
-function getDotSeries(settings) {
+function getDotSeries(settings, theme) {
     const { items, orientation } = settings;
     const point = (index, value) => orientation === 'landscape' ? [index, value] : [value, index];
     const ends = {
@@ -50604,7 +50604,7 @@ function getDotSeries(settings) {
             value: point(index, getMaximumValue(item)),
             itemStyle: { color: item.color },
         })),
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -50651,7 +50651,7 @@ function getLineSeries(settings, theme) {
             itemStyle: { color: item.color },
         })),
         areaStyle: area ? { color: color, opacity: AREA_OPACITY } : undefined,
-        label: getValueLabel(settings),
+        label: getValueLabel(settings, theme),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -50687,11 +50687,7 @@ function drawScatter(settings, theme) {
                 itemStyle: { color: item.color },
             };
         }),
-        label: {
-            show: settings.displayItemText || settings.displayItemValue,
-            position: 'top',
-            formatter: ({ dataIndex }) => getPointLabel(settings, items[dataIndex]),
-        },
+        label: Object.assign(Object.assign({ show: settings.displayItemText || settings.displayItemValue, position: 'top' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => getPointLabel(settings, items[dataIndex]) }),
         cursor: getSeriesCursor(items),
         emphasis: emphasis,
         blur: blur,
@@ -50721,6 +50717,7 @@ function drawPie(settings, theme) {
             value: whole - sum,
             itemStyle: { color: theme.backgroundColor },
             emphasis: { disabled: true },
+            cursor: getCursor(false),
         });
     }
     const innerRadius = settings.type === 'doughnut' ? '50%' : 0;
@@ -50913,12 +50910,11 @@ function getAxisName(settings, name, theme) {
         nameTextStyle: { color: theme.textColor },
     };
 }
-function getValueLabel(settings) {
-    return {
-        show: settings.displayItemValue,
-        position: settings.orientation === 'landscape' ? 'top' : 'right',
-        formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type),
-    };
+function getValueLabel(settings, theme) {
+    return Object.assign(Object.assign({ show: settings.displayItemValue, position: settings.orientation === 'landscape' ? 'top' : 'right' }, getLabelStyle(theme)), { formatter: ({ dataIndex }) => formatValue(settings.items[dataIndex], settings.type) });
+}
+function getLabelStyle(theme) {
+    return { color: theme.textColor, textBorderWidth: 0 };
 }
 function getPointLabel(settings, item) {
     const parts = [];
@@ -51002,6 +50998,18 @@ function createThemeReader(root) {
         probe.style.width = '';
         return Number.isFinite(pixels) ? pixels : 0;
     };
+    const resolveCorners = (value) => {
+        probe.style.borderRadius = value;
+        const style = getComputedStyle(probe);
+        const corners = [
+            style.borderTopLeftRadius,
+            style.borderTopRightRadius,
+            style.borderBottomRightRadius,
+            style.borderBottomLeftRadius,
+        ];
+        probe.style.borderRadius = '';
+        return corners.map((corner) => resolveLength(corner));
+    };
     return {
         color: (value) => (isColor(value) ? resolveColor(value) : undefined),
         theme: () => ({
@@ -51012,7 +51020,7 @@ function createThemeReader(root) {
             backgroundColor: resolvePublicColor('--limel-chart-background-color'),
             dividerColor: resolvePublicColor('--limel-chart-item-divider-color'),
             surfaceColor: resolveColor('var(--limel-chart-surface-color)'),
-            itemBorderRadius: resolveLength('var(--limel-chart-item-border-radius)'),
+            itemBorderRadius: resolveCorners('var(--limel-chart-item-border-radius)'),
             scatterItemSize: resolveLength('var(--limel-chart-scatter-item-size)'),
             fontFamily: getComputedStyle(root.host).fontFamily,
             npsColors: [
@@ -51071,7 +51079,7 @@ function paintToRgba(context, color) {
     return `rgba(${red}, ${green}, ${blue}, ${alpha / MAX_CHANNEL})`;
 }
 
-const chartCss = () => `@charset "UTF-8";:host(limel-chart){--limel-chart-item-color:var(       --chart-item-color,       rgb(var(--contrast-1100), 0.8)   );--limel-chart-axis-line-color:var(       --chart-axis-line-color,       rgb(var(--contrast-900), 0.4)   );--limel-chart-background-color:var(--chart-background-color, transparent);--limel-chart-item-divider-color:var(       --chart-item-divider-color,       rgb(var(--contrast-100), 0.6)   );--limel-chart-item-border-radius:var(--chart-item-border-radius, 0);--limel-chart-scatter-item-size:var(--chart-scatter-item-size, 0.5rem);--limel-chart-text-color:rgb(var(--contrast-1000));--limel-chart-line-color:rgb(var(--contrast-900));--limel-chart-surface-color:rgb(var(--contrast-100));--limel-chart-nps-detractors-color:rgb(var(--color-coral-default));--limel-chart-nps-passives-color:rgb(var(--color-amber-light));--limel-chart-nps-good-color:rgb(var(--color-lime-light));--limel-chart-nps-excellent-color:rgb(var(--color-lime-default));box-sizing:border-box;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}:host(limel-chart[type=bar]){--limel-chart-item-border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=stacked-bar]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-800), 0.2)   )}:host(limel-chart[type=stacked-bar][orientation=landscape]){min-height:0.5rem}:host(limel-chart[type=stacked-bar][orientation=portrait]){min-width:0.5rem}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-200))   )}:host(limel-chart[type=nps]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-100))   )}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]),:host(limel-chart[type=nps]){aspect-ratio:1}.plot{position:absolute;inset:0}table{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}limel-spinner{margin:auto}`;
+const chartCss = () => `@charset "UTF-8";:host(limel-chart){--limel-chart-item-color:var(       --chart-item-color,       rgb(var(--contrast-1100), 0.8)   );--limel-chart-axis-line-color:var(       --chart-axis-line-color,       rgb(var(--contrast-900), 0.4)   );--limel-chart-background-color:var(--chart-background-color, transparent);--limel-chart-item-divider-color:var(       --chart-item-divider-color,       rgb(var(--contrast-100), 0.6)   );--limel-chart-item-border-radius:var(--chart-item-border-radius, 0);--limel-chart-scatter-item-size:var(--chart-scatter-item-size, 0.5rem);--limel-chart-text-color:rgb(var(--contrast-1000));--limel-chart-line-color:rgb(var(--contrast-900));--limel-chart-surface-color:rgb(var(--contrast-100));--limel-chart-nps-detractors-color:rgb(var(--color-coral-default));--limel-chart-nps-passives-color:rgb(var(--color-amber-light));--limel-chart-nps-good-color:rgb(var(--color-lime-light));--limel-chart-nps-excellent-color:rgb(var(--color-lime-default));box-sizing:border-box;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}:host(limel-chart[type=bar]){--limel-chart-item-border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=stacked-bar]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-800), 0.2)   )}:host(limel-chart[type=stacked-bar][orientation=landscape]),:host(limel-chart[type=stacked-bar][orientation=landscape]) .plot{min-height:0.5rem}:host(limel-chart[type=stacked-bar][orientation=portrait]),:host(limel-chart[type=stacked-bar][orientation=portrait]) .plot{min-width:0.5rem}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-200))   )}:host(limel-chart[type=nps]){--limel-chart-background-color:var(       --chart-background-color,       rgb(var(--contrast-100))   )}:host(limel-chart[type=pie]),:host(limel-chart[type=doughnut]),:host(limel-chart[type=ring]),:host(limel-chart[type=nps]){aspect-ratio:1}:host(limel-chart[type=bar][data-fallback-height]),:host(limel-chart[type=dot][data-fallback-height]),:host(limel-chart[type=line][data-fallback-height]),:host(limel-chart[type=area][data-fallback-height]),:host(limel-chart[type=scatter][data-fallback-height]){aspect-ratio:2}.plot{flex-grow:1;contain:size}:host(limel-chart[type=stacked-bar]) .plot{border-radius:0.25rem;overflow:hidden}table{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}limel-spinner{margin:auto}`;
 
 const orientations = ['horizontal', 'vertical'];
 const extensions = [
@@ -51289,6 +51297,9 @@ const Chart = class {
         }
         this.observeSize();
         const { clientWidth: width, clientHeight: height } = this.plot;
+        if (width && !height) {
+            this.host.toggleAttribute('data-fallback-height', true);
+        }
         if (!width || !height) {
             return;
         }

package/dist/esm/limel-markdown.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
-import { m as markdownToHTML } from './markdown-parser-Cw8iW5R9.js';
+import { m as markdownToHTML } from './markdown-parser-8aHA9IYo.js';
 import { g as globalConfig } from './config-Dnt5w_Bp.js';
 import { d as defaultSchema } from './index-CofmbCdQ.js';
 import { a as adaptColorContrast } from './adapt-color-contrast-BQoih_t0.js';
@@ -1136,7 +1136,7 @@ const Markdown = class {
      */
     async toMarkdown() {
         await this.rendering;
-        const { exportMarkdown } = await import('./markdown-exporter-B2vFxSLw.js');
+        const { exportMarkdown } = await import('./markdown-exporter-DcFcD699.js');
         return exportMarkdown(this.rootElement, this.cachedCombinedWhitelist);
     }
     textChanged() {

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BU9IJqli.js';
 import { L as LevelMapping, E as EditorMenuTypes, i as isInlineImageTag, M as MouseButtons, e as editorMenuTypesArray } from './types-C_Yu8dOg.js';
-import { g as getLinkAttributes, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-Cw8iW5R9.js';
+import { g as getLinkAttributes, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-8aHA9IYo.js';
 import { c as cloneDeep } from './cloneDeep-BYrS7zqD.js';
 import { t as translations } from './translations-kct5Kybu.js';
 import { c as decodeHTML, e as decodeHTMLStrict } from './index-CofmbCdQ.js';