@limetech/lime-elements 39.0.1 → 39.0.3

package/dist/collection/components/chart/chart.css

@@ -1,191 +1,4 @@
 @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.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * 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 --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.
-* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.
-* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.
-* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.
-* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.
-*/
-:host(limel-chart) {
-  --chart-axis-line-color: var(
-      --limel-chart-axis-line-color,
-      rgb(var(--contrast-900))
-  );
-  box-sizing: border-box;
-  isolation: isolate;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  padding: var(--limel-chart-padding);
-}
-
-table {
-  all: unset;
-  border-collapse: collapse;
-  border-spacing: 0;
-  empty-cells: show;
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-}
-table colgroup,
-table thead,
-table tbody,
-table tr,
-table th,
-table td {
-  all: unset;
-}
-table caption,
-table colgroup,
-table thead,
-table tfoot,
-table th,
-table td {
-  position: absolute;
-  width: 0;
-  height: 0;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-.chart {
-  position: relative;
-  flex-grow: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-.chart:has(.item:hover) .item, .chart:has(.item:focus-visible) .item {
-  opacity: 0.4;
-}
-
-.item:focus {
-  outline: none;
-}
-.item:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
-.item {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;
-  cursor: help;
-}
-.item:focus-visible, .item:hover {
-  opacity: 1 !important;
-}
-.item[role=button] {
-  cursor: pointer;
-}
-
-limel-spinner {
-  margin: auto;
-}
-
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -307,7 +120,7 @@ limel-spinner {
 :host(limel-chart[type=dot][orientation=landscape]) .item,
 :host(limel-chart[type=line][orientation=landscape]) .item,
 :host(limel-chart[type=area][orientation=landscape]) .item {
-  min-width: 0.5rem;
+  min-width: var(--limel-chart-min-item-size);
   width: inherit;
 }
 
@@ -329,7 +142,7 @@ limel-spinner {
 :host(limel-chart[type=dot][orientation=portrait]) .item,
 :host(limel-chart[type=line][orientation=portrait]) .item,
 :host(limel-chart[type=area][orientation=portrait]) .item {
-  min-height: 0.5rem;
+  min-height: var(--limel-chart-min-item-size);
   height: inherit;
 }
 
@@ -386,93 +199,6 @@ limel-spinner {
   writing-mode: sideways-lr;
 }
 
-/**
-* 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.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * 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-chart[display-item-text][type=line]) td.text,
 :host(limel-chart[display-item-text][type=area]) td.text,
 :host(limel-chart[display-item-text][type=dot]) td.text,
@@ -713,22 +439,22 @@ limel-spinner {
 }
 
 :host(limel-chart[type=bar]) .item {
-  background: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
 }
 
 :host(limel-chart[type=dot]) .item:before, :host(limel-chart[type=dot]) .item:after {
   content: "";
   position: absolute;
   margin: auto;
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--limel-chart-min-item-size);
+  height: var(--limel-chart-min-item-size);
   border-radius: 50%;
 }
 :host(limel-chart[type=dot]) .item::after {
-  background-color: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background-color: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
 }
 :host(limel-chart[type=dot]) .item.has-start-value:before {
-  background-color: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background-color: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
 }
 
 :host(limel-chart[type=bar][orientation=landscape]) .item,
@@ -786,8 +512,8 @@ limel-spinner {
 :host(limel-chart[type=area]) .item:after,
 :host(limel-chart[type=line]) .item:after {
   margin: auto;
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--limel-chart-min-item-size);
+  height: var(--limel-chart-min-item-size);
   border-radius: 50%;
   border: 1px solid rgb(var(--contrast-100));
 }
@@ -801,7 +527,7 @@ limel-spinner {
   transition: border-color 0.2s ease, opacity 0.4s ease;
   content: "";
   position: absolute;
-  background: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
 }
 :host(limel-chart[type=area]) .item:hover:after, :host(limel-chart[type=area]) .item:focus-visible:after,
 :host(limel-chart[type=line]) .item:hover:after,
@@ -895,7 +621,7 @@ limel-spinner {
 
 :host(limel-chart[type=pie]) .item,
 :host(limel-chart[type=doughnut]) .item {
-  background: conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));
+  background: conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--limel-chart-default-item-color)) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));
 }
 :host(limel-chart[type=pie]) .item:focus, :host(limel-chart[type=pie]) .item:focus-visible,
 :host(limel-chart[type=doughnut]) .item:focus,
@@ -939,7 +665,7 @@ limel-spinner {
   border: 1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)));
 }
 :host(limel-chart[type=ring]) .item {
-  background: conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));
+  background: conic-gradient(var(--limel-chart-item-color, var(--limel-chart-default-item-color)) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));
   max-width: calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));
   max-height: calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));
 }
@@ -947,93 +673,6 @@ limel-spinner {
   filter: grayscale(0) !important;
 }
 
-/**
-* 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.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * 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-chart[type=stacked-bar]) .chart {
   display: flex;
   border-radius: 0.25rem;
@@ -1043,7 +682,7 @@ limel-spinner {
 :host(limel-chart[type=stacked-bar]) .item {
   display: flex;
   border-radius: var(--chart-item-border-radius, 0);
-  background: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
 }
 :host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible) {
   box-shadow: none !important;
@@ -1133,7 +772,7 @@ limel-spinner {
   transform: translateY(-60%);
   width: 0.4rem;
   border-radius: 1rem;
-  border-color: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  border-color: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
   border-style: solid;
   border-bottom-width: 1.75rem;
   border-right-color: transparent;
@@ -1142,7 +781,7 @@ limel-spinner {
 }
 :host(limel-chart[type=nps]) .item:after {
   border-radius: 50%;
-  background-color: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+  background-color: var(--limel-chart-item-color, var(--limel-chart-default-item-color));
   aspect-ratio: 1;
   height: clamp(0.75rem, 10%, 1.25rem);
   border: 0.125rem solid rgb(var(--contrast-100), 0.8);
@@ -1205,4 +844,109 @@ limel-spinner {
 :host(limel-chart[orientation=portrait]) .axis-line limel-badge {
   bottom: -1rem;
   right: -1rem;
+}
+
+/**
+* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.
+* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.
+* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.
+* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.
+* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.
+*/
+:host(limel-chart) {
+  --limel-chart-min-item-size: 0.5rem;
+  --limel-chart-default-item-color: var(
+      --chart-item-color,
+      rgb(var(--contrast-1100), 0.8)
+  );
+  --chart-axis-line-color: var(
+      --limel-chart-axis-line-color,
+      rgb(var(--contrast-900))
+  );
+  box-sizing: border-box;
+  isolation: isolate;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--limel-chart-padding);
+}
+
+table {
+  all: unset;
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+table colgroup,
+table thead,
+table tbody,
+table tr,
+table th,
+table td {
+  all: unset;
+}
+table caption,
+table colgroup,
+table thead,
+table tfoot,
+table th,
+table td {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.chart {
+  position: relative;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+.chart:has(.item:hover) .item, .chart:has(.item:focus-visible) .item {
+  opacity: 0.4;
+}
+
+.item:focus {
+  outline: none;
+}
+.item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.item {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;
+  cursor: help;
+}
+.item:focus-visible, .item:hover {
+  opacity: 1 !important;
+}
+.item[role=button] {
+  cursor: pointer;
+}
+
+limel-spinner {
+  margin: auto;
 }