@limetech/lime-elements 40.19.0 → 40.20.0

package/dist/esm/{limel-breadcrumbs_6.entry.js → limel-badge_7.entry.js}

@@ -1,10 +1,11 @@
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-BU9IJqli.js';
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-BU9IJqli.js';
+import { a as abbreviate } from './format-hTrthuPP.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-CIf8aGSd.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { g as getIconName, b as getIconColor } from './get-icon-props-CgNJbSP4.js';
-import { E as ESCAPE, b as ARROW_DOWN, A as ARROW_UP, T as TAB, a as ENTER, f as SPACE, c as ARROW_LEFT, d as ARROW_RIGHT } from './keycodes-Bu6-QXrA.js';
+import { E as ESCAPE, b as ARROW_DOWN, A as ARROW_UP, T as TAB, a as ENTER, f as SPACE, d as ARROW_LEFT, e as ARROW_RIGHT } from './keycodes-DQ5DmW_Y.js';
 import { b as getHref, a as getTarget, g as getRel } from './link-helper-5KsJICvh.js';
-import { i as isTextEditingKey } from './typeahead-DOlnT3wh.js';
+import { i as isTextEditingKey } from './typeahead-B4PwrlM3.js';
 import { s as setControlledElement } from './controlled-element-ByOXsysp.js';
 import { c as createLiveMessage, i as isDescendant } from './live-message-BQAYeNiX.js';
 import { t as translations } from './translations-kct5Kybu.js';
@@ -17,6 +18,7 @@ import { i as isFunction } from './isFunction-9zQTeQI8.js';
 import { _ as __extends, a as __assign, b as __values, M as MDCFoundation, c as MDCComponent, d as closest } from './ponyfill-6YuZiAPi.js';
 import { c as cssClasses$2, n as numbers$2, M as MDCListFoundation, a as MDCList } from './component-kP1jCDLp.js';
 import { M as MDCRipple } from './component-CrjPGt1I.js';
+import './_commonjsHelpers-B85MJLTf.js';
 import './language-ChagAaNf.js';
 import './isObject-BJQylLSL.js';
 import './toNumber-D6JYpQI9.js';
@@ -29,6 +31,36 @@ import './_getNative-COawFdVX.js';
 import './eq-CZ30nDJE.js';
 import './get-focus-target-BhoYaGlg.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();
+
 const breadcrumbsCss = () => `@charset "UTF-8";:host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var(       --breadcrumbs-item-text-color,       rgb(var(--contrast-1500))   );--limel-overflow-mask-horizontal:linear-gradient(       to right,       transparent 0%,       black calc(0% + var(--limel-left-edge-fade-width, 1rem)),       black calc(100% - var(--limel-right-edge-fade-width, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-horizontal);mask-image:var(--limel-overflow-mask-horizontal);padding-left:var(--limel-left-edge-fade-width, 1rem);padding-right:var(--limel-right-edge-fade-width, 1rem);--limel-left-edge-fade-width:0.5rem;--limel-right-edge-fade-width:0.5rem}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);display:flex;align-items:center;justify-content:center;width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--limel-breadcrumbs-item-text-color)}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover,button.step:not(.last):focus,button.step:not(.last):focus-visible{will-change:color, background-color, box-shadow, transform}button.step:not(.last):hover,button.step:not(.last):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.step:not(.last):hover{box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.step:not(.last):hover,button.step:not(.last):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}:host(limel-breadcrumbs){direction:rtl}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}`;
 
 const Breadcrumbs = class {
@@ -3411,4 +3443,4 @@ const Spinner = class {
 };
 Spinner.style = spinnerCss();
 
-export { Breadcrumbs as limel_breadcrumbs, InputField as limel_input_field, Menu as limel_menu, MenuList as limel_menu_list, MenuSurface as limel_menu_surface, Spinner as limel_spinner };
+export { Badge as limel_badge, Breadcrumbs as limel_breadcrumbs, InputField as limel_input_field, Menu as limel_menu, MenuList as limel_menu_list, MenuSurface as limel_menu_surface, Spinner as limel_spinner };