contain-css-svelte 0.0.13 → 0.0.15

package/dist/layout/SplitPane.svelte

@@ -101,13 +101,13 @@ onMount(() => {
   </div>
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .split-pane {
   display: grid;
   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

@@ -29,13 +29,13 @@ function setValue(value) {
   </Bar>
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 div > :global(.bar),
 div > :global(div > .bar) {
   background: var(--tab-bar-bg, var(--bar-bg, var(--container-bg, var(--bg, unset))));

package/dist/layout/Table.svelte

@@ -0,0 +1,217 @@
+<script>
+
+</script>
+
+<table>
+    <slot/>
+</table>
+
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+table {
+  background: var(--table-bg, var(--container-bg, var(--bg, unset)));
+  color: var(--table-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--table-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--table-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  max-width: var(--table-line-width, var(--container-line-width, var(--paragraph-line-width, var(--line-width, unset))));
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--table-body-font-family, var(--container-body-font-family, var(--paragraph-body-font-family, var(--body-font-family, var(--font-family)))));
+  font-family: var(--table-font-family, var(--container-font-family, var(--paragraph-font-family, var(--font-family, unset))));
+  text-transform: var(--table-text-transform, var(--container-text-transform, var(--paragraph-text-transform, var(--text-transform, unset))));
+  text-decoration: var(--table-text-decoration, var(--container-text-decoration, var(--paragraph-text-decoration, var(--text-decoration, unset))));
+  font-size: var(--table-font-size, var(--container-font-size, var(--paragraph-font-size, var(--font-size, unset))));
+  font-weight: var(--table-font-weight, var(--container-font-weight, var(--paragraph-font-weight, var(--font-weight, unset))));
+  line-height: var(--table-line-height, var(--container-line-height, var(--paragraph-line-height, var(--line-height, unset))));
+  letter-spacing: var(--table-letter-spacing, var(--container-letter-spacing, var(--paragraph-letter-spacing, var(--letter-spacing, unset))));
+  margin-top: var(--table-margin, var(--container-margin, var(--paragraph-margin, var(--margin, unset))));
+  margin-top: var(--table-margin-top, var(--container-margin-top, var(--paragraph-margin-top, var(--margin-top, unset))));
+  margin-bottom: var(--table-margin, var(--container-margin, var(--paragraph-margin, var(--margin, unset))));
+  margin-bottom: var(--table-margin-bottom, var(--container-margin-bottom, var(--paragraph-margin-bottom, var(--margin-bottom, unset))));
+  text-indent: var(--table-indent, var(--container-indent, var(--paragraph-indent, var(--indent, unset))));
+  font-variant: var(--table-font-variant, var(--container-font-variant, var(--paragraph-font-variant, var(--font-variant, unset))));
+  text-align: var(--table-text-align, var(--container-text-align, var(--paragraph-text-align, var(--text-align, unset))));
+  box-sizing: border-box;
+  border: var(--table-border, var(--container-border, var(--paragraph-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--table-padding, var(--container-padding, var(--paragraph-padding, var(--padding, 4px))));
+  border-radius: var(--table-square-radius, var(--container-square-radius, var(--paragraph-square-radius, var(--square-radius, 0))));
+  border-collapse: collapse;
+  box-shadow: var(--table-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--table-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--table-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--table-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
+}
+table :global(p), table :global(blockquote), table :global(dl), table :global(ul), table :global(ol) {
+  max-width: var(--table-line-width, var(--container-line-width, var(--paragraph-line-width, var(--line-width, 40em))));
+  font-family: var(--table-body-font-family, var(--container-body-font-family, var(--paragraph-body-font-family, var(--body-font-family, var(--font-family)))));
+  line-height: var(--table-line-height, var(--container-line-height, var(--paragraph-line-height, var(--line-height, 1.5))));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--table-body-font-weight, var(--container-body-font-weight, var(--paragraph-body-font-weight, var(--body-font-weight, unset))));
+}
+table :global(h1),
+table :global(h2),
+table :global(h3),
+table :global(h4),
+table :global(h5),
+table :global(h6) {
+  background: var(--heading-bg, var(--bg, unset));
+  color: var(--heading-fg, var(--fg, unset));
+  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
+  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
+  max-width: var(--table-line-width, var(--container-line-width, var(--paragraph-line-width, var(--line-width, unset))));
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--table-heading-margin-bottom, var(--container-heading-margin-bottom, var(--paragraph-heading-margin-bottom, var(--heading-margin-bottom, 0))));
+  margin-top: var(--table-heading-margin-top, var(--container-heading-margin-top, var(--paragraph-heading-margin-top, var(--heading-margin-top, 1.5em))));
+  /* Typography */
+  font-family: var(--table-heading-font-family, var(--container-heading-font-family, var(--paragraph-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit)))));
+  text-transform: var(--table-heading-text-transform, var(--container-heading-text-transform, var(--paragraph-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit)))));
+  text-decoration: var(--table-heading-text-decoration, var(--container-heading-text-decoration, var(--paragraph-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit)))));
+  font-size: var(--table-heading-font-size, var(--container-heading-font-size, var(--paragraph-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit)))));
+  font-weight: var(--table-heading-font-weight, var(--container-heading-font-weight, var(--paragraph-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit)))));
+  line-height: var(--table-heading-line-height, var(--container-heading-line-height, var(--paragraph-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit)))));
+  letter-spacing: var(--table-heading-letter-spacing, var(--container-heading-letter-spacing, var(--paragraph-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit)))));
+  text-indent: var(--table-heading-indent, var(--container-heading-indent, var(--paragraph-heading-indent, var(--heading-indent, var(--heading-indent, inherit)))));
+  font-variant: var(--table-heading-font-variant, var(--container-heading-font-variant, var(--paragraph-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit)))));
+  text-align: var(--table-heading-text-align, var(--container-heading-text-align, var(--paragraph-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit)))));
+  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
+  font-size: fn.var(--heading-font-size, inherit);
+  font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
+  line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
+  letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
+  text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
+  font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
+  text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
+}
+table :global(p) {
+  font-family: var(--table-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit)))));
+  text-transform: var(--table-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit)))));
+  text-decoration: var(--table-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit)))));
+  font-size: var(--table-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit)))));
+  font-weight: var(--table-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit)))));
+  line-height: var(--table-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit)))));
+  letter-spacing: var(--table-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)))));
+  text-indent: var(--table-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit)))));
+  font-variant: var(--table-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit)))));
+  text-align: var(--table-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit)))));
+}
+table :global(p:first-of-type),
+table :global(h1 + p),
+table :global(h2 + p),
+table :global(h3 + p),
+table :global(h4 + p),
+table :global(h5 + p),
+table :global(h6 + p) {
+  font-family: var(--table-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--paragraph-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit)))));
+  text-transform: var(--table-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--paragraph-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit)))));
+  text-decoration: var(--table-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--paragraph-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit)))));
+  font-size: var(--table-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit)))));
+  font-weight: var(--table-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--paragraph-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit)))));
+  line-height: var(--table-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit)))));
+  letter-spacing: var(--table-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--paragraph-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit)))));
+  text-indent: var(--table-first-paragraph-indent, var(--container-first-paragraph-indent, var(--paragraph-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)))));
+  font-variant: var(--table-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--paragraph-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)))));
+  text-align: var(--table-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--paragraph-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)))));
+  margin-block-start: var(--table-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--paragraph-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0))));
+}
+table :global(p:first-of-type::first-line) {
+  font-family: var(--first-line-font-family, var(--table-first-line-font-family, var(--container-first-line-font-family, var(--paragraph-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))))));
+  text-transform: var(--first-line-text-transform, var(--table-first-line-text-transform, var(--container-first-line-text-transform, var(--paragraph-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))))));
+  text-decoration: var(--first-line-text-decoration, var(--table-first-line-text-decoration, var(--container-first-line-text-decoration, var(--paragraph-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))))));
+  font-size: var(--first-line-font-size, var(--table-first-line-font-size, var(--container-first-line-font-size, var(--paragraph-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))))));
+  font-weight: var(--first-line-font-weight, var(--table-first-line-font-weight, var(--container-first-line-font-weight, var(--paragraph-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))))));
+  line-height: var(--first-line-line-height, var(--table-first-line-line-height, var(--container-first-line-line-height, var(--paragraph-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))))));
+  letter-spacing: var(--first-line-letter-spacing, var(--table-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--paragraph-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))))));
+  text-indent: var(--first-line-indent, var(--table-first-line-indent, var(--container-first-line-indent, var(--paragraph-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))))));
+  font-variant: var(--first-line-font-variant, var(--table-first-line-font-variant, var(--container-first-line-font-variant, var(--paragraph-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))))));
+  text-align: var(--first-line-text-align, var(--table-first-line-text-align, var(--container-first-line-text-align, var(--paragraph-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))))));
+}
+table :global(p:first-of-type::first-letter) {
+  font-family: var(--first-letter-font-family, var(--table-first-letter-font-family, var(--container-first-letter-font-family, var(--paragraph-first-letter-font-family, var(--paragraph-first-letter-font-family, inherit)))));
+  text-transform: var(--first-letter-text-transform, var(--table-first-letter-text-transform, var(--container-first-letter-text-transform, var(--paragraph-first-letter-text-transform, var(--paragraph-first-letter-text-transform, inherit)))));
+  text-decoration: var(--first-letter-text-decoration, var(--table-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--paragraph-first-letter-text-decoration, var(--paragraph-first-letter-text-decoration, inherit)))));
+  font-size: var(--first-letter-font-size, var(--table-first-letter-font-size, var(--container-first-letter-font-size, var(--paragraph-first-letter-font-size, var(--paragraph-first-letter-font-size, inherit)))));
+  font-weight: var(--first-letter-font-weight, var(--table-first-letter-font-weight, var(--container-first-letter-font-weight, var(--paragraph-first-letter-font-weight, var(--paragraph-first-letter-font-weight, inherit)))));
+  line-height: var(--first-letter-line-height, var(--table-first-letter-line-height, var(--container-first-letter-line-height, var(--paragraph-first-letter-line-height, var(--paragraph-first-letter-line-height, inherit)))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--table-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--paragraph-first-letter-letter-spacing, var(--paragraph-first-letter-letter-spacing, inherit)))));
+  text-indent: var(--first-letter-indent, var(--table-first-letter-indent, var(--container-first-letter-indent, var(--paragraph-first-letter-indent, var(--paragraph-first-letter-indent, inherit)))));
+  font-variant: var(--first-letter-font-variant, var(--table-first-letter-font-variant, var(--container-first-letter-font-variant, var(--paragraph-first-letter-font-variant, var(--paragraph-first-letter-font-variant, inherit)))));
+  text-align: var(--first-letter-text-align, var(--table-first-letter-text-align, var(--container-first-letter-text-align, var(--paragraph-first-letter-text-align, var(--paragraph-first-letter-text-align, inherit)))));
+  --link-bg: var(--table-link-bg, var(--container-link-bg, var(--paragraph-link-bg, var(--paragraph-link-bg, inherit))));
+  --link-fg: var(--table-link-fg, var(--container-link-fg, var(--paragraph-link-fg, var(--paragraph-link-fg, inherit))));
+  background: var(--table-first-letter-bg, var(--container-first-letter-bg, var(--paragraph-first-letter-bg, var(--first-letter-bg, inherit))));
+  color: var(--table-first-letter-fg, var(--container-first-letter-fg, var(--paragraph-first-letter-fg, var(--first-letter-fg, inherit))));
+}
+
+table :global(th) {
+  background: var(--table-head-bg, var(--text-bg, var(--bg, unset)));
+  color: var(--table-head-fg, var(--text-fg, var(--fg, unset)));
+  --link-bg: var(--table-head-link-bg, var(--text-link-bg, var(--text-link-bg, inherit)));
+  --link-fg: var(--table-head-link-fg, var(--text-link-fg, var(--text-link-fg, inherit)));
+  font-family: var(--table-head-font-family, var(--header-font-family, var(--header-font-family, inherit)));
+  text-transform: var(--table-head-text-transform, var(--header-text-transform, var(--header-text-transform, inherit)));
+  text-decoration: var(--table-head-text-decoration, var(--header-text-decoration, var(--header-text-decoration, inherit)));
+  font-size: var(--table-head-font-size, var(--header-font-size, var(--header-font-size, inherit)));
+  font-weight: var(--table-head-font-weight, var(--header-font-weight, var(--font-weight, bold)));
+  line-height: var(--table-head-line-height, var(--header-line-height, var(--header-line-height, inherit)));
+  letter-spacing: var(--table-head-letter-spacing, var(--header-letter-spacing, var(--header-letter-spacing, inherit)));
+  text-indent: var(--table-head-indent, var(--header-indent, var(--header-indent, inherit)));
+  font-variant: var(--table-head-font-variant, var(--header-font-variant, var(--header-font-variant, inherit)));
+  text-align: var(--table-head-text-align, var(--header-text-align, var(--header-text-align, inherit)));
+}
+
+table :global(tr:has(th):first-child) {
+  border-bottom: var(--table-first-row-bottom-border, var(--table-thick-border, 3px) solid var(--table-first-row-border-color, var(--secondary-bg)));
+}
+
+table > :global(tbody > tr > td), table > :global(tr > th), table > :global(tr > td), table > :global(tr > th) {
+  box-sizing: border-box;
+  border: var(--table-cell-border, var(--cell-border, var(--table-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--table-cell-padding, var(--cell-padding, var(--table-padding, var(--padding, 4px))));
+  border-radius: var(--table-cell-square-radius, var(--cell-square-radius, var(--table-square-radius, var(--square-radius, 0))));
+  border-left: var(--table-border, 1px solid var(--table-border-color, var(--secondary-bg)));
+  border-right: var(--table-border, 1px solid var(--table-border-color, var(--secondary-bg)));
+}
+
+table :global(tr > th:first-child:has(~ td)) {
+  border-right: var(--table-first-row-bottom-border, var(--table-thick-border, 3px) solid var(--table-first-row-border-color, var(--secondary-bg))) !important;
+}
+
+table:has(th:first-child + td) :global(th:first-child) {
+  border-right: var(--table-first-row-bottom-border, var(--table-thick-border, 3px) solid var(--table-first-row-border-color, var(--secondary-bg))) !important;
+}</style>

package/dist/layout/Table.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/layout/Tile.svelte

@@ -23,34 +23,34 @@ $: console.log("Checked=>", checked);
 {/if}
 
 <style>@charset "UTF-8";
-/* Convenience groupings */
 /* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .tile,
 .tile label,
 .tile button {
   border: var(--tile-border, var(--border-width) var(--border-style) var(--border-color));
   box-sizing: border-box;
   border: var(--tile-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
-  /* border-top: var-with-fallbacks(--border-top,
+  /* border-top: fn.var-with-fallbacks(--border-top,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-right: var-with-fallbacks(--border-right,
+  /* border-right: fn.var-with-fallbacks(--border-right,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-bottom: var-with-fallbacks(--border-bottom,
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
-  /* border-left: var-with-fallbacks(--border-left,
+  /* border-left: fn.var-with-fallbacks(--border-left,
     append($prefixes,          
-      var-with-fallbacks(--border,$prefixes...)
+      fn.var-with-fallbacks(--border,$prefixes...)
     )...) */
   padding: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
   border-radius: var(--tile-square-radius, var(--container-square-radius, var(--square-radius, 0)));
@@ -130,6 +130,25 @@ $: console.log("Checked=>", checked);
   margin-right: auto;
   margin-bottom: var(--tile-heading-margin-bottom, var(--heading-margin-bottom, 0));
   margin-top: var(--tile-heading-margin-top, var(--heading-margin-top, 1.5em));
+  /* Typography */
+  font-family: var(--tile-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit)));
+  text-transform: var(--tile-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit)));
+  text-decoration: var(--tile-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit)));
+  font-size: var(--tile-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit)));
+  font-weight: var(--tile-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit)));
+  line-height: var(--tile-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit)));
+  letter-spacing: var(--tile-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit)));
+  text-indent: var(--tile-heading-indent, var(--heading-indent, var(--heading-indent, inherit)));
+  font-variant: var(--tile-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit)));
+  text-align: var(--tile-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit)));
+  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
+  font-size: fn.var(--heading-font-size, inherit);
+  font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
+  line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
+  letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
+  text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
+  font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
+  text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
 }
 .tile :global(p),
 .tile label :global(p),
