@limetech/lime-elements 37.62.3 → 37.63.0

package/dist/collection/components/checkbox/checkbox.css

@@ -872,6 +872,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),

package/dist/collection/components/chip/chip.css

@@ -53,6 +53,11 @@
 * in the `<style>` tag of `index.html`.
 */
 /**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
 * @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.
 * @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.
 */

package/dist/collection/components/chip-set/chip-set.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .mdc-notched-outline {
   display: flex;
   position: absolute;
@@ -2183,6 +2188,11 @@ limel-chip.can-be-removed {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-chip-set:focus),
 :host(limel-chip-set:focus-visible),
 :host(limel-chip-set:focus-within),

package/dist/collection/components/circular-progress/circular-progress.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/code-editor/code-editor.css

@@ -498,6 +498,11 @@ span.CodeMirror-selectedtext { background: none; }
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
  * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.8125rem`.

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open
@@ -189,11 +194,11 @@ header {
   height: auto;
   max-height: 3rem;
   line-height: 1.2rem;
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .divider-line {

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -604,6 +604,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -657,6 +662,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/color-picker/color-picker.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :root {
   --mdc-theme-primary: #26a69a;
   --mdc-theme-secondary: #575756;

package/dist/collection/components/dialog/dialog.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/dock/dock.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/dynamic-label/dynamic-label.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 * {
   box-sizing: border-box;
   min-width: 0;

package/dist/collection/components/file/file.css

@@ -1,3 +1,62 @@
+@charset "UTF-8";
+/**
+ * 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.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.
  * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.
@@ -32,9 +91,9 @@
   height: auto;
   max-height: 3rem;
   line-height: 1;
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }

package/dist/collection/components/file-viewer/file-viewer.css

@@ -124,6 +124,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host {
   isolation: isolate;
   position: relative;

package/dist/collection/components/form/form.css

@@ -697,6 +697,11 @@ limel-code-editor {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .limel-form-row--layout {
   --limel-form-row-border-radius: 0.375rem;
   --limel-form-row-icon-size: 1.75rem;

package/dist/collection/components/header/header.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/help/help.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 limel-popover {
   display: flex;
   --popover-surface-width: min(calc(100vw - 4rem), 22rem);

package/dist/collection/components/help/limel-help-content.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-help-content) {
   display: flex;
   box-sizing: border-box;

package/dist/collection/components/icon-button/icon-button.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --icon-background-color: Background color of the button.
  */

package/dist/collection/components/info-tile/info-tile.css

@@ -53,6 +53,11 @@
 * in the `<style>` tag of `index.html`.
 */
 /**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
 * @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
 * @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`
 * @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`

package/dist/collection/components/input-field/input-field.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .mdc-notched-outline {
   display: flex;
   position: absolute;

package/dist/collection/components/list/list.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -925,6 +930,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5374,6 +5384,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5885,6 +5900,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
 }
@@ -5917,6 +5937,64 @@ a.mdc-list-item {
   z-index: 1;
 }
 
+/**
+ * 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.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host {
   --line-height-of-secondary-text: 1rem;
 }
@@ -5925,11 +6003,12 @@ a.mdc-list-item {
   height: auto !important;
 }
 .mdc-deprecated-list-item .mdc-deprecated-list-item__secondary-text {
-  line-height: var(--line-height-of-secondary-text);
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  overflow: hidden;
+  white-space: normal;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  line-height: var(--line-height-of-secondary-text);
 }
 
 :host(.has-grid-layout) {

package/dist/collection/components/markdown/markdown.css

@@ -56,6 +56,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/menu-list/menu-list.css

@@ -64,6 +64,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -995,6 +1000,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5444,6 +5454,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5955,6 +5970,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
 }
@@ -5987,6 +6007,64 @@ a.mdc-list-item {
   z-index: 1;
 }
 
+/**
+ * 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.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host {
   --line-height-of-secondary-text: 1rem;
 }
@@ -5995,11 +6073,12 @@ a.mdc-list-item {
   height: auto !important;
 }
 .mdc-deprecated-list-item .mdc-deprecated-list-item__secondary-text {
-  line-height: var(--line-height-of-secondary-text);
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  overflow: hidden;
+  white-space: normal;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  line-height: var(--line-height-of-secondary-text);
 }
 
 :host(.has-grid-layout) {

package/dist/collection/components/popover-surface/popover-surface.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-popover-surface) {
   isolation: isolate;
   position: relative;

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *