contain-css-svelte 0.0.8 → 0.0.10

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.
Files changed (22) hide show
  1. package/dist/Card.svelte +3 -0
  2. package/dist/controls/Button.svelte +0 -4
  3. package/dist/controls/Checkbox.svelte +0 -4
  4. package/dist/controls/MiniButton.svelte +0 -4
  5. package/dist/controls/RadioButton.svelte +0 -4
  6. package/dist/dropdowns/DropdownMenu.svelte +0 -8
  7. package/dist/layout/Container.svelte +3 -1
  8. package/dist/layout/GridLayout.svelte +2 -1
  9. package/dist/layout/GridLayout.svelte.d.ts +3 -1
  10. package/dist/layout/Hero.svelte +2 -0
  11. package/dist/layout/MenuList.svelte +7 -21
  12. package/dist/layout/Sidebar.svelte +0 -4
  13. package/dist/layout/Tile.svelte +2 -4
  14. package/dist/misc/Code.svelte +11 -220
  15. package/dist/misc/Code.svelte.d.ts +0 -1
  16. package/dist/misc/CodeInner.svelte +228 -0
  17. package/dist/misc/CodeInner.svelte.d.ts +21 -0
  18. package/dist/overlays/Tooltip.svelte +6 -4
  19. package/dist/sass/_mixins.scss +4 -5
  20. package/dist/typography/TextLayout.svelte +6 -1
  21. package/dist/typography/TextLayout.svelte.d.ts +2 -2
  22. package/package.json +1 -3
package/dist/Card.svelte CHANGED
@@ -96,6 +96,8 @@ let hasFooter = $$slots.footer;
96
96
  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
97
97
  margin-left: auto;
98
98
  margin-right: auto;
