@limetech/lime-elements 37.62.3 → 37.63.1

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;
@@ -87,7 +92,7 @@
   bottom: 0;
   left: 0;
   z-index: -1;
-  opacity: 0.75;
+  opacity: 0.95;
   border-radius: var(--popover-border-radius, 0.75rem);
   background-color: var(--popover-body-background-color, var(--lime-elevated-surface-background-color));
 }

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!
  *

package/dist/collection/components/select/select.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-floating-label {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -1846,6 +1851,11 @@ select.limel-select__native-control {
 * 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-select:focus),
 :host(limel-select:focus-visible),
 :host(limel-select:focus-within),

package/dist/collection/components/shortcut/shortcut.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 --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`
 * @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`
 * @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`

package/dist/collection/components/slider/slider.css

@@ -975,6 +975,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-slider:focus),
 :host(limel-slider:focus-visible),
 :host(limel-slider:focus-within),

package/dist/collection/components/split-button/split-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.
+*/
 :host(limel-split-button.has-menu) {
   --button-padding-right: 2rem;
   --button-padding-left: 1rem;

package/dist/collection/components/switch/switch.css

@@ -904,6 +904,11 @@ label {
 * 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-switch:focus),
 :host(limel-switch:focus-visible),
 :host(limel-switch:focus-within),

package/dist/collection/components/table/table.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!
  *
@@ -1293,6 +1298,11 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 * 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!
  *
@@ -1482,6 +1492,11 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * 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!
  *
@@ -1645,6 +1660,11 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * 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/text-editor/prosemirror-adapter/prosemirror-adapter.css

@@ -466,6 +466,11 @@ li {
 * 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/text-editor/text-editor.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 --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.
  * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).

package/dist/collection/style/mixins.scss

@@ -361,3 +361,16 @@
         @error "Please specify the font-family #{$letterform}!";
     }
 }
+
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+@mixin truncate-text-on-line($max-lines) {
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $max-lines;
+}