@limetech/lime-elements 36.1.0-next.9 → 36.1.0

package/dist/types/global/shared-types/link.types.d.ts

@@ -0,0 +1,25 @@
+export interface Link {
+  /**
+   * The url the link should point to.
+   */
+  href: string;
+  /**
+   * The text value to use for the link.
+   * Note that this might not be used by all components that use the
+   * Link interface.
+   */
+  text?: string;
+  /**
+   * Title for the link. Read by assistive tech and shown when the
+   * link is hovered. Can be used to provide additional information
+   * about the link. It improves accessibility both for sighted users
+   * and users of assistive technologies.
+   */
+  title?: string;
+  /**
+   * Target for the link. See
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+   * for more info.
+   */
+  target?: string;
+}

package/dist/types/interface.d.ts

@@ -1,4 +1,5 @@
 // Components interfaces
+export * from './global/shared-types/link.types';
 export * from './components/button/button.types';
 export * from './components/chip-set/chip.types';
 export * from './components/collapsible-section/action';
@@ -21,3 +22,4 @@ export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './components/dock/dock.types';
+export * from './components/info-tile/info-tile.types';

package/dist/types/stencil-public-runtime.d.ts

@@ -221,7 +221,9 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,29 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +284,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +293,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/dist/types/translations/da.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/dist/types/translations/en.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/dist/types/translations/fi.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/dist/types/translations/nl.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/dist/types/translations/no.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/dist/types/translations/sv.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+  'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.1.0-next.9",
+  "version": "36.1.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,55 +40,56 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^16.0.0",
-    "@popperjs/core": "^2.11.5",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@popperjs/core": "^2.11.6",
     "@rjsf/core": "^2.4.2",
-    "@stencil/core": "^2.15.1",
-    "@stencil/sass": "^1.5.2",
+    "@stencil/core": "^2.19.2",
+    "@stencil/sass": "^2.0.0",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/puppeteer": "^5.4.4",
-    "@types/react": "^18.0.21",
+    "@types/puppeteer": "^7.0.4",
+    "@types/react": "^18.0.25",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
-    "codemirror": "^5.65.3",
+    "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "dayjs": "^1.11.1",
-    "eslint": "^8.25.0",
+    "dayjs": "^1.11.6",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsdoc": "^39.3.14",
+    "eslint-plugin-ban": "^1.6.0",
+    "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-sonarjs": "^0.16.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
-    "jest-cli": "^28.0.2",
+    "jest-cli": "^27.4.5",
     "jsonlint-mod": "^1.7.6",
-    "jsx-dom": "^7.0.4",
+    "jsx-dom": "^8.0.3",
     "kompendium": "^0.11.3",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
     "moment": "^2.29.4",
     "number-abbreviate": "^2.0.0",
     "prettier": "^2.7.1",
-    "puppeteer": "^13.7.0",
+    "puppeteer": "^19.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
     "react-shadow-dom-retarget-events": "^1.1.0",
-    "replace-in-file": "^6.2.0",
+    "replace-in-file": "^6.3.5",
     "shelljs": "0.8.5",
     "showdown": "2.1.0",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.3"
   },
   "keywords": [
     "lime elements",

package/dist/cjs/limel-circular-progress.cjs.entry.js

@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2a28697b.js');
-const format = require('./format-c0047dfb.js');
-require('./_commonjsHelpers-0c557e26.js');
-
-const circularProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}:host{display:block;box-sizing:border-box}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n      --circular-progress-track-color,\n      rgb(var(--contrast-400))\n  );display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;box-shadow:0 0 0 0.125rem rgba(var(--contrast-100), 0.8);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:rgb(var(--contrast-100));box-shadow:var(--button-shadow-pressed)}.value{font-size:calc(var(--size) * 0.25);color:rgb(var(--contrast-1200));z-index:1;cursor:default}.suffix{opacity:0.7}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
-
-const PERCENT = 100;
-const CircularProgress = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * The value of the progress bar.
-     */
-    this.value = 0;
-    /**
-     * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
-     */
-    this.maxValue = PERCENT;
-    /**
-     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
-     */
-    this.suffix = '%';
-    /**
-     * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
-     */
-    this.displayPercentageColors = false;
-  }
-  render() {
-    const classList = {
-      'lime-circular-progress': true,
-      'displays-percentage-colors': this.displayPercentageColors,
-    };
-    const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
-    const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
-    return (index.h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, index.h("span", { class: "value" }, format.abbreviate(value), index.h("span", { class: "suffix" }, this.suffix))));
-  }
-};
-CircularProgress.style = circularProgressCss;
-
-exports.limel_circular_progress = CircularProgress;

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