99
+ margin-bottom: var(--card-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
100
+ margin-top: var(--card-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
99
101
  }
100
102
  .card section :global(p) {
101
103
  font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -183,6 +185,7 @@ let hasFooter = $$slots.footer;
183
185
  .card section {
184
186
  line-height: var(--line-height);
185
187
  max-width: var(--line-width);
188
+ width: calc(100% - var(--card-padding, var(--padding, container)));
186
189
  }
187
190
 
188
191
  .card.fixedHeight {
package/dist/controls/Button.svelte CHANGED
@@ -77,14 +77,10 @@ button {
77
77
  button:hover {
78
78
  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
79
79
  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
80
- background-color: var(--button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
81
- color: var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
82
80
  }
83
81
  button:active {
84
82
  filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
85
83
  transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
86
- background-color: var(--button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
87
- color: var(--active-fg, button, clickable, inherit);
88
84
  }
89
85
 
90
86
  button.primary {
package/dist/controls/Checkbox.svelte CHANGED
@@ -104,14 +104,10 @@ label {
104
104
  label:hover {
105
105
  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
106
106
  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
107
- background-color: var(--checkbox-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
108
- color: var(--checkbox-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
109
107
  }
110
108
  label:active {
111
109
  filter: var(--checkbox-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
112
110
  transform: var(--checkbox-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
113
- background-color: var(--checkbox-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
114
- color: var(--active-fg, checkbox, clickable, inherit);
115
111
  }
116
112
 
117
113
  label span {
package/dist/controls/MiniButton.svelte CHANGED
@@ -75,14 +75,10 @@ button {
75
75
  button:hover {
76
76
  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4)))));
77
77
  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
78
- background-color: var(--mini-button-hover-bg, var(--button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit))));
79
- color: var(--mini-button-hover-fg, var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit))));
80
78
  }
81
79
  button:active {
82
80
  filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
83
81
  transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
84
- background-color: var(--mini-button-active-bg, var(--button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit))));
85
- color: var(--active-fg, mini-button, button, clickable, inherit);
86
82
  }
87
83
 
88
84
  button.primary {
package/dist/controls/RadioButton.svelte CHANGED
@@ -101,14 +101,10 @@ label {
101
101
  label:hover {
102
102
  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
103
103
  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
104
- background-color: var(--radio-button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
105
- color: var(--radio-button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
106
104
  }
107
105
  label:active {
108
106
  filter: var(--radio-button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
109
107
  transform: var(--radio-button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
110
- background-color: var(--radio-button-active-bg, var(--clickable-active-bg, var(--active-bg, inherit)));
111
- color: var(--active-fg, radio-button, clickable, inherit);
112
108
  }
113
109
 
114
110
  label span {
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -173,14 +173,10 @@ button {
173
173
  button:hover {
174
174
  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
175
175
  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
176
- background-color: var(--menu-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
177
- color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
178
176
  }
179
177
  button:active {
180
178
  filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
181
179
  transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
182
- background-color: var(--menu-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
183
- color: var(--active-fg, menu, button, control, inherit);
184
180
  }
185
181
 
186
182
  .menu {
@@ -216,14 +212,10 @@ button:active {
216
212
  .menu:hover {
217
213
  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
218
214
  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
219
- background-color: var(--menu-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
220
- color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
221
215
  }
222
216
  .menu:active {
223
217
  filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
224
218
  transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
225
- background-color: var(--menu-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
226
- color: var(--active-fg, menu, button, control, inherit);
227
219
  }
228
220
 
229
221
  .dropdown-menu {
package/dist/layout/Container.svelte CHANGED
@@ -72,7 +72,7 @@ section {
72
72
  /* Why is this suddenly causing a scroll? */
73
73
  container-type: inline-size;
74
74
  overflow-x: hidden;
75
- height: var(--container-height);
75
+ height: var(--container-height, 100%);
76
76
  overflow-y: auto;
77
77
  overflow-y: auto;
78
78
  scrollbar-width: var(--container-scrollbar-width, var(--scrollbar-width, thin));
@@ -99,6 +99,8 @@ section :global(h6) {
99
99
  max-width: var(--container-line-width, var(--block-line-width, var(--line-width, unset)));
100
100
  margin-left: auto;
101
101
  margin-right: auto;
102
+ margin-bottom: var(--container-heading-margin-bottom, var(--block-heading-margin-bottom, var(--heading-margin-bottom, 0)));
103
+ margin-top: var(--container-heading-margin-top, var(--block-heading-margin-top, var(--heading-margin-top, 1.5em)));
102
104
  }
103
105
  section :global(p) {
104
106
  font-family: var(--container-paragraph-font-family, var(--block-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
package/dist/layout/GridLayout.svelte CHANGED
@@ -1,8 +1,9 @@
1
1
  <script>import { onMount } from "svelte";
2
2
  let grid;
3
+ export let id = "";
3
4
  </script>
4
5
 
5
- <div class="grid-layout">
6
+ <div class="grid-layout" {id}>
6
7
  <slot />
7
8
  </div>
8
9
 
package/dist/layout/GridLayout.svelte.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  declare const __propDef: {
3
- props: Record<string, never>;
3
+ props: {
4
+ id?: string | undefined;
5
+ };
4
6
  events: {
5
7
  [evt: string]: CustomEvent<any>;
6
8
  };
package/dist/layout/Hero.svelte CHANGED
@@ -80,6 +80,8 @@ let cssVars = injectVars($$props, "hero", [
80
80
  max-width: var(--hero-line-width, var(--container-line-width, var(--line-width, unset)));
81
81
  margin-left: auto;
82
82
  margin-right: auto;
83
+ margin-bottom: var(--hero-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
84
+ margin-top: var(--hero-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
83
85
  }
84
86
  .hero :global(p) {
85
87
  font-family: var(--hero-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
package/dist/layout/MenuList.svelte CHANGED
@@ -49,21 +49,20 @@ let style = injectVars($$props, "menu", [
49
49
  overflow: hidden;
50
50
  }
51
51
 
52
- .menu :global(li) {
52
+ .menu :global(li:has(> a)),
53
+ .menu :global(li:has(> button)) {
53
54
  cursor: var(--menu-item-cursor, var(--cursor, pointer));
54
55
  transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
55
56
  }
56
- .menu :global(li):hover {
57
+ .menu :global(li:has(> a)):hover,
58
+ .menu :global(li:has(> button)):hover {
57
59
  filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.4)));
58
60
  transform: var(--menu-item-hover-transform, var(--hover-transform, none));
59
- background-color: var(--menu-item-hover-bg, var(--hover-bg, inherit));
60
- color: var(--menu-item-hover-fg, var(--hover-fg, inherit));
61
61
  }
62
- .menu :global(li):active {
62
+ .menu :global(li:has(> a)):active,
63
+ .menu :global(li:has(> button)):active {
63
64
  filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
64
65
  transform: var(--menu-item-active-transform, var(--active-transform, none));
65
- background-color: var(--menu-item-active-bg, var(--active-bg, inherit));
66
- color: var(--active-fg, menu-item, inherit);
67
66
  }
68
67
 
69
68
  .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
@@ -99,20 +98,7 @@ let style = injectVars($$props, "menu", [
99
98
  border-left: var(--menu-item-border-left, var(--button-border-left, var(--control-border-left, var(--border-left, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
100
99
  padding: var(--menu-item-padding, var(--button-padding, var(--control-padding, var(--padding, 4px))));
101
100
  border-radius: var(--menu-item-square-radius, var(--button-square-radius, var(--control-square-radius, var(--square-radius, 0))));
102
- cursor: var(--menu-item-cursor, var(--cursor, pointer));
103
- transition: filter, transform var(--menu-item-transition, var(--transition, 300ms));
104
- }
105
- .menu :global(a):hover, .menu :global(button):hover, .menu :global(input[type="submit"]):hover, .menu :global(.button):hover {
106
- filter: var(--menu-item-hover-filter, var(--hover-filter, brightness(1.4)));
107
- transform: var(--menu-item-hover-transform, var(--hover-transform, none));
108
- background-color: var(--menu-item-hover-bg, var(--hover-bg, inherit));
109
- color: var(--menu-item-hover-fg, var(--hover-fg, inherit));
110
- }
111
- .menu :global(a):active, .menu :global(button):active, .menu :global(input[type="submit"]):active, .menu :global(.button):active {
112
- filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
113
- transform: var(--menu-item-active-transform, var(--active-transform, none));
114
- background-color: var(--menu-item-active-bg, var(--active-bg, inherit));
115
- color: var(--active-fg, menu-item, inherit);
101
+ /* @include clickable(menu-item); */
116
102
  }
117
103
  .menu :global(.active) {
118
104
  background: var(--menu-item-active-bg, var(--primary-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--container-bg, var(--container-bg, inherit)))))));
package/dist/layout/Sidebar.svelte CHANGED
@@ -235,14 +235,10 @@ aside .content::-webkit-scrollbar-thumb:hover {
235
235
  aside > button:hover {
236
236
  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
237
237
  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
238
- background-color: var(--mini-button-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
239
- color: var(--mini-button-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
240
238
  }
241
239
  aside > button:active {
242
240
  filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
243
241
  transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
244
- background-color: var(--mini-button-active-bg, var(--button-active-bg, var(--control-active-bg, var(--active-bg, inherit))));
245
- color: var(--active-fg, mini-button, button, control, inherit);
246
242
  }
247
243
  aside > button.close {
248
244
  left: calc(var(--sidebar-width) - var(--icon-size, 32px) + var(--padding));
package/dist/layout/Tile.svelte CHANGED
@@ -128,6 +128,8 @@ $: console.log("Checked=>", checked);
128
128
  max-width: var(--tile-line-width, var(--line-width, unset));
129
129
  margin-left: auto;
130
130
  margin-right: auto;
131
+ margin-bottom: var(--tile-heading-margin-bottom, var(--heading-margin-bottom, 0));
132
+ margin-top: var(--tile-heading-margin-top, var(--heading-margin-top, 1.5em));
131
133
  }
132
134
  .tile :global(p),
133
135
  .tile label :global(p),
@@ -217,15 +219,11 @@ button.tile:hover,
217
219
  label.tile:hover {
218
220
  filter: var(--tile-hover-filter, var(--hover-filter, brightness(1.4)));
219
221
  transform: var(--tile-hover-transform, var(--hover-transform, none));
220
- background-color: var(--tile-hover-bg, var(--hover-bg, inherit));
221
- color: var(--tile-hover-fg, var(--hover-fg, inherit));
222
222
  }
223
223
  button.tile:active,
224
224
  label.tile:active {
225
225
  filter: var(--tile-active-filter, var(--active-filter, brightness(0.9)));
226
226
  transform: var(--tile-active-transform, var(--active-transform, none));
227
- background-color: var(--tile-active-bg, var(--active-bg, inherit));
228
- color: var(--active-fg, tile, inherit);
229
227
  }
230
228
 
231
229
  label.tile {
package/dist/misc/Code.svelte CHANGED
@@ -1,226 +1,17 @@
1
- <script>export let code;
2
- import "prismjs";
3
- import Prism from "svelte-prism";
1
+ <script>const browser = typeof window !== "undefined";
2
+ export let code;
4
3
  export let inline = false;
5
4
  export let language = "html";
6
- </script>
7
-
8
- <div class="code" class:inline>
9
- <Prism {language} source={code} />
10
- </div>
11
-
12
- <style>/* Convenience groupings */
13
- /* Warning: because we define a fallback
14
- media query, the media query can override the container
15
- if we stack a bunch of these in a row and aren't thoughtful about the order.
16
- Put min-width queries *after* max-width queries so that smaller
17
- container queries don't get their styles overridden by large media queries.
18
- */
19
- div {
20
- width: var(--code-width, var(--line-width, 90%));
21
- height: var(--code-height, auto);
22
- box-sizing: border-box;
23
- margin: auto;
24
- }
25
-
26
- div > :global(pre) {
27
- width: var(--code-width, 100%);
28
- box-sizing: border-box;
29
- overflow-x: auto;
30
- }
31
-
32
- .code :global(code[class*="language-"]),
33
- .code :global(pre[class*="language-"]) {
34
- tab-size: var(--code-tab-size, 2em);
35
- background: var(--code-bg, var(--container-bg, var(--container-bg, inherit)));
36
- color: var(--code-fg, var(--container-fg, var(--container-fg, inherit)));
37
- --link-bg: var(--code-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
38
- --link-fg: var(--code-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
39
- max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
40
- margin-left: auto;
41
- margin-right: auto;
42
- font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
43
- font-family: var(--code-font-family, var(--container-font-family, var(--font-family, unset)));
44
- text-transform: var(--code-text-transform, var(--container-text-transform, var(--text-transform, unset)));
45
- text-decoration: var(--code-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
46
- font-size: var(--code-font-size, var(--container-font-size, var(--font-size, unset)));
47
- font-weight: var(--code-font-weight, var(--container-font-weight, var(--font-weight, unset)));
48
- line-height: var(--code-line-height, var(--container-line-height, var(--line-height, unset)));
49
- letter-spacing: var(--code-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
50
- margin-top: var(--code-margin, var(--container-margin, var(--margin, unset)));
51
- margin-top: var(--code-margin-top, var(--container-margin-top, var(--margin-top, unset)));
52
- margin-bottom: var(--code-margin, var(--container-margin, var(--margin, unset)));
53
- margin-bottom: var(--code-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
54
- text-indent: var(--code-indent, var(--container-indent, var(--indent, unset)));
55
- font-variant: var(--code-font-variant, var(--container-font-variant, var(--font-variant, unset)));
56
- text-align: var(--code-text-align, var(--container-text-align, var(--text-align, unset)));
57
- }
58
- .code :global(code[class*="language-"]) :global(p), .code :global(code[class*="language-"]) :global(blockquote), .code :global(code[class*="language-"]) :global(dl), .code :global(code[class*="language-"]) :global(ul), .code :global(code[class*="language-"]) :global(ol),
59
- .code :global(pre[class*="language-"]) :global(p),
60
- .code :global(pre[class*="language-"]) :global(blockquote),
61
- .code :global(pre[class*="language-"]) :global(dl),
62
- .code :global(pre[class*="language-"]) :global(ul),
63
- .code :global(pre[class*="language-"]) :global(ol) {
64
- max-width: var(--code-line-width, var(--container-line-width, var(--line-width, 40em)));
65
- font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
66
- line-height: var(--code-line-height, var(--container-line-height, var(--line-height, 1.5)));
67
- margin-left: auto;
68
- margin-right: auto;
69
- font-weight: var(--code-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
70
- }
71
- .code :global(code[class*="language-"]) :global(h1),
72
- .code :global(code[class*="language-"]) :global(h2),
73
- .code :global(code[class*="language-"]) :global(h3),
74
- .code :global(code[class*="language-"]) :global(h4),
75
- .code :global(code[class*="language-"]) :global(h5),
76
- .code :global(code[class*="language-"]) :global(h6),
77
- .code :global(pre[class*="language-"]) :global(h1),
78
- .code :global(pre[class*="language-"]) :global(h2),
79
- .code :global(pre[class*="language-"]) :global(h3),
80
- .code :global(pre[class*="language-"]) :global(h4),
81
- .code :global(pre[class*="language-"]) :global(h5),
82
- .code :global(pre[class*="language-"]) :global(h6) {
83
- background: var(--heading-bg, var(--heading-bg, inherit));
84
- color: var(--heading-fg, var(--heading-fg, inherit));
85
- --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
86
- --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
87
- max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
88
- margin-left: auto;
89
- margin-right: auto;
90
- }
91
- .code :global(code[class*="language-"]) :global(p),
92
- .code :global(pre[class*="language-"]) :global(p) {
93
- font-family: var(--code-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
94
- text-transform: var(--code-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
95
- text-decoration: var(--code-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
96
- font-size: var(--code-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
97
- font-weight: var(--code-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
98
- line-height: var(--code-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
99
- letter-spacing: var(--code-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
100
- text-indent: var(--code-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
101
- font-variant: var(--code-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
102
- text-align: var(--code-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
103
- }
104
- .code :global(code[class*="language-"]) :global(p:first-of-type),
105
- .code :global(code[class*="language-"]) :global(h1 + p),
106
- .code :global(code[class*="language-"]) :global(h2 + p),
107
- .code :global(code[class*="language-"]) :global(h3 + p),
108
- .code :global(code[class*="language-"]) :global(h4 + p),
109
- .code :global(code[class*="language-"]) :global(h5 + p),
110
- .code :global(code[class*="language-"]) :global(h6 + p),
111
- .code :global(pre[class*="language-"]) :global(p:first-of-type),
112
- .code :global(pre[class*="language-"]) :global(h1 + p),
113
- .code :global(pre[class*="language-"]) :global(h2 + p),
114
- .code :global(pre[class*="language-"]) :global(h3 + p),
115
- .code :global(pre[class*="language-"]) :global(h4 + p),
116
- .code :global(pre[class*="language-"]) :global(h5 + p),
117
- .code :global(pre[class*="language-"]) :global(h6 + p) {
118
- font-family: var(--code-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit))));
119
- text-transform: var(--code-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit))));
120
- text-decoration: var(--code-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))));
121
- font-size: var(--code-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit))));
122
- font-weight: var(--code-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit))));
123
- line-height: var(--code-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit))));
124
- letter-spacing: var(--code-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))));
125
- text-indent: var(--code-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
126
- font-variant: var(--code-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
127
- text-align: var(--code-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
128
- }
129
- .code :global(code[class*="language-"]) :global(p:first-of-type::first-line),
130
- .code :global(pre[class*="language-"]) :global(p:first-of-type::first-line) {
131
- font-family: var(--code-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
132
- text-transform: var(--code-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
133
- text-decoration: var(--code-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
134
- font-size: var(--code-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
135
- font-weight: var(--code-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
136
- line-height: var(--code-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
137
- letter-spacing: var(--code-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
138
- text-indent: var(--code-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
139
- font-variant: var(--code-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
140
- text-align: var(--code-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
141
- }
142
- .code :global(code[class*="language-"]) :global(p:first-of-type::first-letter),
143
- .code :global(pre[class*="language-"]) :global(p:first-of-type::first-letter) {
144
- font-family: var(--code-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
145
- text-transform: var(--code-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
146
- text-decoration: var(--code-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
147
- font-size: var(--code-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
148
- font-weight: var(--code-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
149
- line-height: var(--code-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
150
- letter-spacing: var(--code-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
151
- text-indent: var(--code-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
152
- font-variant: var(--code-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
153
- text-align: var(--code-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
154
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
155
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
156
- --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
157
- --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
158
- }
159
-
160
- .code :global(pre[class*="language-"]) {
161
- background: var(--code-bg);
162
- color: var(--code-fg);
163
- padding: 1em;
164
- border-radius: 0.3em;
165
- box-shadow: var(--code-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--code-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--code-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--code-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
166
- }
167
-
168
- .code :global(.token.comment),
169
- .code :global(.token.prolog),
170
- .code :global(.token.doctype),
171
- .code :global(.token.cdata) {
172
- background: var(--code-comment-bg, var(--secondary-bg, var(--yellow-bg, var(--yellow-bg, inherit))));
173
- color: var(--code-comment-fg, var(--secondary-fg, var(--yellow-fg, var(--yellow-fg, inherit))));
174
- --link-bg: var(--code-comment-link-bg, var(--secondary-link-bg, var(--yellow-link-bg, var(--yellow-link-bg, inherit))));
175
- --link-fg: var(--code-comment-link-fg, var(--secondary-link-fg, var(--yellow-link-fg, var(--yellow-link-fg, inherit))));
176
- }
177
-
178
- .code :global(.token.string),
179
- .code :global(.token.attr-value) {
180
- background: var(--code-string-bg, var(--code-bg, var(--code-bg, inherit)));
181
- color: var(--code-string-fg, var(--code-fg, var(--code-fg, inherit)));
182
- --link-bg: var(--code-string-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
183
- --link-fg: var(--code-string-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
184
- }
185
-
186
- .code :global(.token.keyword) {
187
- background: var(--code-keyword-bg, var(--code-keyword-bg, inherit));
188
- color: var(--code-keyword-fg, var(--code-keyword-fg, inherit));
189
- --link-bg: var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit));
190
- --link-fg: var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit));
191
- }
192
-
193
- .code :global(.token.attr-name) {
194
- background: var(--code-attr-name-bg, var(--code-attr-name-bg, inherit));
195
- color: var(--code-attr-name-fg, var(--code-attr-name-fg, inherit));
196
- --link-bg: var(--code-attr-name-link-bg, var(--code-attr-name-link-bg, inherit));
197
- --link-fg: var(--code-attr-name-link-fg, var(--code-attr-name-link-fg, inherit));
198
- }
199
-
200
- .code :global(.token.tag) {
201
- background: var(--code-tag-bg, var(--code-keyword-bg, var(--code-bg, var(--code-bg, inherit))));
202
- color: var(--code-tag-fg, var(--code-keyword-fg, var(--code-fg, var(--code-fg, inherit))));
203
- --link-bg: var(--code-tag-link-bg, var(--code-keyword-link-bg, var(--code-link-bg, var(--code-link-bg, inherit))));
204
- --link-fg: var(--code-tag-link-fg, var(--code-keyword-link-fg, var(--code-link-fg, var(--code-link-fg, inherit))));
5
+ let component = null;
6
+ if (browser) {
7
+ import("./CodeInner.svelte").then(({ default: CodeInner }) => {
8
+ component = CodeInner;
9
+ });
205
10
  }
11
+ </script>
206
12
 
207
- .code :global(.token.function) {
208
- background: var(--code-function-bg, var(--code-keyword-bg, var(--code-keyword-bg, inherit)));
209
- color: var(--code-function-fg, var(--code-keyword-fg, var(--code-keyword-fg, inherit)));
210
- --link-bg: var(--code-function-link-bg, var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit)));
211
- --link-fg: var(--code-function-link-fg, var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit)));
212
- }
13
+ {#if browser && component}
14
+ <svelte:component this={component} {language} {code} {inline}/>
15
+ {/if}
213
16
 
214
- .code :global(.token.variable) {
215
- background: var(--code-variable-bg, var(--code-bg, var(--code-bg, inherit)));
216
- color: var(--code-variable-fg, var(--code-fg, var(--code-fg, inherit)));
217
- --link-bg: var(--code-variable-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
218
- --link-fg: var(--code-variable-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
219
- }
220
17
 
221
- .code :global(.token.operator) {
222
- background: var(--code-operator-bg, var(--code-bg, var(--code-bg, inherit)));
223
- color: var(--code-operator-fg, var(--code-fg, var(--code-fg, inherit)));
224
- --link-bg: var(--code-operator-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
225
- --link-fg: var(--code-operator-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
226
- }</style>
package/dist/misc/Code.svelte.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import "prismjs";
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  code: string;
package/dist/misc/CodeInner.svelte ADDED
@@ -0,0 +1,228 @@
1
+ <script>export let code;
2
+ import "prismjs";
3
+ import Prism from "svelte-prism";
4
+ export let inline = false;
5
+ export let language = "html";
6
+ </script>
7
+
8
+ <div class="code" class:inline>
9
+ <Prism {language} source={code} />
10
+ </div>
11
+
12
+ <style>/* Convenience groupings */
13
+ /* Warning: because we define a fallback
14
+ media query, the media query can override the container
15
+ if we stack a bunch of these in a row and aren't thoughtful about the order.
16
+ Put min-width queries *after* max-width queries so that smaller
17
+ container queries don't get their styles overridden by large media queries.
18
+ */
19
+ div {
20
+ width: var(--code-width, var(--line-width, 90%));
21
+ height: var(--code-height, auto);
22
+ box-sizing: border-box;
23
+ margin: auto;
24
+ }
25
+
26
+ div > :global(pre) {
27
+ width: var(--code-width, 100%);
28
+ box-sizing: border-box;
29
+ overflow-x: auto;
30
+ }
31
+
32
+ .code :global(code[class*="language-"]),
33
+ .code :global(pre[class*="language-"]) {
34
+ tab-size: var(--code-tab-size, 2em);
35
+ background: var(--code-bg, var(--container-bg, var(--container-bg, inherit)));
36
+ color: var(--code-fg, var(--container-fg, var(--container-fg, inherit)));
37
+ --link-bg: var(--code-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
38
+ --link-fg: var(--code-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
39
+ max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
40
+ margin-left: auto;
41
+ margin-right: auto;
42
+ font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
43
+ font-family: var(--code-font-family, var(--container-font-family, var(--font-family, unset)));
44
+ text-transform: var(--code-text-transform, var(--container-text-transform, var(--text-transform, unset)));
45
+ text-decoration: var(--code-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
46
+ font-size: var(--code-font-size, var(--container-font-size, var(--font-size, unset)));
47
+ font-weight: var(--code-font-weight, var(--container-font-weight, var(--font-weight, unset)));
48
+ line-height: var(--code-line-height, var(--container-line-height, var(--line-height, unset)));
49
+ letter-spacing: var(--code-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
50
+ margin-top: var(--code-margin, var(--container-margin, var(--margin, unset)));
51
+ margin-top: var(--code-margin-top, var(--container-margin-top, var(--margin-top, unset)));
52
+ margin-bottom: var(--code-margin, var(--container-margin, var(--margin, unset)));
53
+ margin-bottom: var(--code-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
54
+ text-indent: var(--code-indent, var(--container-indent, var(--indent, unset)));
55
+ font-variant: var(--code-font-variant, var(--container-font-variant, var(--font-variant, unset)));
56
+ text-align: var(--code-text-align, var(--container-text-align, var(--text-align, unset)));
57
+ }
58
+ .code :global(code[class*="language-"]) :global(p), .code :global(code[class*="language-"]) :global(blockquote), .code :global(code[class*="language-"]) :global(dl), .code :global(code[class*="language-"]) :global(ul), .code :global(code[class*="language-"]) :global(ol),
59
+ .code :global(pre[class*="language-"]) :global(p),
60
+ .code :global(pre[class*="language-"]) :global(blockquote),
61
+ .code :global(pre[class*="language-"]) :global(dl),
62
+ .code :global(pre[class*="language-"]) :global(ul),
63
+ .code :global(pre[class*="language-"]) :global(ol) {
64
+ max-width: var(--code-line-width, var(--container-line-width, var(--line-width, 40em)));
65
+ font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
66
+ line-height: var(--code-line-height, var(--container-line-height, var(--line-height, 1.5)));
67
+ margin-left: auto;
68
+ margin-right: auto;
69
+ font-weight: var(--code-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
70
+ }
71
+ .code :global(code[class*="language-"]) :global(h1),
72
+ .code :global(code[class*="language-"]) :global(h2),
73
+ .code :global(code[class*="language-"]) :global(h3),
74
+ .code :global(code[class*="language-"]) :global(h4),
75
+ .code :global(code[class*="language-"]) :global(h5),
76
+ .code :global(code[class*="language-"]) :global(h6),
77
+ .code :global(pre[class*="language-"]) :global(h1),
78
+ .code :global(pre[class*="language-"]) :global(h2),
79
+ .code :global(pre[class*="language-"]) :global(h3),
80
+ .code :global(pre[class*="language-"]) :global(h4),
81
+ .code :global(pre[class*="language-"]) :global(h5),
82
+ .code :global(pre[class*="language-"]) :global(h6) {
83
+ background: var(--heading-bg, var(--heading-bg, inherit));
84
+ color: var(--heading-fg, var(--heading-fg, inherit));
85
+ --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
86
+ --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
87
+ max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
88
+ margin-left: auto;
89
+ margin-right: auto;
90
+ margin-bottom: var(--code-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
91
+ margin-top: var(--code-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
92
+ }
93
+ .code :global(code[class*="language-"]) :global(p),
94
+ .code :global(pre[class*="language-"]) :global(p) {
95
+ font-family: var(--code-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
96
+ text-transform: var(--code-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
97
+ text-decoration: var(--code-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
98
+ font-size: var(--code-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
99
+ font-weight: var(--code-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
100
+ line-height: var(--code-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
101
+ letter-spacing: var(--code-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
102
+ text-indent: var(--code-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
103
+ font-variant: var(--code-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
104
+ text-align: var(--code-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
105
+ }
106
+ .code :global(code[class*="language-"]) :global(p:first-of-type),
107
+ .code :global(code[class*="language-"]) :global(h1 + p),
108
+ .code :global(code[class*="language-"]) :global(h2 + p),
109
+ .code :global(code[class*="language-"]) :global(h3 + p),
110
+ .code :global(code[class*="language-"]) :global(h4 + p),
111
+ .code :global(code[class*="language-"]) :global(h5 + p),
112
+ .code :global(code[class*="language-"]) :global(h6 + p),
113
+ .code :global(pre[class*="language-"]) :global(p:first-of-type),
114
+ .code :global(pre[class*="language-"]) :global(h1 + p),
115
+ .code :global(pre[class*="language-"]) :global(h2 + p),
116
+ .code :global(pre[class*="language-"]) :global(h3 + p),
117
+ .code :global(pre[class*="language-"]) :global(h4 + p),
118
+ .code :global(pre[class*="language-"]) :global(h5 + p),
119
+ .code :global(pre[class*="language-"]) :global(h6 + p) {
120
+ font-family: var(--code-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit))));
121
+ text-transform: var(--code-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit))));
122
+ text-decoration: var(--code-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))));
123
+ font-size: var(--code-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit))));
124
+ font-weight: var(--code-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit))));
125
+ line-height: var(--code-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit))));
126
+ letter-spacing: var(--code-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))));
127
+ text-indent: var(--code-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
128
+ font-variant: var(--code-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
129
+ text-align: var(--code-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
130
+ }
131
+ .code :global(code[class*="language-"]) :global(p:first-of-type::first-line),
132
+ .code :global(pre[class*="language-"]) :global(p:first-of-type::first-line) {
133
+ font-family: var(--code-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
134
+ text-transform: var(--code-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
135
+ text-decoration: var(--code-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
136
+ font-size: var(--code-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
137
+ font-weight: var(--code-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
138
+ line-height: var(--code-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
139
+ letter-spacing: var(--code-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
140
+ text-indent: var(--code-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
141
+ font-variant: var(--code-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
142
+ text-align: var(--code-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
143
+ }
144
+ .code :global(code[class*="language-"]) :global(p:first-of-type::first-letter),
145
+ .code :global(pre[class*="language-"]) :global(p:first-of-type::first-letter) {
146
+ font-family: var(--code-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
147
+ text-transform: var(--code-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
148
+ text-decoration: var(--code-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
149
+ font-size: var(--code-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
150
+ font-weight: var(--code-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
151
+ line-height: var(--code-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
152
+ letter-spacing: var(--code-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
153
+ text-indent: var(--code-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
154
+ font-variant: var(--code-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
155
+ text-align: var(--code-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
156
+ background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
157
+ color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
158
+ --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
159
+ --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
160
+ }
161
+
162
+ .code :global(pre[class*="language-"]) {
163
+ background: var(--code-bg);
164
+ color: var(--code-fg);
165
+ padding: 1em;
166
+ border-radius: 0.3em;
167
+ box-shadow: var(--code-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--code-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--code-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--code-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
168
+ }
169
+
170
+ .code :global(.token.comment),
171
+ .code :global(.token.prolog),
172
+ .code :global(.token.doctype),
173
+ .code :global(.token.cdata) {
174
+ background: var(--code-comment-bg, var(--secondary-bg, var(--yellow-bg, var(--yellow-bg, inherit))));
175
+ color: var(--code-comment-fg, var(--secondary-fg, var(--yellow-fg, var(--yellow-fg, inherit))));
176
+ --link-bg: var(--code-comment-link-bg, var(--secondary-link-bg, var(--yellow-link-bg, var(--yellow-link-bg, inherit))));
177
+ --link-fg: var(--code-comment-link-fg, var(--secondary-link-fg, var(--yellow-link-fg, var(--yellow-link-fg, inherit))));
178
+ }
179
+
180
+ .code :global(.token.string),
181
+ .code :global(.token.attr-value) {
182
+ background: var(--code-string-bg, var(--code-bg, var(--code-bg, inherit)));
183
+ color: var(--code-string-fg, var(--code-fg, var(--code-fg, inherit)));
184
+ --link-bg: var(--code-string-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
185
+ --link-fg: var(--code-string-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
186
+ }
187
+
188
+ .code :global(.token.keyword) {
189
+ background: var(--code-keyword-bg, var(--code-keyword-bg, inherit));
190
+ color: var(--code-keyword-fg, var(--code-keyword-fg, inherit));
191
+ --link-bg: var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit));
192
+ --link-fg: var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit));
193
+ }
194
+
195
+ .code :global(.token.attr-name) {
196
+ background: var(--code-attr-name-bg, var(--code-attr-name-bg, inherit));
197
+ color: var(--code-attr-name-fg, var(--code-attr-name-fg, inherit));
198
+ --link-bg: var(--code-attr-name-link-bg, var(--code-attr-name-link-bg, inherit));
199
+ --link-fg: var(--code-attr-name-link-fg, var(--code-attr-name-link-fg, inherit));
200
+ }
201
+
202
+ .code :global(.token.tag) {
203
+ background: var(--code-tag-bg, var(--code-keyword-bg, var(--code-bg, var(--code-bg, inherit))));
204
+ color: var(--code-tag-fg, var(--code-keyword-fg, var(--code-fg, var(--code-fg, inherit))));
205
+ --link-bg: var(--code-tag-link-bg, var(--code-keyword-link-bg, var(--code-link-bg, var(--code-link-bg, inherit))));
206
+ --link-fg: var(--code-tag-link-fg, var(--code-keyword-link-fg, var(--code-link-fg, var(--code-link-fg, inherit))));
207
+ }
208
+
209
+ .code :global(.token.function) {
210
+ background: var(--code-function-bg, var(--code-keyword-bg, var(--code-keyword-bg, inherit)));
211
+ color: var(--code-function-fg, var(--code-keyword-fg, var(--code-keyword-fg, inherit)));
212
+ --link-bg: var(--code-function-link-bg, var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit)));
213
+ --link-fg: var(--code-function-link-fg, var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit)));
214
+ }
215
+
216
+ .code :global(.token.variable) {
217
+ background: var(--code-variable-bg, var(--code-bg, var(--code-bg, inherit)));
218
+ color: var(--code-variable-fg, var(--code-fg, var(--code-fg, inherit)));
219
+ --link-bg: var(--code-variable-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
220
+ --link-fg: var(--code-variable-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
221
+ }
222
+
223
+ .code :global(.token.operator) {
224
+ background: var(--code-operator-bg, var(--code-bg, var(--code-bg, inherit)));
225
+ color: var(--code-operator-fg, var(--code-fg, var(--code-fg, inherit)));
226
+ --link-bg: var(--code-operator-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
227
+ --link-fg: var(--code-operator-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
228
+ }</style>
package/dist/misc/CodeInner.svelte.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import "prismjs";
3
+ declare const __propDef: {
4
+ props: {
5
+ code: string;
6
+ inline?: boolean | undefined;
7
+ language?: string | undefined;
8
+ };
9
+ events: {
10
+ [evt: string]: CustomEvent<any>;
11
+ };
12
+ slots: {};
13
+ exports?: {} | undefined;
14
+ bindings?: string | undefined;
15
+ };
16
+ export type CodeInnerProps = typeof __propDef.props;
17
+ export type CodeInnerEvents = typeof __propDef.events;
18
+ export type CodeInnerSlots = typeof __propDef.slots;
19
+ export default class CodeInner extends SvelteComponent<CodeInnerProps, CodeInnerEvents, CodeInnerSlots> {
20
+ }
21
+ export {};
package/dist/overlays/Tooltip.svelte CHANGED
@@ -26,7 +26,7 @@ function showPopover() {
26
26
  }
27
27
  // Adjust horizontal position based on position in window
28
28
  if (renderedHorizontal === "left" &&
29
- targetRect.left - window.scrollX < window.innerWidth / 3) {
29
+ targetRect.left < window.innerWidth / 3) {
30
30
  renderedHorizontal = "right";
31
31
  }
32
32
  else if (renderedHorizontal === "right" &&
@@ -36,7 +36,7 @@ function showPopover() {
36
36
  // Adjust tooltip style to match target element
37
37
  if (renderedVertical === "bottom") {
38
38
  tooltipDiv.style.bottom = "unset";
39
- tooltipDiv.style.top = `${targetRect.top - window.scrollY + targetRect.height}px`;
39
+ tooltipDiv.style.top = `${targetRect.top + targetRect.height}px`;
40
40
  tooltipDiv.style.marginTop = "var(--tooltipGap, 8px)";
41
41
  }
42
42
  else if (renderedVertical == "top") {
@@ -45,11 +45,11 @@ function showPopover() {
45
45
  tooltipDiv.style.marginBottom = "var(--tooltipGap, 8px)";
46
46
  }
47
47
  if (renderedHorizontal == "right") {
48
- tooltipDiv.style.left = `${targetRect.left + window.scrollX + targetRect.width / 2}px`;
48
+ tooltipDiv.style.left = `${targetRect.left + targetRect.width / 2}px`;
49
49
  tooltipDiv.style.right = "unset";
50
50
  }
51
51
  else {
52
- tooltipDiv.style.right = `${window.innerWidth - (targetRect.left + window.scrollX + targetRect.width / 2)}px`;
52
+ tooltipDiv.style.right = `${window.innerWidth - (targetRect.left + targetRect.width / 2)}px`;
53
53
  tooltipDiv.style.left = "unset";
54
54
  }
55
55
  // Top and Left will put us OVER the element (matching top and left corner)
@@ -164,6 +164,8 @@ function showPopover() {
164
164
  max-width: var(--tooltip-line-width, var(--ui-line-width, var(--line-width, unset)));
165
165
  margin-left: auto;
166
166
  margin-right: auto;
167
+ margin-bottom: var(--tooltip-heading-margin-bottom, var(--ui-heading-margin-bottom, var(--heading-margin-bottom, 0)));
168
+ margin-top: var(--tooltip-heading-margin-top, var(--ui-heading-margin-top, var(--heading-margin-top, 1.5em)));
167
169
  }
168
170
  .tooltip :global(p) {
169
171
  font-family: var(--tooltip-paragraph-font-family, var(--ui-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
package/dist/sass/_mixins.scss CHANGED
@@ -148,6 +148,8 @@
148
148
  max-width: var-with-fallbacks(--line-width, append($prefixes, unset)...);
149
149
  margin-left: auto;
150
150
  margin-right: auto;
151
+ margin-bottom: var-with-fallbacks(--heading-margin-bottom, append($prefixes, 0)...);
152
+ margin-top: var-with-fallbacks(--heading-margin-top, append($prefixes, 1.5em)...);
151
153
  }
152
154
  & :global(p) {
153
155
  @include typography-props-bare(
@@ -305,14 +307,11 @@ $rectProps : (border);
305
307
  &:hover {
306
308
  filter: var-with-fallbacks(--hover-filter, append($prefixes, brightness(1.4))...);
307
309
  transform: var-with-fallbacks(--hover-transform, append($prefixes, none)...);
308
- background-color: var-with-fallbacks(--hover-bg, append($prefixes, inherit)...);
309
- color: var-with-fallbacks(--hover-fg, append($prefixes, inherit)...);
310
+
310
311
  }
311
312
  &:active {
312
313
  filter: var-with-fallbacks(--active-filter, append($prefixes, brightness(0.9))...);
313
- transform: var-with-fallbacks(--active-transform, append($prefixes, none)...);
314
- background-color: var-with-fallbacks(--active-bg, append($prefixes, inherit)...);
315
- color: var-with-fallbacks(--active-fg, append($prefixes, inherit));
314
+ transform: var-with-fallbacks(--active-transform, append($prefixes, none)...);
316
315
  }
317
316
  }
318
317
 
package/dist/typography/TextLayout.svelte CHANGED
@@ -1,4 +1,7 @@
1
- <div>
1
+ <script>
2
+ export let id = "";
3
+ </script>
4
+ <div {id}>
2
5
  <slot />
3
6
  </div>
4
7
 
@@ -65,6 +68,8 @@ div :global(h6) {
65
68
  max-width: var(--body-line-width, var(--text-line-width, var(--line-width, unset)));
66
69
  margin-left: auto;
67
70
  margin-right: auto;
71
+ margin-bottom: var(--body-heading-margin-bottom, var(--text-heading-margin-bottom, var(--heading-margin-bottom, 0)));
72
+ margin-top: var(--body-heading-margin-top, var(--text-heading-margin-top, var(--heading-margin-top, 1.5em)));
68
73
  }
69
74
  div :global(p) {
70
75
  font-family: var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
package/dist/typography/TextLayout.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} TextLayoutEvents */
3
3
  /** @typedef {typeof __propDef.slots} TextLayoutSlots */
4
4
  export default class TextLayout extends SvelteComponent<{
5
- [x: string]: never;
5
+ id?: string | undefined;
6
6
  }, {
7
7
  [evt: string]: CustomEvent<any>;
8
8
  }, {
@@ -15,7 +15,7 @@ export type TextLayoutSlots = typeof __propDef.slots;
15
15
  import { SvelteComponent } from "svelte";
16
16
  declare const __propDef: {
17
17
  props: {
18
- [x: string]: never;
18
+ id?: string | undefined;
19
19
  };
20
20
  events: {
21
21
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",
@@ -58,8 +58,6 @@
58
58
  "dependencies": {
59
59
  "@sveltejs/adapter-static": "^3.0.2",
60
60
  "prismjs": "^1.29.0",
61
- "svelte-actions-resize": "^0.1.1",
62
- "svelte-portal": "^2.2.1",
63
61
  "svelte-prism": "^1.1.6"
64
62
  }
65
63
  }