@limetech/lime-elements 40.19.0 → 40.20.1

package/dist/types/components/chart/chart.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Languages } from '../date-picker/date.types';
-import { ChartItem } from './chart.types';
+import { ChartItem, ChartType } from './chart.types';
 /**
  * A chart is a graphical representation of data, in which
  * visual symbols such as such bars, dots, lines, or slices, represent
@@ -29,7 +29,6 @@ import { ChartItem } from './chart.types';
  * @exampleComponent limel-example-chart-accessibility
  * @exampleComponent limel-example-chart-axis-labels
  * @exampleComponent limel-example-chart-styling
- * @exampleComponent limel-example-chart-creative-styling
  * @beta
  */
 export declare class Chart {
@@ -89,7 +88,7 @@ export declare class Chart {
     /**
      * Defines how items are visualized in the chart.
      */
-    type?: 'area' | 'bar' | 'doughnut' | 'line' | 'nps' | 'pie' | 'ring' | 'dot' | 'scatter' | 'stacked-bar';
+    type?: ChartType;
     /**
      * Defines whether the chart is intended to be displayed wide or tall.
      * Does not have any effect on chart types which generate circular forms.
@@ -108,6 +107,9 @@ export declare class Chart {
     maxValue?: number;
     /**
      * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts.
+     * When it is not set, or not above zero, the chart works out a step
+     * from the values. It also does that when the step would divide the
+     * axis into more than 100 parts, so that it does not draw too many lines.
      * Has no effect on other chart types.
      */
     axisIncrement?: number;
@@ -115,66 +117,63 @@ export declare class Chart {
      * Indicates whether the chart is in a loading state.
      */
     loading: boolean;
-    /**
-     * Range of the value axis. For most chart types this is the single value
-     * axis. For `scatter` it is the range of each point's second value
-     * (`value[1]`); the shared axis-line rendering always draws its grid and
-     * badges from this range. Whether it runs vertically (landscape) or
-     * horizontally (portrait) is decided by `orientation`.
-     */
-    private range;
-    /**
-     * Range of each scatter point's first value (`value[0]`). Only used by the
-     * `scatter` type, where both values are plotted on value axes. It is laid
-     * out on the opposite screen edge to `range` — horizontally in landscape,
-     * vertically in portrait.
-     */
-    private secondaryAxisRange;
     /**
      * Fired when a chart item with `clickable` set to `true` is clicked
      */
     interact: EventEmitter<ChartItem>;
+    private readonly host;
+    /**
+     * The item that last had focus, which is the one that Tab returns to.
+     */
+    private focusedIndex;
+    private plot?;
+    private chart?;
+    private drawing?;
+    private drawnSettings?;
+    private drawnTheme?;
+    private themeMayHaveChanged;
+    private itemSpace?;
+    private axisIncrementWarning?;
+    private readonly invalidColors;
+    private themeReader?;
+    private resizeObserver?;
+    private stopWatchingTheme?;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    protected warnAboutAxisIncrement(): void;
+    private getAxisIncrementWarning;
     render(): any;
     private renderCaption;
     private renderTableHeader;
-    private renderAxises;
-    private renderScatterAxises;
-    private renderAxisLines;
+    private get itemsLabel();
+    private get valuesLabel();
     private renderItems;
-    private getItemStyle;
-    private getScatterItemStyle;
-    private getItemClass;
-    private calculateSizeAndOffset;
-    private getFormattedValue;
-    private getItemText;
-    private renderTooltip;
-    private calculateRange;
-    /**
-     * The range of a chart whose items are parts of one whole: `maxValue`
-     * when set, otherwise the combined item values or range extents. The value
-     * is a scale, not a cap, so the combined size can exceed it. The whole is
-     * not rounded to an axis step, since these types draw no axis and an item's
-     * size has to be its exact share.
-     */
-    private calculateWholeRange;
-    private isPartOfWhole;
-    private calculateAxisIncrement;
-    private calculateNiceStep;
-    private axisSpan;
-    private calculateAxisRange;
-    private normalize;
-    private getXValue;
-    private getYValue;
-    private getMinimumValue;
-    private getMaximumValue;
-    private getValueSpan;
-    private isRangeItem;
-    handleChange(): void;
-    private recalculateRangeData;
-    private recalculateScatterRanges;
+    private getRowDescription;
+    private draw;
+    private createChart;
+    private updateChart;
+    private fitItemTextsToSize;
+    private getSettings;
+    private withItemColors;
+    private getItemColor;
+    private observeSize;
+    private disposeChart;
+    private readonly setPlot;
+    private readonly handleResize;
+    private readonly handleThemeChange;
+    private readonly handleChartClick;
+    private readonly handleChartOver;
+    private readonly handleChartOut;
+    private highlightItemAt;
     private getClickableItem;
+    private getRowIndex;
     private readonly handleClick;
     private readonly handleKeyDown;
+    private readonly handleFocus;
+    private readonly handleBlur;
+    private focusItem;
+    private showItem;
 }
 //# sourceMappingURL=chart.d.ts.map

package/dist/types/components/chart/chart.types.d.ts

@@ -1,4 +1,9 @@
 import { Color } from '../../global/shared-types/color.types';
+/**
+ * The kinds of chart that `limel-chart` can draw.
+ * @beta
+ */
+export type ChartType = 'area' | 'bar' | 'doughnut' | 'line' | 'nps' | 'pie' | 'ring' | 'dot' | 'scatter' | 'stacked-bar';
 /**
  * Chart component props.
  * @beta

package/dist/types/components/chart/options.d.ts

@@ -0,0 +1,88 @@
+import type { BarSeriesOption, GaugeSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption } from 'echarts/charts';
+import type { GridComponentOption, PolarComponentOption, TooltipComponentOption } from 'echarts/components';
+import { type ComposeOption } from 'echarts/core';
+import { ChartItem, ChartType } from './chart.types';
+import { ChartTheme } from './theme';
+type SeriesOption = BarSeriesOption | GaugeSeriesOption | LineSeriesOption | PieSeriesOption | ScatterSeriesOption;
+export type ChartOption = ComposeOption<SeriesOption | GridComponentOption | PolarComponentOption | TooltipComponentOption>;
+/**
+ * What the chart draws, from the props of `limel-chart`.
+ */
+export interface ChartSettings {
+    /** The items, each with its color resolved by the theme. */
+    items: ChartItem[];
+    type: ChartType;
+    orientation: 'landscape' | 'portrait';
+    maxValue?: number;
+    axisIncrement?: number;
+    displayAxisLabels: boolean;
+    /** The name of the axis that has the items, or the first values of a scatter chart. */
+    itemsLabel: string;
+    /** The name of the axis that has the values, or the second values of a scatter chart. */
+    valuesLabel: string;
+    displayItemText: boolean;
+    displayItemValue: boolean;
+    displayItemPercentage: boolean;
+}
+/**
+ * The ECharts option for a chart, and where its items are drawn.
+ */
+export interface ChartDrawing {
+    option: ChartOption;
+    /** The series that draws the items, when they are not series of their own. */
+    seriesIndex: number;
+    /** Whether every item is a series of its own, as in a stacked bar. */
+    itemsAreSeries: boolean;
+    /** The axis that shows the texts of the items, when they are shown on one. */
+    itemTextAxis?: 'xAxis' | 'yAxis';
+}
+/**
+ * The position of an item within the drawn series.
+ */
+export interface ItemLocation {
+    seriesIndex: number;
+    dataIndex: number;
+}
+/**
+ * Builds the ECharts option for the chart.
+ * @param settings - what to draw
+ * @param theme - the colors, sizes and font to draw it with
+ * @param itemSpace - the distance between two items on the axis, in pixels,
+ * when it is known from an earlier drawing
+ */
+export declare function drawChart(settings: ChartSettings, theme: ChartTheme, itemSpace?: number): ChartDrawing;
+/**
+ * The index of the item drawn at a position, if an item is drawn there.
+ * @param drawing - the drawing of the chart
+ * @param location - a position within the drawn series
+ */
+export declare function getItemIndex(drawing: Omit<ChartDrawing, 'option'>, location: Partial<ItemLocation>): number;
+/**
+ * Where an item is drawn, for highlighting it and showing its tooltip.
+ * @param drawing - the drawing of the chart
+ * @param index - the index of the item
+ */
+export declare function locateItem(drawing: Omit<ChartDrawing, 'option'>, index: number): ItemLocation;
+/**
+ * Shows the text of every item on the axis, cut short to the space of the
+ * item, so that no text runs into the next one. When the items are too close
+ * together for that, only some of the texts are shown, as many as fit.
+ * @param drawing - the drawing of the chart
+ * @param itemSpace - the distance between two items on the axis, in pixels
+ */
+export declare function fitItemTexts(drawing: Pick<ChartDrawing, 'itemTextAxis'>, itemSpace: number): ChartOption;
+/**
+ * The text of an item, with its share of the whole for charts of parts when
+ * `displayItemPercentage` is set.
+ * @param settings - what the chart draws
+ * @param index - the index of the item
+ */
+export declare function getItemLabel(settings: Pick<ChartSettings, 'items' | 'type' | 'maxValue' | 'displayItemPercentage'>, index: number): string;
+/**
+ * The tooltip of an item, as HTML: its label and its value.
+ * @param settings - what the chart draws
+ * @param index - the index of the item
+ */
+export declare function getTooltip(settings: ChartSettings, index: number): string;
+export {};
+//# sourceMappingURL=options.d.ts.map

package/dist/types/components/chart/scale.d.ts

@@ -0,0 +1,101 @@
+import { ChartItem, ChartType } from './chart.types';
+/**
+ * The most steps that an `axisIncrement` may divide a value axis into.
+ */
+export declare const MAX_AXIS_STEPS = 100;
+export interface AxisRange {
+    minValue: number;
+    maxValue: number;
+    totalRange: number;
+    /** Step between adjacent axis lines, used to render the grid. */
+    increment: number;
+}
+/**
+ * Whether the items of a chart of this type are parts of one whole.
+ * @param type - the chart type
+ */
+export declare function isPartOfWhole(type: ChartType): boolean;
+/**
+ * Whether a chart of this type draws its value axis in steps of
+ * `axisIncrement`.
+ * @param type - the chart type
+ */
+export declare function usesAxisIncrement(type: ChartType): boolean;
+/**
+ * Whether the item has a `[start, end]` range, or an `[x, y]` point in a
+ * `scatter` chart, as its value.
+ * @param item - the item
+ */
+export declare function isRangeItem(item: ChartItem): item is ChartItem<[number, number]>;
+/**
+ * The lower end of the item's range, or its value.
+ * @param item - the item
+ */
+export declare function getMinimumValue(item: ChartItem): number;
+/**
+ * The upper end of the item's range, or its value.
+ * @param item - the item
+ */
+export declare function getMaximumValue(item: ChartItem): number;
+/**
+ * The extent of the item's range, or its value measured from zero.
+ * @param item - the item
+ */
+export declare function getValueSpan(item: ChartItem): number;
+/**
+ * The first value of a `scatter` point.
+ * @param item - the point
+ */
+export declare function getXValue(item: ChartItem): number;
+/**
+ * The second value of a `scatter` point.
+ * @param item - the point
+ */
+export declare function getYValue(item: ChartItem): number;
+/**
+ * The value axis of a `bar`, `dot`, `area` or `line` chart. It reaches from
+ * zero, or from the smallest value when that is below zero, up to `maxValue`
+ * or the largest value. Both ends are rounded outwards to a whole step.
+ * Without an `axisIncrement` above zero, or with one that would divide the
+ * axis into more than `MAX_AXIS_STEPS` steps, the step divides the axis into
+ * about ten.
+ * @param items - the items in the chart
+ * @param maxValue - the requested upper bound, if any
+ * @param axisIncrement - the requested step, if any
+ */
+export declare function getAxisRange(items: ChartItem[], maxValue?: number, axisIncrement?: number): AxisRange;
+/**
+ * The range of a chart whose items are parts of one whole: `maxValue`
+ * when set, otherwise the combined item values or range extents. The value
+ * is a scale, not a cap, so the combined size can exceed it. The whole is
+ * not rounded to an axis step, since these types draw no axis and an item's
+ * size has to be its exact share.
+ * @param items - the items in the chart
+ * @param maxValue - the whole, if set
+ */
+export declare function getWholeRange(items: ChartItem[], maxValue?: number): AxisRange;
+/**
+ * The two value axes of a `scatter` chart: `x` for each point's first value
+ * and `y` for its second. Each axis derives its own range and step from its
+ * own zero-anchored span, so positive, negative, and zero-crossing data all
+ * grid sensibly.
+ * @param items - the points in the chart
+ */
+export declare function getScatterRanges(items: ChartItem[]): {
+    x: AxisRange;
+    y: AxisRange;
+};
+/**
+ * An item's share of the whole, in percent.
+ * @param item - the item
+ * @param whole - the range from `getWholeRange`
+ */
+export declare function getShare(item: ChartItem, whole: AxisRange): number;
+/**
+ * The item's value as text: its `formattedValue` when set, otherwise its
+ * value, range, or scatter point.
+ * @param item - the item
+ * @param type - the chart type
+ */
+export declare function formatValue(item: ChartItem, type: ChartType): string;
+//# sourceMappingURL=scale.d.ts.map

package/dist/types/components/chart/theme.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The colors, sizes and font a chart is drawn with. ECharts cannot read CSS
+ * custom properties, so they are resolved from the chart's styles into plain
+ * values.
+ */
+export interface ChartTheme {
+    itemColor: string;
+    /** The line, and the area under it, of `line` and `area` charts. */
+    lineColor: string;
+    axisLineColor: string;
+    textColor: string;
+    backgroundColor: string;
+    dividerColor: string;
+    surfaceColor: string;
+    /** In pixels, clockwise from the top left corner. */
+    itemBorderRadius: [number, number, number, number];
+    /** In pixels. */
+    scatterItemSize: number;
+    fontFamily: string;
+    npsColors: [string, string, string, string];
+    animate: boolean;
+}
+/**
+ * Reads colors and lengths as the chart's own styles resolve them.
+ */
+export interface ThemeReader {
+    /**
+     * The color as `rgb()` or `rgba()`, or `undefined` when the value is not
+     * a color.
+     * @param value - any CSS color, which may use custom properties
+     */
+    color(value: string): string | undefined;
+    theme(): ChartTheme;
+    dispose(): void;
+}
+/**
+ * Creates a reader that resolves values in the given shadow root, where the
+ * chart's private custom properties are defined.
+ * @param root - the chart's shadow root
+ */
+export declare function createThemeReader(root: ShadowRoot): ThemeReader;
+/**
+ * Calls back when the theme of the chart may have changed: when the color
+ * scheme or the reduced motion preference of the system changes, the
+ * `data-theme` attribute of the page does, or the `style` or `class`
+ * attribute of the chart does.
+ * @param host - the chart
+ * @param onChange - called on every change
+ * @returns a function that stops watching
+ */
+export declare function watchTheme(host: HTMLElement, onChange: () => void): () => void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/components.d.ts

@@ -16,7 +16,7 @@ import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { Image } from "./global/shared-types/image.types";
 import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-import { ChartItem } from "./components/chart/chart.types";
+import { ChartItem, ChartType } from "./components/chart/chart.types";
 import { Label, LabelValue } from "./components/dynamic-label/label.types";
 import { Link } from "./global/shared-types/link.types";
 import { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -68,7 +68,7 @@ export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { Image } from "./global/shared-types/image.types";
 export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
-export { ChartItem } from "./components/chart/chart.types";
+export { ChartItem, ChartType } from "./components/chart/chart.types";
 export { Label, LabelValue } from "./components/dynamic-label/label.types";
 export { Link } from "./global/shared-types/link.types";
 export { Chip, ChipType } from "./components/chip-set/chip.types";
@@ -547,7 +547,6 @@ export namespace Components {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface LimelChart {
@@ -564,7 +563,7 @@ export namespace Components {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
          */
         "axisIncrement"?: number;
         /**
@@ -614,16 +613,7 @@ export namespace Components {
           * Defines how items are visualized in the chart.
           * @default 'stacked-bar'
          */
-        "type"?: | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type"?: ChartType;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -5018,7 +5008,6 @@ declare global {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface HTMLLimelChartElement extends Components.LimelChart, HTMLStencilElement {
@@ -7792,7 +7781,6 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-chart-accessibility
      * @exampleComponent limel-example-chart-axis-labels
      * @exampleComponent limel-example-chart-styling
-     * @exampleComponent limel-example-chart-creative-styling
      * @beta 
      */
     interface LimelChart {
@@ -7809,7 +7797,7 @@ declare namespace LocalJSX {
          */
         "accessibleValuesLabel"?: string;
         /**
-          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. Has no effect on other chart types.
+          * Sets the axis increment for `bar`, `dot`, `area`, and `line` charts. When it is not set, or not above zero, the chart works out a step from the values. It also does that when the step would divide the axis into more than 100 parts, so that it does not draw too many lines. Has no effect on other chart types.
          */
         "axisIncrement"?: number;
         /**
@@ -7863,16 +7851,7 @@ declare namespace LocalJSX {
           * Defines how items are visualized in the chart.
           * @default 'stacked-bar'
          */
-        "type"?: | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type"?: ChartType;
     }
     /**
      * The Checkbox component is a classic and essential element in UI design that allows
@@ -12104,16 +12083,7 @@ declare namespace LocalJSX {
         "displayItemText": boolean;
         "displayItemValue": boolean;
         "displayItemPercentage": boolean;
-        "type": | 'area'
-        | 'bar'
-        | 'doughnut'
-        | 'line'
-        | 'nps'
-        | 'pie'
-        | 'ring'
-        | 'dot'
-        | 'scatter'
-        | 'stacked-bar';
+        "type": ChartType;
         "orientation": 'landscape' | 'portrait';
         "maxValue": number;
         "axisIncrement": number;
@@ -13018,7 +12988,6 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-chart-accessibility
              * @exampleComponent limel-example-chart-axis-labels
              * @exampleComponent limel-example-chart-styling
-             * @exampleComponent limel-example-chart-creative-styling
              * @beta 
              */
             "limel-chart": LocalJSX.IntrinsicElements["limel-chart"] & JSXBase.HTMLAttributes<HTMLLimelChartElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.19.0",
+  "version": "40.20.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -55,7 +55,7 @@
     "@commitlint/cli": "^21.2.4",
     "@commitlint/config-conventional": "^21.2.4",
     "@limetech/eslint-config": "^5.0.3",
-    "@microsoft/api-extractor": "^7.59.4",
+    "@microsoft/api-extractor": "^7.60.0",
     "@playwright/test": "1.64.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^6.11.0",
@@ -76,6 +76,7 @@
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.23",
     "diff": "^9.0.0",
+    "echarts": "^6.1.0",
     "eslint": "^10.13.0",
     "flatpickr": "^4.6.13",
     "glob": "^13.0.6",
@@ -88,7 +89,7 @@
     "kompendium": "npm:@limetech/kompendium@^1.4.1",
     "lodash-es": "^4.17.23",
     "material-components-web": "^13.0.0",
-    "mdast-util-to-markdown": "^2.2.0",
+    "mdast-util-to-markdown": "^2.2.1",
     "moment": "^2.31.0",
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",

package/dist/cjs/limel-badge.cjs.entry.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var index = require('./index-BlsqxTB1.js');
-var format = require('./format-D4jZb7Ls.js');
-require('./_commonjsHelpers-CFO10eej.js');
-
-const badgeCss = () => `@charset "UTF-8";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}`;
-
-const Badge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: 'b5fc1ffc51f34992c6a7e748b22a1c333b980724', title: this.labelIsLarge() ? this.label : '', class: {
-                'has-large-label': this.labelIsLarge(),
-            } }, index.h("span", { key: '37c10595938a038dd7455751b21a949c88245e6a' }, this.renderLabel())));
-    }
-    renderLabel() {
-        if (typeof this.label === 'number') {
-            return format.abbreviate(this.label);
-        }
-        return this.label;
-    }
-    labelIsLarge() {
-        const largeNumericLabel = 999;
-        const largeStringLabel = 6;
-        if ((typeof this.label === 'number' &&
-            this.label > largeNumericLabel) ||
-            (typeof this.label === 'string' &&
-                this.label.length > largeStringLabel)) {
-            return true;
-        }
-    }
-};
-Badge.style = badgeCss();
-
-exports.limel_badge = Badge;

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

@@ -1,35 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-BU9IJqli.js';
-import { a as abbreviate } from './format-hTrthuPP.js';
-import './_commonjsHelpers-B85MJLTf.js';
-
-const badgeCss = () => `@charset "UTF-8";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}`;
-
-const Badge = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: 'b5fc1ffc51f34992c6a7e748b22a1c333b980724', title: this.labelIsLarge() ? this.label : '', class: {
-                'has-large-label': this.labelIsLarge(),
-            } }, h("span", { key: '37c10595938a038dd7455751b21a949c88245e6a' }, this.renderLabel())));
-    }
-    renderLabel() {
-        if (typeof this.label === 'number') {
-            return abbreviate(this.label);
-        }
-        return this.label;
-    }
-    labelIsLarge() {
-        const largeNumericLabel = 999;
-        const largeStringLabel = 6;
-        if ((typeof this.label === 'number' &&
-            this.label > largeNumericLabel) ||
-            (typeof this.label === 'string' &&
-                this.label.length > largeStringLabel)) {
-            return true;
-        }
-    }
-};
-Badge.style = badgeCss();
-
-export { Badge as limel_badge };

package/dist/lime-elements/p-02aac2c0.entry.js

@@ -1 +0,0 @@
-import{r as e,h as i,H as r}from"./p-BU9IJqli.js";import{a}from"./p-Bt64o80S.js";import"./p-B85MJLTf.js";const t=class{constructor(i){e(this,i)}render(){return i(r,{key:"b5fc1ffc51f34992c6a7e748b22a1c333b980724",title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},i("span",{key:"37c10595938a038dd7455751b21a949c88245e6a"},this.renderLabel()))}renderLabel(){return"number"==typeof this.label?a(this.label):this.label}labelIsLarge(){if("number"==typeof this.label&&this.label>999||"string"==typeof this.label&&this.label.length>6)return!0}};t.style='@charset "UTF-8";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}';export{t as limel_badge}