@limetech/lime-elements 37.1.0-next.84 → 37.1.0-next.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,59 @@
3
3
  * @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;
4
4
  * @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;
5
5
  */
6
+ /**
7
+ * Note! This file is exported to `dist/scss/` in the published
8
+ * node module, for consumer projects to import.
9
+ * That means this file cannot import from any file that isn't
10
+ * also exported, keeping the same relative path.
11
+ *
12
+ * Or, just don't import anything, that works too.
13
+ */
14
+ /**
15
+ * This can be used on a trigger element that opens a dropdown menu or a popover.
16
+ */
17
+ /**
18
+ * This mixin will mask out the content that is close to
19
+ * the edges of a scrollable area.
20
+ * - If the scrollable content has `overflow-y`, use `vertically`
21
+ * as an argument for `$direction`.
22
+ - If the scrollable content has `overflow-x`, use `horizontally`
23
+ * as an argument for `$direction`.
24
+ *
25
+ * For the visual effect to work smoothly, we need to make sure that
26
+ * the size of the fade-out edge effect is the same as the
27
+ * internal paddings of the scrollable area. Otherwise, content of a
28
+ * scrollable area that does not have a padding will fade out before
29
+ * any scrolling has been done.
30
+ * This is why this mixin already adds paddings, which automatically
31
+ * default to the size of the fade-out effect.
32
+ * This size defaults to `1rem`, but to override the size use
33
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
34
+ * when `vertically` argument is set, and use
35
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
36
+ * when `horizontally` argument is set.
37
+ * Of course you can also programmatically increase and decrease the
38
+ * size of these variables for each edge, based on the amount of
39
+ * scrolling that has been done by the user. In this case, make sure
40
+ * to add a custom padding where the mixin is used, to override
41
+ * the paddings that are automatically added by the mixin in the
42
+ * compiled CSS code.
43
+ */
44
+ /**
45
+ * This mixin will add an animated underline to the bottom of an `a` elements.
46
+ * Note that you may need to add `all: unset;` –depending on your use case–
47
+ * before using this mixin.
48
+ */
49
+ /**
50
+ * This mixin creates a cross-browser font stack.
51
+ * - `sans-serif` can be used for the UI of the components.
52
+ * - `monospace` can be used for code.
53
+ *
54
+ * ⚠️ If we change the font stacks, we need to update
55
+ * 1. the consumer documentation in `README.md`, and
56
+ * 2. the CSS variables of `--kompendium-example-font-family`
57
+ * in the `<style>` tag of `index.html`.
58
+ */
6
59
  /*
7
60
  * This file is imported into every component!
8
61
  *
@@ -10,8 +63,10 @@
10
63
  * without being explicitly called by outside code.
11
64
  */
12
65
  code {
13
- font-family: "Source Code Pro", monospace;
14
- font-size: 0.875rem;
66
+ font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
67
+ font-size: 0.8125rem;
68
+ letter-spacing: -0.0125rem;
69
+ color: rgb(var(--contrast-1300));
15
70
  -moz-tab-size: 4;
16
71
  -o-tab-size: 4;
17
72
  tab-size: 4;
@@ -20,21 +75,17 @@ code {
20
75
  -ms-hyphens: none;
21
76
  hyphens: none;
22
77
  display: inline-block;
23
- border-radius: 0.1875rem;
24
- padding: 0.0625rem 0.3125rem;
25
- color: rgb(var(--contrast-1300));
78
+ border-radius: 0.25rem;
79
+ padding: 0.03125rem 0.25rem;
26
80
  background-color: rgb(var(--contrast-600));
27
81
  }
28
82
 
29
83
  pre > code {
30
84
  display: block;
31
- border-radius: 0.5rem;
32
85
  margin: 0.5rem 0;
33
- padding: 1rem;
86
+ padding: 0.5rem 0.75rem;
34
87
  overflow: auto;
35
88
  white-space: pre-wrap;
36
- color: rgb(var(--contrast-800));
37
- background-color: rgb(var(--contrast-1600));
38
89
  }
39
90
 
40
91
  /*
@@ -45312,7 +45312,7 @@ async function markdownToHTML(text, options) {
45312
45312
  return file.toString();
45313
45313
  }
45314
45314
 
45315
- const markdownCss = "@charset \"UTF-8\";code{font-family:\"Source Code Pro\", monospace;font-size:0.875rem;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.1875rem;padding:0.0625rem 0.3125rem;color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-600))}pre>code{display:block;border-radius:0.5rem;margin:0.5rem 0;padding:1rem;overflow:auto;white-space:pre-wrap;color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1600))}h1{font-size:1.875rem;line-height:1.875rem;margin-top:1.5rem;margin-bottom:0.75rem;letter-spacing:-0.0625rem}h2{font-size:1.625rem;line-height:1.625rem;margin-top:1.25rem;margin-bottom:0.75rem}h3{font-size:1.375rem;line-height:1.375rem;margin-top:1rem;margin-bottom:0.75rem}h4{font-size:1.25rem;line-height:1.25rem;margin-top:0.75rem;margin-bottom:0.5rem}h5{font-size:1.125rem;line-height:1.125rem;margin-top:0.75rem;margin-bottom:0.5rem}h6{font-size:1rem;line-height:1rem;margin-top:0.75rem;margin-bottom:0.5rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,a,li{font-size:0.875rem}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}th,td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}td{padding:0.5rem 0.375rem 0.75rem 0.375rem}tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}tr th:only-child{text-align:center}tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}hr{border-top:1px solid rgb(var(--contrast-700))}img{max-width:100%}";
45315
+ const markdownCss = "@charset \"UTF-8\";code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.875rem;line-height:1.875rem;margin-top:1.5rem;margin-bottom:0.75rem;letter-spacing:-0.0625rem}h2{font-size:1.625rem;line-height:1.625rem;margin-top:1.25rem;margin-bottom:0.75rem}h3{font-size:1.375rem;line-height:1.375rem;margin-top:1rem;margin-bottom:0.75rem}h4{font-size:1.25rem;line-height:1.25rem;margin-top:0.75rem;margin-bottom:0.5rem}h5{font-size:1.125rem;line-height:1.125rem;margin-top:0.75rem;margin-bottom:0.5rem}h6{font-size:1rem;line-height:1rem;margin-top:0.75rem;margin-bottom:0.5rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,a,li{font-size:0.875rem}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}th,td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}td{padding:0.5rem 0.375rem 0.75rem 0.375rem}tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}tr th:only-child{text-align:center}tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}tbody tr:hover td{background-color:rgb(var(--contrast-300))}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}hr{border-top:1px solid rgb(var(--contrast-700))}img{max-width:100%}";
45316
45316
 
45317
45317
  const Markdown = class {
45318
45318
  constructor(hostRef) {