@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2a28697b.js');
-const randomString = require('./random-string-4c3b7f1c.js');
-const zipObject = require('./zipObject-93a471fa.js');
-require('./_assignValue-7c18d8d6.js');
-require('./_defineProperty-8f56146d.js');
-require('./_getNative-60328036.js');
-require('./eq-9a943b00.js');
-require('./isObject-e28b7997.js');
-
-const menuCss = ":host{display:inline-block}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}";
-
-const Menu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cancel = index.createEvent(this, "cancel", 7);
-    this.select = index.createEvent(this, "select", 7);
-    /**
-     * A list of items and separators to show in the menu.
-     */
-    this.items = [];
-    /**
-     * Sets the disabled state of the menu.
-     */
-    this.disabled = false;
-    /**
-     * Decides the menu's location in relation to its trigger
-     */
-    this.openDirection = 'bottom-start';
-    /**
-     * Sets the open state of the menu.
-     */
-    this.open = false;
-    /**
-     * Defines whether the menu should show badges.
-     */
-    this.badgeIcons = false;
-    /**
-     * Renders list items in a grid layout, rather than a vertical list
-     */
-    this.gridLayout = false;
-    this.setTriggerAttributes = (element) => {
-      const attributes = {
-        'aria-haspopup': true,
-        'aria-expanded': this.open,
-        disabled: this.disabled,
-        role: 'button',
-      };
-      for (const [key, value] of Object.entries(attributes)) {
-        if (!value) {
-          element.removeAttribute(key);
-        }
-        else {
-          element.setAttribute(key, String(value));
-        }
-      }
-    };
-    this.onClose = () => {
-      this.cancel.emit();
-      this.open = false;
-    };
-    this.onTriggerClick = (event) => {
-      event.stopPropagation();
-      if (this.disabled) {
-        return;
-      }
-      this.open = !this.open;
-    };
-    this.handleSelect = (event) => {
-      event.stopPropagation();
-      this.select.emit(event.detail);
-      this.open = false;
-    };
-    this.setListElement = (element) => {
-      this.list = element;
-    };
-    this.focusMenuItem = () => {
-      var _a;
-      const activeElement = this.list.shadowRoot.activeElement;
-      activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
-      const MenuItems = this.items.filter(this.isMenuItem);
-      const selectedIndex = Math.max(MenuItems.findIndex((item) => item.selected), 0);
-      const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
-      (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.portalId = randomString.createRandomString();
-  }
-  openWatcher() {
-    if (!this.open) {
-      return;
-    }
-    const observer = new IntersectionObserver(() => {
-      observer.unobserve(this.list);
-      this.focusMenuItem();
-    });
-    observer.observe(this.list);
-  }
-  render() {
-    const cssProperties = this.getCssProperties();
-    const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (index.h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { name: "trigger" }), index.h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
-        'has-grid-layout': this.gridLayout,
-      } }, index.h("limel-menu-list", { class: {
-        'has-grid-layout has-interactive-items': this.gridLayout,
-      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
-  }
-  componentDidRender() {
-    const slotElement = this.host.shadowRoot.querySelector('slot');
-    slotElement.assignedElements().forEach(this.setTriggerAttributes);
-  }
-  getCssProperties() {
-    const propertyNames = [
-      '--menu-surface-width',
-      '--list-grid-item-max-width',
-      '--list-grid-item-min-width',
-      '--list-grid-gap',
-    ];
-    const style = getComputedStyle(this.host);
-    const values = propertyNames.map((property) => {
-      return style.getPropertyValue(property);
-    });
-    return zipObject.zipObject(propertyNames, values);
-  }
-  isMenuItem(item) {
-    return !('separator' in item);
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"]
-  }; }
-};
-Menu.style = menuCss;
-
-exports.limel_menu = Menu;

package/dist/esm/limel-circular-progress.entry.js

