@limetech/lime-elements 40.19.0 → 40.20.0

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. */
+    itemBorderRadius: 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.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.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",

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}

package/dist/lime-elements/p-38ab193f.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as r,a as o}from"./p-BU9IJqli.js";import{i}from"./p-CnpoFRmN.js";import{g as a,b as l}from"./p-CgNJbSP4.js";import{A as n,b as s,H as c,e as b,c as d,d as h}from"./p-Bu6-QXrA.js";import{a as u,b as m,i as v,D as p}from"./p-DVx8ZwG_.js";import{S as g,c as f}from"./p-BqoaAMnl.js";import{b as w}from"./p-BuX-Eb_J.js";import"./p-CK4jS9_E.js";import"./p-xGeCwSnE.js";import"./p-BcJ-TDVt.js";import"./p-BJQylLSL.js";import"./p-BZrtP4vv.js";import"./p-oiMYqRQ0.js";import"./p-rJbGuVxd.js";import"./p-DbBZn7JO.js";import"./p-CZ30nDJE.js";import"./p-DpFfRQwV.js";import"./p-B8VKuhvH.js";import"./p-CzTSYn-I.js";import"./p-B--C3qwe.js";import"./p-9W8bTt2G.js";var x=m((function(t,e){return v(t)?function(t,e){var r=-1,o=u,i=!0,a=t.length,l=[],n=e.length;if(!a)return l;e.length>=200&&(o=f,i=!1,e=new g(e));t:for(;++r<a;){var s=t[r],c=s;if(s=0!==s?s:0,i&&c==c){for(var b=n;b--;)if(e[b]===c)continue t;l.push(s)}else o(e,c,undefined)||l.push(s)}return l}(t,w(e,1,v,!0)):[]}));const k={horizontal:new Map([[d,"previous"],[h,"next"],[c,"first"],[b,"last"]]),vertical:new Map([[n,"previous"],[s,"next"],[c,"first"],[b,"last"]])};function j(t,e){return t>=0&&t<e}function y(t,e){return r=>{var o;return!(null===(o=null==e?void 0:e.isDisabled)||void 0===o?void 0:o.call(e,t[r]))}}function C(t,e,r,o,i){for(let a=0;a<t;a+=1){const l=e+r*a;if(!o&&!j(l,t))break;const n=(l%t+t)%t;if(i(n))return n}return-1}const z=class{constructor(r){t(this,r),this.changeTab=e(this,"changeTab",7),this.reorderTab=e(this,"reorderTab",7),this.tabs=[],this.orientation="horizontal",this.allowTabReorder=!1,this.hasLoaded=!1,this.isLaidOutAgain=!1,this.renderedTabs=[],this.handleReorder=t=>{const e=function(t,e){const{order:r,fromIndex:o,toIndex:a}=e,l=e=>e>=0&&e<t.length;if(!l(o)||!l(a))return;const n=[...r];return n.splice(o,0,...n.splice(a,1)),i(n,t.map((({id:t})=>String(t))))?{tab:t[o],fromIndex:o,toIndex:a}:void 0}(this.tabs,t);if(!e)return;const r=this.tabs.map((({id:t})=>t));r.splice(e.toIndex,0,...r.splice(e.fromIndex,1)),this.tabIdsAfterReorder=r,this.reorderTab.emit(e)},this.handleKeyDown=this.handleKeyDown.bind(this)}async connectedCallback(){this.hasLoaded&&(this.revealedTabId=void 0,this.setUpReordering(),await this.revealActiveTab("auto"))}disconnectedCallback(){var t;null===(t=this.dragToReorder)||void 0===t||t.teardown()}componentDidLoad(){this.hasLoaded=!0,this.triggerIconColorWarning()}componentWillRender(){var t;const e=this.getTabElements().indexOf(this.host.shadowRoot.activeElement);this.tabWithFocus=-1===e?void 0:{id:null===(t=this.renderedTabs[e])||void 0===t?void 0:t.id,button:this.getTabElements()[e]}}async componentDidRender(){this.restoreFocus(),this.renderedTabs=this.tabs,this.setUpReordering();const t=this.isLaidOutAgain;this.isLaidOutAgain=!1,await this.revealActiveTab(!this.hasLoaded||t?"auto":void 0,t)}render(){const t=function(t,e,r){const o=t.length,i=y(t,r);return j(e,o)&&i(e)?e:C(o,0,1,!1,i)}(this.tabs,this.tabs.findIndex((t=>t.active)),this.getNavigationOptions());return r("div",{key:"520c0e3987f3de626ca2c01809b42b504146eb76",role:"tablist","aria-orientation":this.getOrientation(),onKeyDown:this.handleKeyDown},r("limel-scroller",{key:"60512f257f8ef89cc0b6142ac80d515060bbbba0",orientation:this.getOrientation()},this.tabs.map(((e,r)=>this.renderTabOrMovableTab(e,r,r===t)))))}tabsChanged(t=[],e=[]){const r=t.map((t=>t.id)),o=e.map((t=>t.id));if(i(r,o))return;const a=this.tabIdsAfterReorder;this.tabIdsAfterReorder=void 0,i(r,a)||(this.revealedTabId=void 0)}orientationChanged(){this.revealedTabId=void 0,this.isLaidOutAgain=!0}getOrientation(){return"vertical"===this.orientation?"vertical":"horizontal"}getNavigationOptions(){return{orientation:this.getOrientation(),wrap:!0}}restoreFocus(){var t;const e=this.tabWithFocus;if(this.tabWithFocus=void 0,!e||e.button.isConnected)return;const r=this.tabs.findIndex((t=>t.id===e.id));null===(t=this.getTabElements()[r])||void 0===t||t.focus()}getTabElements(){return[...this.host.shadowRoot.querySelectorAll('button[role="tab"]')]}canReorderTabs(){return this.allowTabReorder&&this.tabs.length>1}setUpReordering(){var t,e;if(!this.canReorderTabs())return void(null===(t=this.dragToReorder)||void 0===t||t.teardown());const r=this.host.shadowRoot.querySelector("limel-scroller");r&&(null!==(e=this.dragToReorder)&&void 0!==e||(this.dragToReorder=new p({draggable:"[data-reorder-id]",revertDrop:!0,onReorder:this.handleReorder})),this.dragToReorder.setup(r,this.getOrientation()))}async revealActiveTab(t,e=!1){const r=this.tabs.findIndex((t=>t.active));if(-1===r)return void(this.revealedTabId=void 0);if(this.tabs[r].id===this.revealedTabId)return;this.revealedTabId=this.tabs[r].id;const o=this.getTabElements()[r],i=this.host.shadowRoot.querySelector("limel-scroller");o&&i&&(o.matches(":focus")&&!e||(await i.componentOnReady(),await i.reveal(o,t)))}handleKeyDown(t){const e=this.getNavigationOptions();if(!function(t,e){return!(t.altKey||t.ctrlKey||t.metaKey)&&k[e.orientation].has(t.key)}(t,e))return;const r=this.getTabElements().indexOf(t.target);-1!==r&&(t.preventDefault(),this.activateTab(function(t,e,r,o){const i=k[o.orientation].get(e),a=t.length,l=y(t,o),n=C(a,0,1,!1,l);if(!i||-1===n)return-1;if("first"===i)return n;const s=C(a,a-1,-1,!1,l);if("last"===i)return s;if(!j(r,a))return"next"===i?n:s;const c="next"===i?1:-1,b=C(a,r+c,c,Boolean(o.wrap),l);return-1===b?r:b}(this.tabs,t.key,r,e)))}activateTab(t){if(-1===t)return;if(this.getTabElements()[t].focus(),t===this.tabs.findIndex((t=>t.active)))return;const e=function(t,e){const r=t.findIndex((t=>!0===t.active)),o=[...t];return-1!==r&&(o[r]=Object.assign(Object.assign({},t[r]),{active:!1})),o[e]=Object.assign(Object.assign({},t[e]),{active:!0}),o}(this.tabs,t),r=x(e,this.tabs).sort(this.sortByInactive);for(const t of r)this.changeTab.emit(t);this.tabs=e}sortByInactive(t,e){return Number(t.active)-Number(e.active)}renderIcon(t){if(!t.icon)return;const e=a(t.icon),o=l(t.icon,t.iconColor),i={color:""};return o&&(i.color=o),r("limel-icon",{name:e,style:i,size:"small","aria-hidden":"true"})}renderTabOrMovableTab(t,e,o){return this.canReorderTabs()?r("div",{key:t.id,role:"presentation","data-reorder-id":t.id},this.renderTab(t,e,o),r("limel-drag-handle",{"aria-hidden":"true",dragDirection:this.getOrientation(),tooltipOpenDirection:"vertical"===this.getOrientation()?"right":"bottom"})):this.renderTab(t,e,o)}renderTab(t,e,o){return r("button",{key:t.id,role:"tab","aria-selected":t.active?"true":"false",tabindex:o?0:-1,onClick:()=>this.activateTab(e)},r("span",{class:"content"},this.renderIcon(t),r("span",{class:"text"},t.text),t.badge?r("limel-badge",{label:t.badge}):""))}triggerIconColorWarning(){this.tabs.some((t=>t.iconColor))&&console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}get host(){return o(this)}static get watchers(){return{tabs:[{tabsChanged:0}],orientation:[{orientationChanged:0}]}}};z.style="@charset \"UTF-8\";:host(limel-tab-bar){--limel-tab-background-color:var(--contrast-300);--limel-tab-border-radius:0.625rem;--limel-tab-content-inset:0.25rem;--limel-active-tab-background-color:var(       --tab-panel-background-color,       rgb(var(--contrast-100))   );--limel-active-tab-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );--limel-tab-active-outer-edge-curve-size:0.75rem;--limel-tab-separator-width:0.125rem;--limel-tab-separator-background-color:rgb(var(--contrast-600));isolation:isolate;display:block;position:relative}limel-scroller{--limel-scroller-fade-color:var(--limel-tab-background-color);--limel-scroller-content-padding:0.25rem       var(--limel-tab-active-outer-edge-curve-size) 0;background-color:rgb(var(--limel-tab-background-color))}:host(.has-tabs-with-equal-width:not([orientation=vertical])) button[role=tab],:host(.has-tabs-with-equal-width:not([orientation=vertical])) limel-scroller>div{flex:1 0 auto;max-width:var(--tab-bar-horizontal-tab-max-width, none)}limel-scroller>div:has(limel-drag-handle:hover),limel-scroller>div:has(limel-drag-handle:focus-within),limel-scroller>div.is-elevated,limel-scroller>div.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}limel-scroller>div.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}limel-scroller>div.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}limel-scroller>div.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-scroller>div{position:relative;display:flex;flex:0 0 auto}limel-scroller>div button[role=tab]{flex:1 1 auto;min-width:0}limel-scroller>div span.content{padding-right:2rem}limel-scroller>div limel-drag-handle{position:absolute;z-index:3;top:0;bottom:0;right:0.25rem}button[role=tab]{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;position:relative;display:flex;box-sizing:border-box;border-radius:0;padding:var(--limel-tab-content-inset);min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem;outline:none;cursor:pointer;white-space:nowrap;font-size:var(--limel-theme-default-font-size)}button[role=tab] limel-icon{transition:color 0.2s ease;color:rgb(var(--contrast-800));margin-left:-0.25rem;flex-shrink:0}button[role=tab] span.text{transition:color 0.2s ease;line-height:1.25;overflow:hidden;text-overflow:ellipsis;color:var(--limel-theme-on-surface-color)}button[role=tab]:hover span.text{color:var(--limel-theme-text-primary-on-background-color)}button[role=tab] limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600));pointer-events:none;flex-shrink:0}button[role=tab][aria-selected=true]{background-color:var(--limel-active-tab-background-color);z-index:2}button[role=tab][aria-selected=true]:before,button[role=tab][aria-selected=true]:after{content:\"\";display:block;width:var(--limel-tab-active-outer-edge-curve-size);height:var(--limel-tab-active-outer-edge-curve-size);position:absolute;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E\")}button[role=tab][aria-selected=true] limel-icon{color:var(--limel-active-tab-color)}button[role=tab][aria-selected=true] span.text{color:var(--limel-active-tab-color)}span.content{transition:box-shadow 0.2s ease;display:flex;flex-grow:1;min-width:0;align-items:center;justify-content:center;gap:0.375rem;padding:0 0.75rem;border-radius:calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset))}button[role=tab]:focus-visible span.content{transition-duration:0.3s;box-shadow:var(--shadow-depth-8-focused)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]{max-width:var(--tab-bar-horizontal-tab-max-width, 16rem)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]:not([aria-selected=true]):after{content:\"\";display:block;background-color:var(--limel-tab-separator-background-color);width:var(--limel-tab-separator-width);height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:calc(-1 * var(--limel-tab-separator-width))}:host(limel-tab-bar:not([orientation=vertical])) limel-scroller>:last-child:not([aria-selected=true]):after,:host(limel-tab-bar:not([orientation=vertical])) limel-scroller>:last-child>button[role=tab]:not([aria-selected=true]):after{display:none}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]{border-radius:var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before,:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after{bottom:0}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before{left:calc(-1 * var(--limel-tab-active-outer-edge-curve-size));transform:rotateY(180deg)}:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after{right:calc(-1 * var(--limel-tab-active-outer-edge-curve-size))}:host(limel-tab-bar[orientation=vertical]){width:var(--tab-bar-vertical-width, 10rem)}:host(limel-tab-bar[orientation=vertical]) div[role=tablist]{height:100%}:host(limel-tab-bar[orientation=vertical]) limel-scroller{--limel-scroller-content-padding:var(           --limel-tab-active-outer-edge-curve-size       )       0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;height:100%}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]{border-radius:var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius)}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before,:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after{right:0}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before{bottom:100%;transform:rotateY(180deg)}:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after{top:100%;transform:rotate(180deg)}:host(limel-tab-bar[orientation=vertical]) span.content{justify-content:flex-start}:host(limel-tab-bar[orientation=vertical]) span.text{flex-grow:1}";export{z as limel_tab_bar}