@limetech/lime-elements 36.3.0-next.32 → 36.3.0-next.34

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/translations/nl.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
   'callout.note': string;
   'callout.important': string;
   'callout.tip': string;
-  'callout.example': string;
+  'callout.caution': string;
   'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.3.0-next.32",
+  "version": "36.3.0-next.34",
   "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-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}