@@ -1,40 +0,0 @@
-import { r as registerInstance, h } from './index-11cd0b60.js';
-import { a as abbreviate } from './format-a0e2d949.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-
-const circularProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}:host{display:block;box-sizing:border-box}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n      --circular-progress-track-color,\n      rgb(var(--contrast-400))\n  );display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;box-shadow:0 0 0 0.125rem rgba(var(--contrast-100), 0.8);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:rgb(var(--contrast-100));box-shadow:var(--button-shadow-pressed)}.value{font-size:calc(var(--size) * 0.25);color:rgb(var(--contrast-1200));z-index:1;cursor:default}.suffix{opacity:0.7}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
-
-const PERCENT = 100;
-const CircularProgress = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * The value of the progress bar.
-     */
-    this.value = 0;
-    /**
-     * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
-     */
-    this.maxValue = PERCENT;
-    /**
-     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
-     */
-    this.suffix = '%';
-    /**
-     * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
-     */
-    this.displayPercentageColors = false;
-  }
-  render() {
-    const classList = {
-      'lime-circular-progress': true,
-      'displays-percentage-colors': this.displayPercentageColors,
-    };
-    const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
-    const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, h("span", { class: "value" }, abbreviate(value), h("span", { class: "suffix" }, this.suffix))));
-  }
-};
-CircularProgress.style = circularProgressCss;
-
-export { CircularProgress as limel_circular_progress };

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

@@ -1,133 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
-import { c as createRandomString } from './random-string-2246b81e.js';
-import { z as zipObject } from './zipObject-2bb1968e.js';
-import './_assignValue-fb2bf80a.js';
-import './_defineProperty-2105cb48.js';
-import './_getNative-93d6bfe9.js';
-import './eq-c1c7f528.js';
-import './isObject-c74e273c.js';
-
-const menuCss = ":host{display:inline-block}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}";
-
-const Menu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cancel = createEvent(this, "cancel", 7);
-    this.select = createEvent(this, "select", 7);
-    /**
-     * A list of items and separators to show in the menu.
-     */
-    this.items = [];
-    /**
-     * Sets the disabled state of the menu.
-     */
-    this.disabled = false;
-    /**
-     * Decides the menu's location in relation to its trigger
-     */
-    this.openDirection = 'bottom-start';
-    /**
-     * Sets the open state of the menu.
-     */
-    this.open = false;
-    /**
-     * Defines whether the menu should show badges.
-     */
-    this.badgeIcons = false;
-    /**
-     * Renders list items in a grid layout, rather than a vertical list
-     */
-    this.gridLayout = false;
-    this.setTriggerAttributes = (element) => {
-      const attributes = {
-        'aria-haspopup': true,
-        'aria-expanded': this.open,
-        disabled: this.disabled,
-        role: 'button',
-      };
-      for (const [key, value] of Object.entries(attributes)) {
-        if (!value) {
-          element.removeAttribute(key);
-        }
-        else {
-          element.setAttribute(key, String(value));
-        }
-      }
-    };
-    this.onClose = () => {
-      this.cancel.emit();
-      this.open = false;
-    };
-    this.onTriggerClick = (event) => {
-      event.stopPropagation();
-      if (this.disabled) {
-        return;
-      }
-      this.open = !this.open;
-    };
-    this.handleSelect = (event) => {
-      event.stopPropagation();
-      this.select.emit(event.detail);
-      this.open = false;
-    };
-    this.setListElement = (element) => {
-      this.list = element;
-    };
-    this.focusMenuItem = () => {
-      var _a;
-      const activeElement = this.list.shadowRoot.activeElement;
-      activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
-      const MenuItems = this.items.filter(this.isMenuItem);
-      const selectedIndex = Math.max(MenuItems.findIndex((item) => item.selected), 0);
-      const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
-      (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.portalId = createRandomString();
-  }
-  openWatcher() {
-    if (!this.open) {
-      return;
-    }
-    const observer = new IntersectionObserver(() => {
-      observer.unobserve(this.list);
-      this.focusMenuItem();
-    });
-    observer.observe(this.list);
-  }
-  render() {
-    const cssProperties = this.getCssProperties();
-    const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
-        'has-grid-layout': this.gridLayout,
-      } }, h("limel-menu-list", { class: {
-        'has-grid-layout has-interactive-items': this.gridLayout,
-      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
-  }
-  componentDidRender() {
-    const slotElement = this.host.shadowRoot.querySelector('slot');
-    slotElement.assignedElements().forEach(this.setTriggerAttributes);
-  }
-  getCssProperties() {
-    const propertyNames = [
-      '--menu-surface-width',
-      '--list-grid-item-max-width',
-      '--list-grid-item-min-width',
-      '--list-grid-gap',
-    ];
-    const style = getComputedStyle(this.host);
-    const values = propertyNames.map((property) => {
-      return style.getPropertyValue(property);
-    });
-    return zipObject(propertyNames, values);
-  }
-  isMenuItem(item) {
-    return !('separator' in item);
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"]
-  }; }
-};
-Menu.style = menuCss;
-
-export { Menu as limel_menu };