contain-css-svelte 0.0.13 → 0.0.14

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 (44) hide show
  1. package/dist/Card.svelte +46 -26
  2. package/dist/controls/Button.svelte +7 -2
  3. package/dist/controls/Checkbox.svelte +6 -1
  4. package/dist/controls/Input.svelte +2 -2
  5. package/dist/controls/MiniButton.svelte +11 -2
  6. package/dist/controls/RadioButton.svelte +11 -5
  7. package/dist/controls/Select.svelte +46 -30
  8. package/dist/controls/TabItem.svelte +2 -2
  9. package/dist/cssprops.js +0 -1
  10. package/dist/dropdowns/DropdownMenu.svelte +20 -17
  11. package/dist/layout/Bar.svelte +2 -2
  12. package/dist/layout/Column.svelte +3 -3
  13. package/dist/layout/Columns.svelte +2 -2
  14. package/dist/layout/Container.svelte +46 -26
  15. package/dist/layout/FormItem.svelte +2 -2
  16. package/dist/layout/GridLayout.svelte +2 -2
  17. package/dist/layout/Hero.svelte +46 -26
  18. package/dist/layout/MenuList.svelte +8 -2
  19. package/dist/layout/Page.svelte +2 -2
  20. package/dist/layout/Row.svelte +2 -2
  21. package/dist/layout/Sidebar.svelte +6 -1
  22. package/dist/layout/SplitPane.svelte +2 -2
  23. package/dist/layout/TabBar.svelte +2 -2
  24. package/dist/layout/Tile.svelte +59 -33
  25. package/dist/misc/CodeInner.svelte +2 -109
  26. package/dist/misc/Progress.svelte +288 -0
  27. package/dist/misc/Progress.svelte.d.ts +28 -0
  28. package/dist/overlays/Dialog.svelte +2 -2
  29. package/dist/overlays/Tooltip.svelte +54 -34
  30. package/dist/sass/_affordances.scss +51 -0
  31. package/dist/sass/_box.scss +112 -0
  32. package/dist/sass/_color.scss +8 -0
  33. package/dist/sass/_functions.scss +113 -0
  34. package/dist/sass/_mixins.scss +6 -418
  35. package/dist/sass/_responsive.scss +75 -0
  36. package/dist/sass/_typography.scss +116 -0
  37. package/dist/typography/TextLayout.svelte +46 -26
  38. package/dist/vars/affordances.css +6 -1
  39. package/dist/vars/colors.css +1 -0
  40. package/dist/vars/defaults.css +7 -1
  41. package/dist/vars/themes/typography-airy.css +1 -1
  42. package/dist/vars/themes/typography-browser.css +1 -1
  43. package/dist/vars/themes/typography-carbon.css +1 -1
  44. package/package.json +3 -3