@@ -176,38 +195,39 @@ $: console.log("Checked=>", checked);
   text-indent: var(--tile-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit)));
   font-variant: var(--tile-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit)));
   text-align: var(--tile-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit)));
+  margin-block-start: var(--tile-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0));
 }
 .tile :global(p:first-of-type::first-line),
 .tile label :global(p:first-of-type::first-line),
 .tile button :global(p:first-of-type::first-line) {
-  font-family: var(--tile-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)));
-  text-transform: var(--tile-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)));
-  text-decoration: var(--tile-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)));
-  font-size: var(--tile-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)));
-  font-weight: var(--tile-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)));
-  line-height: var(--tile-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)));
-  letter-spacing: var(--tile-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)));
-  text-indent: var(--tile-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)));
-  font-variant: var(--tile-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)));
-  text-align: var(--tile-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)));
+  font-family: var(--first-line-font-family, var(--tile-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
+  text-transform: var(--first-line-text-transform, var(--tile-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
+  text-decoration: var(--first-line-text-decoration, var(--tile-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
+  font-size: var(--first-line-font-size, var(--tile-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
+  font-weight: var(--first-line-font-weight, var(--tile-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
+  line-height: var(--first-line-line-height, var(--tile-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
+  letter-spacing: var(--first-line-letter-spacing, var(--tile-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
+  text-indent: var(--first-line-indent, var(--tile-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
+  font-variant: var(--first-line-font-variant, var(--tile-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
+  text-align: var(--first-line-text-align, var(--tile-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
 }
 .tile :global(p:first-of-type::first-letter),
 .tile label :global(p:first-of-type::first-letter),
 .tile button :global(p:first-of-type::first-letter) {
-  font-family: var(--tile-first-letter-font-family, var(--tile-first-letter-font-family, inherit));
-  text-transform: var(--tile-first-letter-text-transform, var(--tile-first-letter-text-transform, inherit));
-  text-decoration: var(--tile-first-letter-text-decoration, var(--tile-first-letter-text-decoration, inherit));
-  font-size: var(--tile-first-letter-font-size, var(--tile-first-letter-font-size, inherit));
-  font-weight: var(--tile-first-letter-font-weight, var(--tile-first-letter-font-weight, inherit));
-  line-height: var(--tile-first-letter-line-height, var(--tile-first-letter-line-height, inherit));
-  letter-spacing: var(--tile-first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, inherit));
-  text-indent: var(--tile-first-letter-indent, var(--tile-first-letter-indent, inherit));
-  font-variant: var(--tile-first-letter-font-variant, var(--tile-first-letter-font-variant, inherit));
-  text-align: var(--tile-first-letter-text-align, var(--tile-first-letter-text-align, inherit));
-  background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
-  color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
-  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
-  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
+  font-family: var(--first-letter-font-family, var(--tile-first-letter-font-family, var(--tile-first-letter-font-family, inherit)));
+  text-transform: var(--first-letter-text-transform, var(--tile-first-letter-text-transform, var(--tile-first-letter-text-transform, inherit)));
+  text-decoration: var(--first-letter-text-decoration, var(--tile-first-letter-text-decoration, var(--tile-first-letter-text-decoration, inherit)));
+  font-size: var(--first-letter-font-size, var(--tile-first-letter-font-size, var(--tile-first-letter-font-size, inherit)));
+  font-weight: var(--first-letter-font-weight, var(--tile-first-letter-font-weight, var(--tile-first-letter-font-weight, inherit)));
+  line-height: var(--first-letter-line-height, var(--tile-first-letter-line-height, var(--tile-first-letter-line-height, inherit)));
+  letter-spacing: var(--first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, var(--tile-first-letter-letter-spacing, inherit)));
+  text-indent: var(--first-letter-indent, var(--tile-first-letter-indent, var(--tile-first-letter-indent, inherit)));
+  font-variant: var(--first-letter-font-variant, var(--tile-first-letter-font-variant, var(--tile-first-letter-font-variant, inherit)));
+  text-align: var(--first-letter-text-align, var(--tile-first-letter-text-align, var(--tile-first-letter-text-align, inherit)));
+  --link-bg: var(--tile-link-bg, var(--tile-link-bg, inherit));
+  --link-fg: var(--tile-link-fg, var(--tile-link-fg, inherit));
+  background: var(--tile-first-letter-bg, var(--first-letter-bg, inherit));
+  color: var(--tile-first-letter-fg, var(--first-letter-fg, inherit));
 }
 
 button.tile,
@@ -225,6 +245,12 @@ label.tile:active {
   filter: var(--tile-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--tile-active-transform, var(--active-transform, none));
 }
+button.tile:disabled,
+label.tile:disabled {
+  cursor: var(--tile-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--tile-disabled-transform, var(--disabled-transform, none));
+  filter: var(--tile-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
 
 label.tile {
   background: var(--tile-selected-bg, var(--bg, unset));

package/dist/misc/CodeInner.svelte

@@ -9,13 +9,13 @@ export let language = "html";
   <Prism {language} source={code} />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 div {
   width: var(--code-width, var(--line-width, 90%));
   height: var(--code-height, auto);
@@ -36,10 +36,6 @@ div > :global(pre) {
   color: var(--code-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--code-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--code-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
-  max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
-  margin-left: auto;
-  margin-right: auto;
-  font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
   font-family: var(--code-font-family, var(--container-font-family, var(--font-family, unset)));
   text-transform: var(--code-text-transform, var(--container-text-transform, var(--text-transform, unset)));
   text-decoration: var(--code-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
@@ -55,109 +51,6 @@ div > :global(pre) {
   font-variant: var(--code-font-variant, var(--container-font-variant, var(--font-variant, unset)));
   text-align: var(--code-text-align, var(--container-text-align, var(--text-align, unset)));
 }
-.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),
-.code :global(pre[class*="language-"]) :global(p),
-.code :global(pre[class*="language-"]) :global(blockquote),
-.code :global(pre[class*="language-"]) :global(dl),
-.code :global(pre[class*="language-"]) :global(ul),
-.code :global(pre[class*="language-"]) :global(ol) {
-  max-width: var(--code-line-width, var(--container-line-width, var(--line-width, 40em)));
-  font-family: var(--code-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  line-height: var(--code-line-height, var(--container-line-height, var(--line-height, 1.5)));
-  margin-left: auto;
-  margin-right: auto;
-  font-weight: var(--code-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
-}
-.code :global(code[class*="language-"]) :global(h1),
-.code :global(code[class*="language-"]) :global(h2),
-.code :global(code[class*="language-"]) :global(h3),
-.code :global(code[class*="language-"]) :global(h4),
-.code :global(code[class*="language-"]) :global(h5),
-.code :global(code[class*="language-"]) :global(h6),
-.code :global(pre[class*="language-"]) :global(h1),
-.code :global(pre[class*="language-"]) :global(h2),
-.code :global(pre[class*="language-"]) :global(h3),
-.code :global(pre[class*="language-"]) :global(h4),
-.code :global(pre[class*="language-"]) :global(h5),
-.code :global(pre[class*="language-"]) :global(h6) {
-  background: var(--heading-bg, var(--bg, unset));
-  color: var(--heading-fg, var(--fg, unset));
-  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
-  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
-  max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: var(--code-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
-  margin-top: var(--code-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
-}
-.code :global(code[class*="language-"]) :global(p),
-.code :global(pre[class*="language-"]) :global(p) {
-  font-family: var(--code-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
-  text-transform: var(--code-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
-  text-decoration: var(--code-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
-  font-size: var(--code-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
-  font-weight: var(--code-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
-  line-height: var(--code-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
-  letter-spacing: var(--code-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
-  text-indent: var(--code-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
-  font-variant: var(--code-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
-  text-align: var(--code-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
-}
-.code :global(code[class*="language-"]) :global(p:first-of-type),
-.code :global(code[class*="language-"]) :global(h1 + p),
-.code :global(code[class*="language-"]) :global(h2 + p),
-.code :global(code[class*="language-"]) :global(h3 + p),
-.code :global(code[class*="language-"]) :global(h4 + p),
-.code :global(code[class*="language-"]) :global(h5 + p),
-.code :global(code[class*="language-"]) :global(h6 + p),
-.code :global(pre[class*="language-"]) :global(p:first-of-type),
-.code :global(pre[class*="language-"]) :global(h1 + p),
-.code :global(pre[class*="language-"]) :global(h2 + p),
-.code :global(pre[class*="language-"]) :global(h3 + p),
-.code :global(pre[class*="language-"]) :global(h4 + p),
-.code :global(pre[class*="language-"]) :global(h5 + p),
-.code :global(pre[class*="language-"]) :global(h6 + p) {
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  text-indent: var(--code-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
-  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))));
-  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))));
-}
-.code :global(code[class*="language-"]) :global(p:first-of-type::first-line),
-.code :global(pre[class*="language-"]) :global(p:first-of-type::first-line) {
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  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))));
-  text-indent: var(--code-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
-  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))));
-  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))));
-}
-.code :global(code[class*="language-"]) :global(p:first-of-type::first-letter),
-.code :global(pre[class*="language-"]) :global(p:first-of-type::first-letter) {
-  font-family: var(--code-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
-  text-transform: var(--code-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
-  text-decoration: var(--code-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
-  font-size: var(--code-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
-  font-weight: var(--code-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
-  line-height: var(--code-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
-  letter-spacing: var(--code-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
-  text-indent: var(--code-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
-  font-variant: var(--code-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
-  text-align: var(--code-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
-  background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
-  color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
-  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
-  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
-}
 
 .code :global(pre[class*="language-"]) {
   background: var(--code-bg);