@limetech/lime-elements 36.3.0-next.31 → 36.3.0-next.33

package/dist/lime-elements/style/mixins.scss

@@ -1,4 +1,11 @@
-@use './functions';
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 
 @mixin visualize-keyboard-focus {
     &:focus {
@@ -52,6 +59,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
@@ -79,6 +87,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
@@ -105,6 +114,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
 
@@ -131,6 +141,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
 
@@ -156,14 +167,14 @@
 
     cursor: pointer;
 
-    height: functions.pxToRem(20);
-    width: functions.pxToRem(20);
+    height: 1.25rem;
+    width: 1.25rem;
     border-radius: 50%;
 
     background: {
         repeat: no-repeat;
         position: center;
-        size: functions.pxToRem(12);
+        size: 0.75rem;
         image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
     }
 }

package/dist/scss/mixins.scss

@@ -0,0 +1,186 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+
+@mixin visualize-keyboard-focus {
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--shadow-depth-8-focused);
+    }
+}
+
+@mixin in($media) {
+    // ⛔️ As long as we don't have a script that generates a
+    // `.css` files automatically, we cannot use this mixin.
+    // we need to manually write the dark-mode CSS variables
+    // inside this file: /style/color-palette-extended.css
+    //
+    // ⚠️ Also note that this mixin only puts styles
+    // on the `:root` which means the `<html` level.
+    // Therefore, it cannot be used inside components
+    // to generate custom dark-mode styles.
+
+    @if $media == dark-mode {
+        @media (prefers-color-scheme: dark) {
+            :root:not([data-theme='force-light']) {
+                @content;
+            }
+        }
+        :root[data-theme='force-dark'] {
+            @content;
+        }
+
+        // @media (prefers-color-scheme: dark) {
+        //     :host(:not([data-theme='force-light'])) & {
+        //         @content;
+        //     }
+        // }
+        // :host([data-theme='force-dark']) & {
+        //     @content;
+        // }
+    }
+}
+
+@mixin is-elevated-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        box-shadow: var(--button-shadow-pressed);
+
+        transform: translate3d(0, 0.08rem, 0);
+    }
+}
+
+@mixin is-elevated-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        background-color: $background-color--inset;
+        box-shadow: var(--button-shadow-inset-pressed);
+        transform: translate3d(0, 0.05rem, 0);
+    }
+}
+
+@mixin is-flat-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        box-shadow: var(--button-shadow-pressed);
+
+        transform: translate3d(0, 0.08rem, 0);
+    }
+}
+
+@mixin is-flat-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        background-color: $background-color--inset;
+        box-shadow: var(--button-shadow-inset-pressed);
+        transform: translate3d(0, 0.05rem, 0);
+    }
+}
+
+@mixin clear-all-button() {
+    // NOTE: you may need to specify "position: absolute" and align the position where you use this mixin
+    @include is-flat-clickable(
+        $background-color: rgb(var(--contrast-900)),
+        $background-color--hovered: rgb(var(--contrast-1100))
+    );
+
+    cursor: pointer;
+
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+
+    background: {
+        repeat: no-repeat;
+        position: center;
+        size: 0.75rem;
+        image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+    }
+}
+
+@mixin truncate-text() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

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

@@ -0,0 +1,37 @@
+import { CalloutType } from './callout.types';
+import { Languages } from '@limetech/lime-elements';
+/**
+ * Callouts—also known as Admonitions—are useful for including supportive or
+ * special content within a large piece of text, or even inside a user
+ * interface.
+ *
+ * When used in a document or text based user interface, the callout attracts
+ * the reader's attention to a particular piece of information, without
+ * significantly interrupting their flow of reading the document.
+ *
+ * In a user interface, a callout is more intrusive to the end-user. Still, it
+ * could be a good choice when you intend to slightly disturb the user's
+ * attention, and challenge them to pay extra attention to the information
+ * presented. In such cases, a callout should not be used as a static and
+ * constantly present element of the UI. Rather, it should be displayed when
+ * something unusual or remarkable demands the user's attention.
+ *
+ * @exampleComponent limel-example-callout-note
+ * @exampleComponent limel-example-callout-important
+ * @exampleComponent limel-example-callout-tip
+ * @exampleComponent limel-example-callout-caution
+ * @exampleComponent limel-example-callout-warning
+ */
+export declare class Callout {
+  /**
+   * Defines how the component is visualized, for example
+   * which heading, color or icon is used in its user interface.
+   */
+  type?: CalloutType;
+  /**
+   * Defines the language for translations.
+   * Will translate the headings for supported languages.
+   */
+  language: Languages;
+  render(): any[];
+}

