@limetech/lime-elements 37.67.0 → 37.68.0

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

@@ -0,0 +1,758 @@
+@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 --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 {
+  transition: background-color 0.2s ease, filter 0.2s ease, opacity 0.4s ease;
+  cursor: help;
+}
+.item:focus-visible, .item:hover {
+  opacity: 1 !important;
+}
+
+limel-spinner {
+  margin: auto;
+}
+
+:host(limel-chart[type=bar]) .chart,
+:host(limel-chart[type=dot]) .chart,
+:host(limel-chart[type=line]) .chart,
+:host(limel-chart[type=area]) .chart {
+  display: flex;
+  background-color: var(--chart-background-color, transparent);
+}
+:host(limel-chart[type=bar]) .item,
+:host(limel-chart[type=dot]) .item,
+:host(limel-chart[type=line]) .item,
+:host(limel-chart[type=area]) .item {
+  position: relative;
+  mix-blend-mode: hard-light;
+}
+:host(limel-chart[type=bar]) .item:focus,
+:host(limel-chart[type=dot]) .item:focus,
+:host(limel-chart[type=line]) .item:focus,
+:host(limel-chart[type=area]) .item:focus {
+  outline: none;
+}
+:host(limel-chart[type=bar]) .item:focus-visible,
+:host(limel-chart[type=dot]) .item:focus-visible,
+:host(limel-chart[type=line]) .item:focus-visible,
+:host(limel-chart[type=area]) .item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+
+:host(limel-chart[type=bar][orientation=landscape]),
+:host(limel-chart[type=dot][orientation=landscape]),
+:host(limel-chart[type=line][orientation=landscape]),
+:host(limel-chart[type=area][orientation=landscape]) {
+  --limel-chart-padding: 0.5rem 0.5rem 0.5rem 2rem;
+}
+:host(limel-chart[type=bar][orientation=landscape]) .chart,
+:host(limel-chart[type=dot][orientation=landscape]) .chart,
+:host(limel-chart[type=line][orientation=landscape]) .chart,
+:host(limel-chart[type=area][orientation=landscape]) .chart {
+  flex-direction: row;
+  align-items: flex-end;
+  overflow: auto hidden;
+  padding: 0 0.125rem;
+}
+:host(limel-chart[type=bar][orientation=landscape]) .item,
+: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;
+  width: inherit;
+}
+
+:host(limel-chart[type=bar][orientation=portrait]),
+:host(limel-chart[type=dot][orientation=portrait]),
+:host(limel-chart[type=line][orientation=portrait]),
+:host(limel-chart[type=area][orientation=portrait]) {
+  --limel-chart-padding: 0.5rem 0.5rem 1rem 0.5rem;
+}
+:host(limel-chart[type=bar][orientation=portrait]) .chart,
+:host(limel-chart[type=dot][orientation=portrait]) .chart,
+:host(limel-chart[type=line][orientation=portrait]) .chart,
+:host(limel-chart[type=area][orientation=portrait]) .chart {
+  flex-direction: column;
+  overflow: hidden auto;
+  padding: 0.125rem 0;
+}
+:host(limel-chart[type=bar][orientation=portrait]) .item,
+: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;
+  height: inherit;
+}
+
+:host(limel-chart[type=pie]) table,
+:host(limel-chart[type=doughnut]) table,
+:host(limel-chart[type=ring]) table {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+:host(limel-chart[type=pie]) .chart,
+:host(limel-chart[type=pie]) .item,
+:host(limel-chart[type=doughnut]) .chart,
+:host(limel-chart[type=doughnut]) .item,
+:host(limel-chart[type=ring]) .chart,
+:host(limel-chart[type=ring]) .item {
+  aspect-ratio: 1;
+  display: flex;
+  margin: auto;
+}
+:host(limel-chart[type=pie]) .chart,
+:host(limel-chart[type=doughnut]) .chart,
+:host(limel-chart[type=ring]) .chart {
+  justify-content: center;
+  align-items: center;
+}
+:host(limel-chart[type=pie]) .chart:before,
+:host(limel-chart[type=doughnut]) .chart:before,
+:host(limel-chart[type=ring]) .chart:before {
+  aspect-ratio: 1;
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  margin: auto;
+  border-radius: 50%;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: var(--chart-background-color, rgb(var(--contrast-200)));
+}
+:host(limel-chart[type=pie]) .item,
+:host(limel-chart[type=doughnut]) .item,
+:host(limel-chart[type=ring]) .item {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+}
+
+:host(limel-chart[type=bar]) .chart,
+:host(limel-chart[type=dot]) .chart {
+  gap: 0.5rem;
+}
+:host(limel-chart[type=bar]) .item,
+:host(limel-chart[type=dot]) .item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--chart-item-border-radius, 0.125rem);
+}
+
+:host(limel-chart[type=bar]) .item {
+  background: var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));
+}
+
+: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;
+  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)));
+}
+: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)));
+}
+
+:host(limel-chart[type=bar][orientation=landscape]) .item,
+:host(limel-chart[type=dot][orientation=landscape]) .item {
+  height: calc(var(--limel-chart-item-size) * 1%);
+  bottom: calc(var(--limel-chart-item-offset) * 1%);
+}
+:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,
+:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only {
+  height: calc(var(--limel-chart-item-size) * -1%);
+  transform-origin: bottom;
+  transform: rotateX(180deg);
+}
+
+:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value, :host(limel-chart[type=dot][orientation=landscape]) .item:hover, :host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible {
+  background: linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat;
+}
+:host(limel-chart[type=dot][orientation=landscape]) .item:before {
+  inset: auto 0 0 0;
+  transform: translateY(50%);
+}
+:host(limel-chart[type=dot][orientation=landscape]) .item::after {
+  inset: 0 0 auto 0;
+  transform: translateY(-50%);
+}
+
+:host(limel-chart[type=bar][orientation=portrait]) .item,
+:host(limel-chart[type=dot][orientation=portrait]) .item {
+  width: calc(var(--limel-chart-item-size) * 1%);
+  left: calc(var(--limel-chart-item-offset) * 1%);
+}
+:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,
+:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only {
+  width: calc(var(--limel-chart-item-size) * -1%);
+  transform-origin: left;
+  transform: rotateY(180deg);
+}
+
+:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value, :host(limel-chart[type=dot][orientation=portrait]) .item:hover, :host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible {
+  background: linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat;
+}
+:host(limel-chart[type=dot][orientation=portrait]) .item:before {
+  inset: 0 auto 0 0;
+  transform: translateX(-50%);
+}
+:host(limel-chart[type=dot][orientation=portrait]) .item:after {
+  inset: 0 0 0 auto;
+  transform: translateX(50%);
+}
+
+:host(limel-chart[type=area]) .item,
+:host(limel-chart[type=line]) .item {
+  position: relative;
+}
+:host(limel-chart[type=area]) .item:after,
+:host(limel-chart[type=line]) .item:after {
+  margin: auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  border: 1px solid rgb(var(--contrast-100));
+}
+:host(limel-chart[type=area]) .item:before,
+:host(limel-chart[type=line]) .item:before {
+  inset: 0;
+}
+:host(limel-chart[type=area]) .item:after, :host(limel-chart[type=area]) .item:before,
+:host(limel-chart[type=line]) .item:after,
+:host(limel-chart[type=line]) .item:before {
+  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)));
+}
+: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,
+:host(limel-chart[type=line]) .item:focus-visible:after {
+  border-color: transparent;
+}
+
+:host(limel-chart[type=line][orientation=landscape]) .item,
+:host(limel-chart[type=area][orientation=landscape]) .item {
+  height: 100%;
+}
+:host(limel-chart[type=line][orientation=landscape]) .item:after,
+:host(limel-chart[type=area][orientation=landscape]) .item:after {
+  transform: translateX(-50%) translateY(50%);
+  left: 0;
+  bottom: calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%);
+}
+
+:host(limel-chart[type=line][orientation=portrait]) .item,
+:host(limel-chart[type=area][orientation=portrait]) .item {
+  width: 100%;
+}
+:host(limel-chart[type=line][orientation=portrait]) .item:after,
+:host(limel-chart[type=area][orientation=portrait]) .item:after {
+  transform: translateX(-50%) translateY(-50%);
+  left: calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%);
+}
+
+:host(limel-chart[type=area]) .item:after {
+  opacity: 0;
+}
+:host(limel-chart[type=area]) .item:hover:after, :host(limel-chart[type=area]) .item:focus-visible:after {
+  opacity: 1;
+}
+:host(limel-chart[type=area]) .item:hover:before, :host(limel-chart[type=area]) .item:focus-visible:before {
+  opacity: 0.7;
+}
+
+:host(limel-chart[type=area][orientation=landscape]) {
+  /* prettier-ignore */
+  /* prettier-ignore */
+}
+:host(limel-chart[type=area][orientation=landscape]) .item:before {
+  clip-path: polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%));
+}
+
+:host(limel-chart[type=area][orientation=portrait]) {
+  /* prettier-ignore */
+  /* prettier-ignore */
+}
+:host(limel-chart[type=area][orientation=portrait]) .item:before {
+  clip-path: polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%);
+}
+
+:host(limel-chart[type=line]) {
+  --limel-chart-line-thickness: 0.125rem;
+}
+:host(limel-chart[type=line]) .item:hover:before {
+  opacity: 0.4;
+}
+
+:host(limel-chart[type=line][orientation=landscape]) {
+  /* prettier-ignore */
+  /* prettier-ignore */
+  /* prettier-ignore */
+  /* prettier-ignore */
+}
+:host(limel-chart[type=line][orientation=landscape]) .item:hover {
+  background: linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat;
+}
+:host(limel-chart[type=line][orientation=landscape]) .item:before {
+  clip-path: polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%));
+}
+
+:host(limel-chart[type=line][orientation=portrait]) {
+  /* prettier-ignore */
+  /* prettier-ignore */
+  /* prettier-ignore */
+  /* prettier-ignore */
+}
+:host(limel-chart[type=line][orientation=portrait]) .item:hover {
+  background: linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat;
+}
+:host(limel-chart[type=line][orientation=portrait]) .item:before {
+  clip-path: polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%);
+}
+
+: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%));
+}
+:host(limel-chart[type=pie]) .item:focus, :host(limel-chart[type=pie]) .item:focus-visible,
+:host(limel-chart[type=doughnut]) .item:focus,
+:host(limel-chart[type=doughnut]) .item:focus-visible {
+  outline: none;
+}
+:host(limel-chart[type=pie]) .item,
+:host(limel-chart[type=doughnut]) .item {
+  pointer-events: none;
+}
+
+:host(limel-chart[type=doughnut]) .chart:after {
+  aspect-ratio: 1;
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  max-width: 60%;
+  max-height: 60%;
+  border-radius: 50%;
+  background-color: rgb(var(--contrast-100));
+}
+
+:host(limel-chart[type=ring]) .chart:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  max-height: calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));
+  max-width: calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));
+  background-color: var(--limel-chart-background-color, rgb(var(--contrast-200)));
+}
+:host(limel-chart[type=ring]) .chart:has(.item:hover) .item, :host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item {
+  opacity: 1;
+  filter: grayscale(1);
+}
+:host(limel-chart[type=ring]) .chart:after,
+:host(limel-chart[type=ring]) .item {
+  margin: auto;
+  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%));
+  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));
+}
+:host(limel-chart[type=ring]) .item:focus {
+  outline: none;
+}
+:host(limel-chart[type=ring]) .item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+:host(limel-chart[type=ring]) .item:focus-visible, :host(limel-chart[type=ring]) .item:hover {
+  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.
+*/
+:host(limel-chart[type=stacked-bar]) .chart {
+  display: flex;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  background-color: var(--chart-background-color, rgb(var(--contrast-800), 0.2));
+}
+: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)));
+}
+:host(limel-chart[type=stacked-bar]) .item:focus {
+  outline: none;
+}
+:host(limel-chart[type=stacked-bar]) .item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+:host(limel-chart[type=stacked-bar]) .item:last-of-type {
+  box-shadow: none !important;
+}
+
+:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart {
+  flex-direction: row;
+}
+:host(limel-chart[type=stacked-bar][orientation=landscape]) .item {
+  min-height: 0.5rem;
+  width: calc(var(--limel-chart-item-size) * 1%);
+  box-shadow: -1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset;
+}
+
+:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart {
+  flex-direction: column-reverse;
+}
+:host(limel-chart[type=stacked-bar][orientation=portrait]) .item {
+  min-width: 0.5rem;
+  height: calc(var(--limel-chart-item-size) * 1%);
+  box-shadow: 0 -1px 0 0 rgb(var(--color-white), 0.6) inset;
+}
+
+:host(limel-chart[type=nps]) {
+  --limel-chart-nps-gauge-angel: 220deg;
+}
+:host(limel-chart[type=nps]) table {
+  min-height: 4rem;
+  min-width: 4rem;
+}
+:host(limel-chart[type=nps]) .chart {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1;
+  margin: auto;
+  width: unset;
+  height: unset;
+  max-width: 100%;
+  max-height: 100%;
+  rotate: calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);
+  transform: translate(-15%, -5%);
+}
+:host(limel-chart[type=nps]) .chart:before, :host(limel-chart[type=nps]) .chart:after {
+  content: "";
+  aspect-ratio: 1;
+  position: absolute;
+  border-radius: 50%;
+  z-index: -1;
+  min-height: 0;
+  min-width: 0;
+}
+:host(limel-chart[type=nps]) .chart:before {
+  height: 100%;
+  max-height: 100%;
+  background: conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel));
+}
+:host(limel-chart[type=nps]) .chart:after {
+  height: calc(100% - min(3rem, 20%) * 2);
+  max-height: calc(100% - min(3rem, 20%) * 2);
+  background: conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel));
+}
+:host(limel-chart[type=nps]) .item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  border-radius: 0.5rem;
+  position: absolute;
+  height: calc(50% - min(3rem, 20%) + 0.5rem);
+  width: 0.5rem;
+  transform: translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));
+  transform-origin: bottom;
+}
+:host(limel-chart[type=nps]) .item:focus {
+  outline: none;
+}
+:host(limel-chart[type=nps]) .item:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+:host(limel-chart[type=nps]) .item:hover, :host(limel-chart[type=nps]) .item:focus-visible {
+  background: linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat;
+}
+:host(limel-chart[type=nps]) .item:before, :host(limel-chart[type=nps]) .item:after {
+  content: "";
+  position: absolute;
+}
+:host(limel-chart[type=nps]) .item:before {
+  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-style: solid;
+  border-bottom-width: 1.75rem;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+: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)));
+  aspect-ratio: 1;
+  height: clamp(0.75rem, 10%, 1.25rem);
+  border: 0.125rem solid rgb(var(--contrast-100), 0.8);
+  box-shadow: var(--shadow-depth-8);
+}
+
+.axises {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  min-height: 100%;
+  min-width: 100%;
+  height: 100%;
+  width: 100%;
+}
+
+.axis-line {
+  transition: opacity 0.4s ease;
+  position: relative;
+  opacity: 0.2;
+  font-size: 0.625rem;
+  border-color: var(--limel-chart-axis-line-color);
+}
+.axis-line:hover {
+  opacity: 0.6;
+  transition-duration: 0.2s;
+}
+.axis-line.zero-line {
+  opacity: 0.6;
+  z-index: 1;
+}
+.axis-line limel-badge {
+  --badge-background-color: transparent;
+  --badge-text-color: currentColor;
+  position: absolute;
+  text-align: right;
+  min-width: 2rem;
+}
+
+:host(limel-chart[orientation=landscape]) .axises {
+  flex-direction: column-reverse;
+}
+:host(limel-chart[orientation=landscape]) .axis-line {
+  border-bottom: 1px solid;
+  transform: translateY(50%);
+}
+:host(limel-chart[orientation=landscape]) .axis-line limel-badge {
+  bottom: 0;
+  left: -2rem;
+  transform: translateY(50%);
+}
+
+:host(limel-chart[orientation=portrait]) .axises {
+  flex-direction: row;
+}
+:host(limel-chart[orientation=portrait]) .axis-line {
+  border-left: 1px solid;
+  transform: translateX(-50%);
+}
+:host(limel-chart[orientation=portrait]) .axis-line limel-badge {
+  bottom: -1rem;
+  right: -1rem;
+}