package/dist/layout/Container.svelte CHANGED
@@ -24,13 +24,13 @@ const style = injectVars($$props, "container", [
24
24
  <slot />
25
25
  </section>
26
26
 
27
- <style>/* Convenience groupings */
28
- /* Warning: because we define a fallback
27
+ <style>/* Warning: because we define a fallback
29
28
  media query, the media query can override the container
30
29
  if we stack a bunch of these in a row and aren't thoughtful about the order.
31
30
  Put min-width queries *after* max-width queries so that smaller
32
31
  container queries don't get their styles overridden by large media queries.
33
32
  */
33
+ /* Convenience groupings */
34
34
  section {
35
35
  margin: auto;
36
36
  box-sizing: border-box;
@@ -101,6 +101,25 @@ section :global(h6) {
101
101
  margin-right: auto;
102
102
  margin-bottom: var(--container-heading-margin-bottom, var(--block-heading-margin-bottom, var(--heading-margin-bottom, 0)));
103
103
  margin-top: var(--container-heading-margin-top, var(--block-heading-margin-top, var(--heading-margin-top, 1.5em)));
104
+ /* Typography */
105
+ font-family: var(--container-heading-font-family, var(--block-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
106
+ text-transform: var(--container-heading-text-transform, var(--block-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
107
+ text-decoration: var(--container-heading-text-decoration, var(--block-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
108
+ font-size: var(--container-heading-font-size, var(--block-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
109
+ font-weight: var(--container-heading-font-weight, var(--block-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
110
+ line-height: var(--container-heading-line-height, var(--block-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
111
+ letter-spacing: var(--container-heading-letter-spacing, var(--block-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
112
+ text-indent: var(--container-heading-indent, var(--block-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
113
+ font-variant: var(--container-heading-font-variant, var(--block-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
114
+ text-align: var(--container-heading-text-align, var(--block-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit))));
115
+ /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
116
+ font-size: fn.var(--heading-font-size, inherit);
117
+ font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
118
+ line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
119
+ letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
120
+ text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
121
+ font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
122
+ text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
104
123
  }
105
124
  section :global(p) {
106
125
  font-family: var(--container-paragraph-font-family, var(--block-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -131,34 +150,35 @@ section :global(h6 + p) {
131
150
  text-indent: var(--container-first-paragraph-indent, var(--block-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
132
151
  font-variant: var(--container-first-paragraph-font-variant, var(--block-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
133
152
  text-align: var(--container-first-paragraph-text-align, var(--block-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
153
+ margin-block-start: var(--container-first-paragraph-margin-top, var(--block-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
134
154
  }
135
155
  section :global(p:first-of-type::first-line) {
136
- font-family: var(--container-first-line-font-family, var(--block-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
137
- text-transform: var(--container-first-line-text-transform, var(--block-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
138
- text-decoration: var(--container-first-line-text-decoration, var(--block-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
139
- font-size: var(--container-first-line-font-size, var(--block-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
140
- font-weight: var(--container-first-line-font-weight, var(--block-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
141
- line-height: var(--container-first-line-line-height, var(--block-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
142
- letter-spacing: var(--container-first-line-letter-spacing, var(--block-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
143
- text-indent: var(--container-first-line-indent, var(--block-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
144
- font-variant: var(--container-first-line-font-variant, var(--block-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
145
- text-align: var(--container-first-line-text-align, var(--block-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
156
+ font-family: var(--first-line-font-family, var(--container-first-line-font-family, var(--block-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
157
+ text-transform: var(--first-line-text-transform, var(--container-first-line-text-transform, var(--block-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
158
+ text-decoration: var(--first-line-text-decoration, var(--container-first-line-text-decoration, var(--block-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
159
+ font-size: var(--first-line-font-size, var(--container-first-line-font-size, var(--block-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
160
+ font-weight: var(--first-line-font-weight, var(--container-first-line-font-weight, var(--block-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
161
+ line-height: var(--first-line-line-height, var(--container-first-line-line-height, var(--block-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
162
+ letter-spacing: var(--first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--block-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
163
+ text-indent: var(--first-line-indent, var(--container-first-line-indent, var(--block-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
164
+ font-variant: var(--first-line-font-variant, var(--container-first-line-font-variant, var(--block-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
165
+ text-align: var(--first-line-text-align, var(--container-first-line-text-align, var(--block-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
146
166
  }
147
167
  section :global(p:first-of-type::first-letter) {
148
- font-family: var(--container-first-letter-font-family, var(--block-first-letter-font-family, var(--block-first-letter-font-family, inherit)));
149
- text-transform: var(--container-first-letter-text-transform, var(--block-first-letter-text-transform, var(--block-first-letter-text-transform, inherit)));
150
- text-decoration: var(--container-first-letter-text-decoration, var(--block-first-letter-text-decoration, var(--block-first-letter-text-decoration, inherit)));
151
- font-size: var(--container-first-letter-font-size, var(--block-first-letter-font-size, var(--block-first-letter-font-size, inherit)));
152
- font-weight: var(--container-first-letter-font-weight, var(--block-first-letter-font-weight, var(--block-first-letter-font-weight, inherit)));
153
- line-height: var(--container-first-letter-line-height, var(--block-first-letter-line-height, var(--block-first-letter-line-height, inherit)));
154
- letter-spacing: var(--container-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, inherit)));
155
- text-indent: var(--container-first-letter-indent, var(--block-first-letter-indent, var(--block-first-letter-indent, inherit)));
156
- font-variant: var(--container-first-letter-font-variant, var(--block-first-letter-font-variant, var(--block-first-letter-font-variant, inherit)));
157
- text-align: var(--container-first-letter-text-align, var(--block-first-letter-text-align, var(--block-first-letter-text-align, inherit)));
158
- background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
159
- color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
160
- --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
161
- --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
168
+ font-family: var(--first-letter-font-family, var(--container-first-letter-font-family, var(--block-first-letter-font-family, var(--block-first-letter-font-family, inherit))));
169
+ text-transform: var(--first-letter-text-transform, var(--container-first-letter-text-transform, var(--block-first-letter-text-transform, var(--block-first-letter-text-transform, inherit))));
170
+ text-decoration: var(--first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--block-first-letter-text-decoration, var(--block-first-letter-text-decoration, inherit))));
171
+ font-size: var(--first-letter-font-size, var(--container-first-letter-font-size, var(--block-first-letter-font-size, var(--block-first-letter-font-size, inherit))));
172
+ font-weight: var(--first-letter-font-weight, var(--container-first-letter-font-weight, var(--block-first-letter-font-weight, var(--block-first-letter-font-weight, inherit))));
173
+ line-height: var(--first-letter-line-height, var(--container-first-letter-line-height, var(--block-first-letter-line-height, var(--block-first-letter-line-height, inherit))));
174
+ letter-spacing: var(--first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, inherit))));
175
+ text-indent: var(--first-letter-indent, var(--container-first-letter-indent, var(--block-first-letter-indent, var(--block-first-letter-indent, inherit))));
176
+ font-variant: var(--first-letter-font-variant, var(--container-first-letter-font-variant, var(--block-first-letter-font-variant, var(--block-first-letter-font-variant, inherit))));
177
+ text-align: var(--first-letter-text-align, var(--container-first-letter-text-align, var(--block-first-letter-text-align, var(--block-first-letter-text-align, inherit))));
178
+ --link-bg: var(--container-link-bg, var(--block-link-bg, var(--block-link-bg, inherit)));
179
+ --link-fg: var(--container-link-fg, var(--block-link-fg, var(--block-link-fg, inherit)));
180
+ background: var(--container-first-letter-bg, var(--block-first-letter-bg, var(--first-letter-bg, inherit)));
181
+ color: var(--container-first-letter-fg, var(--block-first-letter-fg, var(--first-letter-fg, inherit)));
162
182
  }
163
183
  section::-webkit-scrollbar {
164
184
  width: var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md)));
package/dist/layout/FormItem.svelte CHANGED
@@ -22,13 +22,13 @@
22
22
  <slot name="after" />
23
23
  </div>
24
24
 
25
- <style>/* Convenience groupings */
26
- /* Warning: because we define a fallback
25
+ <style>/* Warning: because we define a fallback
27
26
  media query, the media query can override the container
28
27
  if we stack a bunch of these in a row and aren't thoughtful about the order.
29
28
  Put min-width queries *after* max-width queries so that smaller
30
29
  container queries don't get their styles overridden by large media queries.
31
30
  */
31
+ /* Convenience groupings */
32
32
  .form-item {
33
33
  display: flex;
34
34
  align-items: var(--form-label-align, baseline);
package/dist/layout/GridLayout.svelte CHANGED
@@ -7,13 +7,13 @@ export let id = "";
7
7
  <slot />
8
8
  </div>
9
9
 
10
- <style>/* Convenience groupings */
11
- /* Warning: because we define a fallback
10
+ <style>/* Warning: because we define a fallback
12
11
  media query, the media query can override the container
13
12
  if we stack a bunch of these in a row and aren't thoughtful about the order.
14
13
  Put min-width queries *after* max-width queries so that smaller
15
14
  container queries don't get their styles overridden by large media queries.
16
15
  */
16
+ /* Convenience groupings */
17
17
  .grid-layout {
18
18
  display: flex;
19
19
  flex-wrap: wrap;
package/dist/layout/Hero.svelte CHANGED
@@ -17,13 +17,13 @@ let cssVars = injectVars($$props, "hero", [
17
17
  <slot />
18
18
  </div>
19
19
 
20
- <style>/* Convenience groupings */
21
- /* Warning: because we define a fallback
20
+ <style>/* Warning: because we define a fallback
22
21
  media query, the media query can override the container
23
22
  if we stack a bunch of these in a row and aren't thoughtful about the order.
24
23
  Put min-width queries *after* max-width queries so that smaller
25
24
  container queries don't get their styles overridden by large media queries.
26
25
  */
26
+ /* Convenience groupings */
27
27
  .hero {
28
28
  --hero-font-size: calc(var(--font-size) * 2);
29
29
  background: var(--hero-bg, var(--container-bg, var(--bg, unset)));
@@ -82,6 +82,25 @@ let cssVars = injectVars($$props, "hero", [
82
82
  margin-right: auto;
83
83
  margin-bottom: var(--hero-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
84
84
  margin-top: var(--hero-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
85
+ /* Typography */
86
+ font-family: var(--hero-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
87
+ text-transform: var(--hero-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
88
+ text-decoration: var(--hero-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
89
+ font-size: var(--hero-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
90
+ font-weight: var(--hero-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
91
+ line-height: var(--hero-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
92
+ letter-spacing: var(--hero-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
93
+ text-indent: var(--hero-heading-indent, var(--container-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
94
+ font-variant: var(--hero-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
95
+ text-align: var(--hero-heading-text-align, var(--container-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit))));
96
+ /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
97
+ font-size: fn.var(--heading-font-size, inherit);
98
+ font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
99
+ line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
100
+ letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
101
+ text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
102
+ font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
103
+ text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
85
104
  }
86
105
  .hero :global(p) {
87
106
  font-family: var(--hero-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -112,34 +131,35 @@ let cssVars = injectVars($$props, "hero", [
112
131
  text-indent: var(--hero-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
113
132
  font-variant: var(--hero-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
114
133
  text-align: var(--hero-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
134
+ margin-block-start: var(--hero-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
115
135
  }
116
136
  .hero :global(p:first-of-type::first-line) {
117
- font-family: var(--hero-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
118
- text-transform: var(--hero-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
119
- text-decoration: var(--hero-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
120
- font-size: var(--hero-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
121
- font-weight: var(--hero-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
122
- line-height: var(--hero-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
123
- letter-spacing: var(--hero-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
124
- text-indent: var(--hero-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
125
- font-variant: var(--hero-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
126
- text-align: var(--hero-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
137
+ font-family: var(--first-line-font-family, var(--hero-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
138
+ text-transform: var(--first-line-text-transform, var(--hero-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
139
+ text-decoration: var(--first-line-text-decoration, var(--hero-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
140
+ font-size: var(--first-line-font-size, var(--hero-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
141
+ font-weight: var(--first-line-font-weight, var(--hero-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
142
+ line-height: var(--first-line-line-height, var(--hero-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
143
+ letter-spacing: var(--first-line-letter-spacing, var(--hero-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
144
+ text-indent: var(--first-line-indent, var(--hero-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
145
+ font-variant: var(--first-line-font-variant, var(--hero-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
146
+ text-align: var(--first-line-text-align, var(--hero-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
127
147
  }
128
148
  .hero :global(p:first-of-type::first-letter) {
129
- font-family: var(--hero-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
130
- text-transform: var(--hero-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
131
- text-decoration: var(--hero-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
132
- font-size: var(--hero-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
133
- font-weight: var(--hero-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
134
- line-height: var(--hero-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
135
- letter-spacing: var(--hero-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
136
- text-indent: var(--hero-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
137
- font-variant: var(--hero-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
138
- text-align: var(--hero-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
139
- background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
140
- color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
141
- --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
142
- --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
149
+ font-family: var(--first-letter-font-family, var(--hero-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit))));
150
+ text-transform: var(--first-letter-text-transform, var(--hero-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
151
+ text-decoration: var(--first-letter-text-decoration, var(--hero-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit))));
152
+ font-size: var(--first-letter-font-size, var(--hero-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit))));
153
+ font-weight: var(--first-letter-font-weight, var(--hero-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit))));
154
+ line-height: var(--first-letter-line-height, var(--hero-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit))));
155
+ letter-spacing: var(--first-letter-letter-spacing, var(--hero-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit))));
156
+ text-indent: var(--first-letter-indent, var(--hero-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit))));
157
+ font-variant: var(--first-letter-font-variant, var(--hero-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit))));
158
+ text-align: var(--first-letter-text-align, var(--hero-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit))));
159
+ --link-bg: var(--hero-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
160
+ --link-fg: var(--hero-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
161
+ background: var(--hero-first-letter-bg, var(--container-first-letter-bg, var(--first-letter-bg, inherit)));
162
+ color: var(--hero-first-letter-fg, var(--container-first-letter-fg, var(--first-letter-fg, inherit)));
143
163
  }
144
164
 
145
165
  @keyframes fade-in {
package/dist/layout/MenuList.svelte CHANGED
@@ -29,13 +29,13 @@ let style = injectVars($$props, "menu", [
29
29
  <slot />
30
30
  </ul>
31
31
 
32
- <style>/* Convenience groupings */
33
- /* Warning: because we define a fallback
32
+ <style>/* Warning: because we define a fallback
34
33
  media query, the media query can override the container
35
34
  if we stack a bunch of these in a row and aren't thoughtful about the order.
36
35
  Put min-width queries *after* max-width queries so that smaller
37
36
  container queries don't get their styles overridden by large media queries.
38
37
  */
38
+ /* Convenience groupings */
39
39
  .menu {
40
40
  list-style: none;
41
41
  /* @include padding-props(menu, container); */
@@ -64,6 +64,12 @@ let style = injectVars($$props, "menu", [
64
64
  filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
65
65
  transform: var(--menu-item-active-transform, var(--active-transform, none));
66
66
  }
67
+ .menu :global(li:has(> a)):disabled,
68
+ .menu :global(li:has(> button)):disabled {
69
+ cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
70
+ transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
71
+ filter: var(--menu-item-disabled-filter, var(--disabled-filter, grayscale(0.5)));
72
+ }
67
73
 
68
74
  .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
69
75
  display: flex;
package/dist/layout/Page.svelte CHANGED
@@ -90,13 +90,13 @@ onMount(() => {
90
90
  </footer>
91
91
  </section>
92
92
 
93
- <style>/* Convenience groupings */
94
- /* Warning: because we define a fallback
93
+ <style>/* Warning: because we define a fallback
95
94
  media query, the media query can override the container
96
95
  if we stack a bunch of these in a row and aren't thoughtful about the order.
97
96
  Put min-width queries *after* max-width queries so that smaller
98
97
  container queries don't get their styles overridden by large media queries.
99
98
  */
99
+ /* Convenience groupings */
100
100
  header,
101
101
  .content,
102
102
  .aside,
package/dist/layout/Row.svelte CHANGED
@@ -12,13 +12,13 @@ export let customHeight = null;
12
12
  <slot />
13
13
  </section>
14
14
 
15
- <style>/* Convenience groupings */
16
- /* Warning: because we define a fallback
15
+ <style>/* Warning: because we define a fallback
17
16
  media query, the media query can override the container
18
17
  if we stack a bunch of these in a row and aren't thoughtful about the order.
19
18
  Put min-width queries *after* max-width queries so that smaller
20
19
  container queries don't get their styles overridden by large media queries.
21
20
  */
21
+ /* Convenience groupings */
22
22
  .small {
23
23
  --h: 120px;
24
24
  }
package/dist/layout/Sidebar.svelte CHANGED
@@ -38,13 +38,13 @@ let expandedBar = true;
38
38
  </aside>
39
39
 
40
40
  <style>@charset "UTF-8";
41
- /* Convenience groupings */
42
41
  /* Warning: because we define a fallback
43
42
  media query, the media query can override the container
44
43
  if we stack a bunch of these in a row and aren't thoughtful about the order.
45
44
  Put min-width queries *after* max-width queries so that smaller
46
45
  container queries don't get their styles overridden by large media queries.
47
46
  */
47
+ /* Convenience groupings */
48
48
  aside {
49
49
  background: var(--sidebar-bg, var(--container-bg, var(--bg, unset)));
50
50
  color: var(--sidebar-fg, var(--container-fg, var(--fg, unset)));
@@ -240,6 +240,11 @@ aside .content::-webkit-scrollbar-thumb:hover {
240
240
  filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
241
241
  transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
242
242
  }
243
+ aside > button:disabled {
244
+ cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
245
+ transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
246
+ filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
247
+ }
243
248
  aside > button.close {
244
249
  left: calc(var(--sidebar-width) - var(--icon-size, 32px) + var(--padding));
245
250
  border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
package/dist/layout/SplitPane.svelte CHANGED
@@ -101,13 +101,13 @@ onMount(() => {
101
101
  </div>
102
102
  </div>
103
103
 
104
- <style>/* Convenience groupings */
105
- /* Warning: because we define a fallback
104
+ <style>/* Warning: because we define a fallback
106
105
  media query, the media query can override the container
107
106
  if we stack a bunch of these in a row and aren't thoughtful about the order.
108
107
  Put min-width queries *after* max-width queries so that smaller
109
108
  container queries don't get their styles overridden by large media queries.
110
109
  */
110
+ /* Convenience groupings */
111
111
  .split-pane {
112
112
  display: grid;
113
113
  grid-template-columns: var(--split-pane-columns, var(--split-pane-left-width, 1fr) var(--split-pane-resizer-width, var(--resizer-width, 4px)) var(--split-pane-right-width, 1fr));
package/dist/layout/TabBar.svelte CHANGED
@@ -29,13 +29,13 @@ function setValue(value) {
29
29
  </Bar>
30
30
  </div>
31
31
 
32
- <style>/* Convenience groupings */
33
- /* Warning: because we define a fallback
32
+ <style>/* Warning: because we define a fallback
34
33
  media query, the media query can override the container
35
34
  if we stack a bunch of these in a row and aren't thoughtful about the order.
36
35
  Put min-width queries *after* max-width queries so that smaller
37
36
  container queries don't get their styles overridden by large media queries.
38
37
  */
38
+ /* Convenience groupings */
39
39
  div > :global(.bar),
40
40
  div > :global(div > .bar) {
41
41
  background: var(--tab-bar-bg, var(--bar-bg, var(--container-bg, var(--bg, unset))));
package/dist/layout/Tile.svelte CHANGED
@@ -23,34 +23,34 @@ $: console.log("Checked=>", checked);
23
23
  {/if}
24
24
 
25
25
  <style>@charset "UTF-8";
26
- /* Convenience groupings */
27
26
  /* Warning: because we define a fallback
28
27
  media query, the media query can override the container
29
28
  if we stack a bunch of these in a row and aren't thoughtful about the order.
30
29
  Put min-width queries *after* max-width queries so that smaller
31
30
  container queries don't get their styles overridden by large media queries.
32
31
  */
32
+ /* Convenience groupings */
33
33
  .tile,
34
34
  .tile label,
35
35
  .tile button {
36
36
  border: var(--tile-border, var(--border-width) var(--border-style) var(--border-color));
37
37
  box-sizing: border-box;
38
38
  border: var(--tile-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
39
- /* border-top: var-with-fallbacks(--border-top,
39
+ /* border-top: fn.var-with-fallbacks(--border-top,
40
40
  append($prefixes,
41
- var-with-fallbacks(--border,$prefixes...)
41
+ fn.var-with-fallbacks(--border,$prefixes...)
42
42
  )...) */
43
- /* border-right: var-with-fallbacks(--border-right,
43
+ /* border-right: fn.var-with-fallbacks(--border-right,
44
44
  append($prefixes,
45
- var-with-fallbacks(--border,$prefixes...)
45
+ fn.var-with-fallbacks(--border,$prefixes...)
46
46
  )...) */
47
- /* border-bottom: var-with-fallbacks(--border-bottom,
47
+ /* border-bottom: fn.var-with-fallbacks(--border-bottom,
48
48
  append($prefixes,
49
- var-with-fallbacks(--border,$prefixes...)
49
+ fn.var-with-fallbacks(--border,$prefixes...)
50
50
  )...) */
51
- /* border-left: var-with-fallbacks(--border-left,
51
+ /* border-left: fn.var-with-fallbacks(--border-left,
52
52
  append($prefixes,
53
- var-with-fallbacks(--border,$prefixes...)
53
+ fn.var-with-fallbacks(--border,$prefixes...)
54
54
  )...) */
55
55
  padding: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
56
56
  border-radius: var(--tile-square-radius, var(--container-square-radius, var(--square-radius, 0)));
@@ -130,6 +130,25 @@ $: console.log("Checked=>", checked);
130
130
  margin-right: auto;
131
131
  margin-bottom: var(--tile-heading-margin-bottom, var(--heading-margin-bottom, 0));
132
132
  margin-top: var(--tile-heading-margin-top, var(--heading-margin-top, 1.5em));
133
+ /* Typography */
134
+ font-family: var(--tile-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit)));
135
+ text-transform: var(--tile-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit)));
136
+ text-decoration: var(--tile-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit)));
137
+ font-size: var(--tile-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit)));
138
+ font-weight: var(--tile-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit)));
139
+ line-height: var(--tile-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit)));
140
+ letter-spacing: var(--tile-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit)));
141
+ text-indent: var(--tile-heading-indent, var(--heading-indent, var(--heading-indent, inherit)));
142
+ font-variant: var(--tile-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit)));
143
+ text-align: var(--tile-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit)));
144
+ /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
145
+ font-size: fn.var(--heading-font-size, inherit);
146
+ font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
147
+ line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
148
+ letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
149
+ text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
150
+ font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
151
+ text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
133
152
  }
134
153
  .tile :global(p),
135
154
  .tile label :global(p),
@@ -176,38 +195,39 @@ $: console.log("Checked=>", checked);
176
195
  text-indent: var(--tile-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)));
177
196
  font-variant: var(--tile-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)));
178
197
  text-align: var(--tile-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)));
198
+ margin-block-start: var(--tile-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0));
179
199
  }
180
200
  .tile :global(p:first-of-type::first-line),
181
201
  .tile label :global(p:first-of-type::first-line),
182
202
  .tile button :global(p:first-of-type::first-line) {
183
- font-family: var(--tile-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)));
184
- text-transform: var(--tile-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)));
185
- text-decoration: var(--tile-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)));
186
- font-size: var(--tile-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)));
187
- font-weight: var(--tile-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)));
188
- line-height: var(--tile-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)));
189
- letter-spacing: var(--tile-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)));
190
- text-indent: var(--tile-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)));
191
- font-variant: var(--tile-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)));
192
- text-align: var(--tile-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)));
203
+ font-family: var(--first-line-font-family, var(--tile-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
204
+ text-transform: var(--first-line-text-transform, var(--tile-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
205
+ text-decoration: var(--first-line-text-decoration, var(--tile-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
206
+ font-size: var(--first-line-font-size, var(--tile-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
207
+ font-weight: var(--first-line-font-weight, var(--tile-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
208
+ line-height: var(--first-line-line-height, var(--tile-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
209
+ letter-spacing: var(--first-line-letter-spacing, var(--tile-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
210
+ text-indent: var(--first-line-indent, var(--tile-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
211
+ font-variant: var(--first-line-font-variant, var(--tile-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
212
+ text-align: var(--first-line-text-align, var(--tile-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
193
213
  }
194
214
  .tile :global(p:first-of-type::first-letter),
195
215
  .tile label :global(p:first-of-type::first-letter),
196
216
  .tile button :global(p:first-of-type::first-letter) {
197
- font-family: var(--tile-first-letter-font-family, var(--tile-first-letter-font-family, inherit));
198
- text-transform: var(--tile-first-letter-text-transform, var(--tile-first-letter-text-transform, inherit));
199
- text-decoration: var(--tile-first-letter-text-decoration, var(--tile-first-letter-text-decoration, inherit));
200
- font-size: var(--tile-first-letter-font-size, var(--tile-first-letter-font-size, inherit));
201
- font-weight: var(--tile-first-letter-font-weight, var(--tile-first-letter-font-weight, inherit));
202
- line-height: var(--tile-first-letter-line-height, var(--tile-first-letter-line-height, inherit));
203
- letter-spacing: var(--tile-first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, inherit));
204
- text-indent: var(--tile-first-letter-indent, var(--tile-first-letter-indent, inherit));
205
- font-variant: var(--tile-first-letter-font-variant, var(--tile-first-letter-font-variant, inherit));
206
- text-align: var(--tile-first-letter-text-align, var(--tile-first-letter-text-align, inherit));
207
- background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
208
- color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
209
- --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
210
- --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
217
+ font-family: var(--first-letter-font-family, var(--tile-first-letter-font-family, var(--tile-first-letter-font-family, inherit)));
218
+ text-transform: var(--first-letter-text-transform, var(--tile-first-letter-text-transform, var(--tile-first-letter-text-transform, inherit)));
219
+ text-decoration: var(--first-letter-text-decoration, var(--tile-first-letter-text-decoration, var(--tile-first-letter-text-decoration, inherit)));
220
+ font-size: var(--first-letter-font-size, var(--tile-first-letter-font-size, var(--tile-first-letter-font-size, inherit)));
221
+ font-weight: var(--first-letter-font-weight, var(--tile-first-letter-font-weight, var(--tile-first-letter-font-weight, inherit)));
222
+ line-height: var(--first-letter-line-height, var(--tile-first-letter-line-height, var(--tile-first-letter-line-height, inherit)));
223
+ letter-spacing: var(--first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, inherit)));
224
+ text-indent: var(--first-letter-indent, var(--tile-first-letter-indent, var(--tile-first-letter-indent, inherit)));
225
+ font-variant: var(--first-letter-font-variant, var(--tile-first-letter-font-variant, var(--tile-first-letter-font-variant, inherit)));
226
+ text-align: var(--first-letter-text-align, var(--tile-first-letter-text-align, var(--tile-first-letter-text-align, inherit)));
227
+ --link-bg: var(--tile-link-bg, var(--tile-link-bg, inherit));
228
+ --link-fg: var(--tile-link-fg, var(--tile-link-fg, inherit));
229
+ background: var(--tile-first-letter-bg, var(--first-letter-bg, inherit));
230
+ color: var(--tile-first-letter-fg, var(--first-letter-fg, inherit));
211
231
  }
212
232
 
213
233
  button.tile,
@@ -225,6 +245,12 @@ label.tile:active {
225
245
  filter: var(--tile-active-filter, var(--active-filter, brightness(0.9)));
226
246
  transform: var(--tile-active-transform, var(--active-transform, none));
227
247
  }
248
+ button.tile:disabled,
249
+ label.tile:disabled {
250
+ cursor: var(--tile-disabled-cursor, var(--disabled-cursor, not-allowed));
251
+ transform: var(--tile-disabled-transform, var(--disabled-transform, none));
252
+ filter: var(--tile-disabled-filter, var(--disabled-filter, grayscale(0.5)));
253
+ }
228
254
 
229
255
  label.tile {
230
256
  background: var(--tile-selected-bg, var(--bg, unset));