package/dist/types/components/callout/callout.helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function getIcon(type?: string): string;
+export declare function getHeading(type?: string, language?: string): string;

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

@@ -0,0 +1,10 @@
+/**
+ * Each of the supported callout types has a distinct color and icon.
+ *
+ * - `note`: You might read this, you might not.
+ * - `important`: You should read this.
+ * - `tip`: You want to read this.
+ * - `caution`: I hope you read this.
+ * - `warning`: You need to read this.
+ */
+export declare type CalloutType = 'note' | 'important' | 'tip' | 'caution' | 'warning';

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
+import { CalloutType } from "./components/callout/callout.types";
 import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
@@ -86,6 +87,16 @@ export namespace Components {
          */
         "value": Button[];
     }
+    interface LimelCallout {
+        /**
+          * Defines the language for translations. Will translate the headings for supported languages.
+         */
+        "language": Languages;
+        /**
+          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
+         */
+        "type"?: CalloutType;
+    }
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -1378,6 +1389,12 @@ declare global {
         prototype: HTMLLimelButtonGroupElement;
         new (): HTMLLimelButtonGroupElement;
     };
+    interface HTMLLimelCalloutElement extends Components.LimelCallout, HTMLStencilElement {
+    }
+    var HTMLLimelCalloutElement: {
+        prototype: HTMLLimelCalloutElement;
+        new (): HTMLLimelCalloutElement;
+    };
     interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
     }
     var HTMLLimelCheckboxElement: {
@@ -1653,6 +1670,7 @@ declare global {
         "limel-banner": HTMLLimelBannerElement;
         "limel-button": HTMLLimelButtonElement;
         "limel-button-group": HTMLLimelButtonGroupElement;
+        "limel-callout": HTMLLimelCalloutElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip-set": HTMLLimelChipSetElement;
         "limel-circular-progress": HTMLLimelCircularProgressElement;
@@ -1761,6 +1779,16 @@ declare namespace LocalJSX {
          */
         "value"?: Button[];
     }
+    interface LimelCallout {
+        /**
+          * Defines the language for translations. Will translate the headings for supported languages.
+         */
+        "language"?: Languages;
+        /**
+          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
+         */
+        "type"?: CalloutType;
+    }
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -3112,6 +3140,7 @@ declare namespace LocalJSX {
         "limel-banner": LimelBanner;
         "limel-button": LimelButton;
         "limel-button-group": LimelButtonGroup;
+        "limel-callout": LimelCallout;
         "limel-checkbox": LimelCheckbox;
         "limel-chip-set": LimelChipSet;
         "limel-circular-progress": LimelCircularProgress;
@@ -3167,6 +3196,7 @@ declare module "@stencil/core" {
             "limel-banner": LocalJSX.LimelBanner & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
             "limel-button": LocalJSX.LimelButton & JSXBase.HTMLAttributes<HTMLLimelButtonElement>;
             "limel-button-group": LocalJSX.LimelButtonGroup & JSXBase.HTMLAttributes<HTMLLimelButtonGroupElement>;
+            "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
             "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
             "limel-chip-set": LocalJSX.LimelChipSet & JSXBase.HTMLAttributes<HTMLLimelChipSetElement>;
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;

package/dist/types/interface.d.ts

@@ -23,3 +23,4 @@ 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';
+export * from './components/callout/callout.types';

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.example': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

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

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.3.0-next.31",
+  "version": "36.3.0-next.33",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -62,7 +62,7 @@
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^40.1.0",
+    "eslint-plugin-jsdoc": "^40.1.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",

package/dist/lime-elements/p-246862ec.js

@@ -1 +0,0 @@
-const e={da:{"date-picker.today":"Idag","date-picker.month.heading":"Måned","date-picker.quarter.heading":"Kvartal","date-picker.year.heading":"År","chip-set.clear-all":"Ryd alle","file.drag-and-drop-tips":"Træk og slip filen her, eller klik for at gennemse."},en:{"date-picker.today":"Today","date-picker.month.heading":"Month","date-picker.quarter.heading":"Quarter","date-picker.year.heading":"Year","chip-set.clear-all":"Clear all","chip-set.remove-chip":"Remove chip","snackbar.dismiss":"Dismiss","file.drag-and-drop-tips":"Drag and drop your file here, or click to browse."},fi:{"date-picker.today":"Tänään","date-picker.month.heading":"Kuukausi","date-picker.quarter.heading":"Vuosineljännes","date-picker.year.heading":"Vuosi","chip-set.clear-all":"Tyhjennä kaikki","file.drag-and-drop-tips":"Vedä ja pudota tiedostosi tähän, tai napsauta selataksesi."},no:{"date-picker.today":"I dag","date-picker.month.heading":"Måned","date-picker.quarter.heading":"Kvartal","date-picker.year.heading":"År","chip-set.clear-all":"Fjern alle","file.drag-and-drop-tips":"Dra og slipp filen her, eller klikk for å bla gjennom."},nl:{"date-picker.today":"Vandaag","date-picker.month.heading":"Maand","date-picker.quarter.heading":"Kwartaal","date-picker.year.heading":"Jaar","chip-set.clear-all":"Alles wissen","file.drag-and-drop-tips":"Sleep uw bestand en zet het hier neer of klik om te bladeren."},sv:{"date-picker.today":"Idag","date-picker.month.heading":"Månad","date-picker.quarter.heading":"Kvartal","date-picker.year.heading":"År","chip-set.clear-all":"Rensa alla","chip-set.remove-chip":"Ta bort chip","snackbar.dismiss":"Stäng","file.drag-and-drop-tips":"Dra och släpp filen här eller klicka om du vill bläddra."}},a=new class{get(a,r="en"){return e[r][a]}};export{a as t}

package/dist/lime-elements/p-ebbca880.entry.js

@@ -1 +0,0 @@
-import{r as n,h as e}from"./p-d4e788e1.js";const r=class{constructor(r){n(this,r),this.renderPrefix=()=>{if(this.prefix)return e("span",{class:"prefix"},this.prefix)},this.renderValue=()=>{var n;const r=(null!==(n=this.value)&&void 0!==n?n:"").toString().length;return!this.value&&this.loading?e("span",{class:"value"},"···"):this.value?e("span",{class:{value:!0,[`ch-${r}`]:!0}},this.value):void 0},this.renderSuffix=()=>{if(this.suffix)return e("span",{class:"suffix"},this.suffix)},this.renderIcon=()=>{if(this.icon)return e("limel-icon",{class:"icon",name:this.icon})},this.renderProgress=()=>{var n,r;if((null===(n=this.progress)||void 0===n?void 0:n.value)||0===(null===(r=this.progress)||void 0===r?void 0:r.value))return e("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})},this.renderLabel=()=>{if(this.label)return e("span",{class:"label"},this.label)},this.renderNotification=()=>{if(this.badge)return e("limel-badge",{label:this.badge})},this.renderSpinner=()=>{if(this.loading)return e("limel-linear-progress",{indeterminate:!0})},this.value=void 0,this.icon=void 0,this.label=null,this.prefix=void 0,this.suffix=void 0,this.disabled=!1,this.badge=void 0,this.loading=!1,this.link=void 0,this.progress=void 0}render(){var n,r,i,o,t,s,l,a,c,f;const d=this.checkProps(null==this?void 0:this.prefix)+this.value+" "+this.checkProps(null==this?void 0:this.suffix)+this.checkProps(null==this?void 0:this.label)+". "+this.checkProps(null===(n=null==this?void 0:this.progress)||void 0===n?void 0:n.prefix)+this.checkProps(null===(r=null==this?void 0:this.progress)||void 0===r?void 0:r.value)+this.checkProps(null===(i=null==this?void 0:this.progress)||void 0===i?void 0:i.suffix)+this.checkProps(null===(o=null==this?void 0:this.link)||void 0===o?void 0:o.title),u=this.disabled?"#":null===(t=this.link)||void 0===t?void 0:t.href;return[e("a",{title:null===(s=this.link)||void 0===s?void 0:s.title,href:u,target:null===(l=this.link)||void 0===l?void 0:l.target,tabindex:"0","aria-label":d,"aria-disabled":this.disabled,class:{"is-clickable":!!(null===(a=this.link)||void 0===a?void 0:a.href)&&!this.disabled,"has-circular-progress":!!(null===(c=this.progress)||void 0===c?void 0:c.value)||0===(null===(f=this.progress)||void 0===f?void 0:f.value)}},this.renderIcon(),this.renderProgress(),e("div",{class:"value-group"},this.renderPrefix(),e("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(n){return n?n+" ":""}};r.style="/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n  cursor: pointer;\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";export{r as limel_info_tile}