@limetech/lime-elements 38.3.2 → 38.3.3

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

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /**
  * @prop --icon-background-color: Background color of the button.
  */

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

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /**
 * @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`

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

@@ -123,6 +123,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 .mdc-notched-outline {
   display: flex;
   position: absolute;

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

@@ -63,6 +63,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -944,6 +960,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within) {
@@ -5427,6 +5459,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within) {
@@ -5941,6 +5989,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
 }
@@ -6045,6 +6109,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host {
   --line-height-of-secondary-text: 1rem;
 }

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

@@ -61,6 +61,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *
@@ -414,6 +430,22 @@ img {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 kbd {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   font-weight: 600;

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

@@ -69,6 +69,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -1014,6 +1030,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within) {
@@ -5497,6 +5529,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within) {
@@ -6011,6 +6059,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
 }
@@ -6115,6 +6179,22 @@ limel-dynamic-label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host {
   --line-height-of-secondary-text: 1rem;
 }

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

@@ -63,6 +63,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-popover-surface) {
   isolation: isolate;
   position: relative;

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

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/select/select.css

@@ -123,6 +123,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 .mdc-floating-label {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -1874,6 +1890,22 @@ select.limel-select__native-control {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-select:focus),
 :host(limel-select:focus-visible),
 :host(limel-select:focus-within) {

package/dist/collection/components/shortcut/shortcut.css

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /**
 * @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`

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

@@ -979,6 +979,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-slider:focus),
 :host(limel-slider:focus-visible),
 :host(limel-slider:focus-within) {

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

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-split-button.has-menu) {
   --button-padding-right: 2rem;
 }

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

@@ -913,6 +913,22 @@ label {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host(limel-switch:focus),
 :host(limel-switch:focus-visible),
 :host(limel-switch:focus-within) {

package/dist/collection/components/table/table.css

@@ -57,6 +57,22 @@
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *
@@ -1300,6 +1316,22 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *
@@ -1508,6 +1540,22 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *
@@ -1676,6 +1724,22 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * to enable you to truncate a piece of text,
 * after a certain number of lines.
 */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *