contain-css-svelte 0.0.13 → 0.0.14

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);

package/dist/misc/Progress.svelte

@@ -0,0 +1,288 @@
+<script>import { injectVars } from "../util";
+// States for styling variations
+export let state = "inprogress";
+// Accept either a numeric value (0..max) or 'indeterminate'
+export let value = 0;
+export let max = 100;
+// Additional style props -> CSS variables
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+// Turn these props into --progress-bg, --progress-fg, etc.
+let style = injectVars($$props, "progress", ["bg", "fg", "padding", "width", "height"]);
+/**
+ * 1) Compute fraction = (value / max) if numeric.
+ *    If 'indeterminate', use 1.
+ *    Also clamp to [0..1] so you don't exceed 100%.
+ */
+$: fillFraction =
+    value === "indeterminate"
+        ? 1
+        : max <= 0
+            ? 0
+            : Math.min(Math.max(value, 0), max) / max;
+/**
+ * 2) The track animates stripes if we are not complete.
+ */
+$: animateTrack = !['uninitiated', 'complete'].includes(state);
+let halfFull = false;
+$: halfFull = fillFraction > 0.5;
+</script>
+  
+  <!-- 
+    1) Hidden native <progress> for a11y. 
+       If 'indeterminate', omit the value attribute entirely.
+  -->
+  <div class="progress-container" data-state={state} style={style}>
+    <progress
+      aria-label="Progress"
+      {max}
+      value={Number(value) || 0.5}
+      hidden
+    />
+  
+    <!-- 2) Custom track with diagonal stripes (scrolling) when animateTrack=true -->
+    <div class="progress-track" data-animate={animateTrack} class:half-full={halfFull}>
+      <!-- 3) The progress bar expands in width from 0..100%. -->
+      <div
+        class="progress-bar"
+        style={`width: ${fillFraction * 100}%;`}
+        data-indeterminate={value === "indeterminate"}
+      ></div>
+  
+      <!-- 4) Overlaid text or content -->
+      <div class="progress-text">
+        <div><slot /></div>
+      </div>
+    </div>
+  </div>
+  
+  <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 */
+@keyframes track-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 57px 0;
+  }
+}
+.progress-container {
+  background: var(--progress-bg, var(--container-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--progress-fg, var(--container-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--progress-link-bg, var(--container-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--progress-link-fg, var(--container-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  box-sizing: border-box;
+  padding: var(--progress-padding, var(--container-padding, var(--control-padding, var(--secondary-padding, var(--padding, 4px)))));
+  border: var(--progress-border, var(--container-border, var(--control-border, var(--secondary-border, var(--border, inherit)))));
+  border-top: var(--progress-border-top, var(--container-border-top, var(--control-border-top, var(--secondary-border-top, var(--border-top, var(--progress-border, var(--container-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-right: var(--progress-border-right, var(--container-border-right, var(--control-border-right, var(--secondary-border-right, var(--border-right, var(--progress-border, var(--container-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-bottom: var(--progress-border-bottom, var(--container-border-bottom, var(--control-border-bottom, var(--secondary-border-bottom, var(--border-bottom, var(--progress-border, var(--container-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-left: var(--progress-border-left, var(--container-border-left, var(--control-border-left, var(--secondary-border-left, var(--border-left, var(--progress-border, var(--container-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-radius: var(--progress-border-radius, var(--container-border-radius, var(--control-border-radius, var(--secondary-border-radius, var(--border-radius, none)))));
+  max-width: var(--progress-line-width, var(--ui-line-width, var(--line-width, unset)));
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--progress-body-font-family, var(--ui-body-font-family, var(--body-font-family, var(--font-family))));
+  font-family: var(--progress-font-family, var(--ui-font-family, var(--font-family, unset)));
+  text-transform: var(--progress-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--progress-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--progress-font-size, var(--ui-font-size, var(--font-size, unset)));
+  font-weight: var(--progress-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
+  line-height: var(--progress-line-height, var(--ui-line-height, var(--line-height, unset)));
+  letter-spacing: var(--progress-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--progress-margin, var(--ui-margin, var(--margin, unset)));
+  margin-top: var(--progress-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--progress-margin, var(--ui-margin, var(--margin, unset)));
+  margin-bottom: var(--progress-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--progress-indent, var(--ui-indent, var(--indent, unset)));
+  font-variant: var(--progress-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
+  text-align: var(--progress-text-align, var(--ui-text-align, var(--text-align, unset)));
+  width: var(--progress-width, var(--width, 100%));
+  display: inline-block;
+  position: relative;
+  /* Hidden UI, but read by screen readers. */
+}
+.progress-container :global(p), .progress-container :global(blockquote), .progress-container :global(dl), .progress-container :global(ul), .progress-container :global(ol) {
+  max-width: var(--progress-line-width, var(--ui-line-width, var(--line-width, 40em)));
+  font-family: var(--progress-body-font-family, var(--ui-body-font-family, var(--body-font-family, var(--font-family))));
+  line-height: var(--progress-line-height, var(--ui-line-height, var(--line-height, 1.5)));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--progress-body-font-weight, var(--ui-body-font-weight, var(--body-font-weight, unset)));
+}
+.progress-container :global(h1),
+.progress-container :global(h2),
+.progress-container :global(h3),
+.progress-container :global(h4),
+.progress-container :global(h5),
+.progress-container :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(--progress-line-width, var(--ui-line-width, var(--line-width, unset)));
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--progress-heading-margin-bottom, var(--ui-heading-margin-bottom, var(--heading-margin-bottom, 0)));
+  margin-top: var(--progress-heading-margin-top, var(--ui-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--progress-heading-font-family, var(--ui-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
+  text-transform: var(--progress-heading-text-transform, var(--ui-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
+  text-decoration: var(--progress-heading-text-decoration, var(--ui-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
+  font-size: var(--progress-heading-font-size, var(--ui-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
+  font-weight: var(--progress-heading-font-weight, var(--ui-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
+  line-height: var(--progress-heading-line-height, var(--ui-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
+  letter-spacing: var(--progress-heading-letter-spacing, var(--ui-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
+  text-indent: var(--progress-heading-indent, var(--ui-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
+  font-variant: var(--progress-heading-font-variant, var(--ui-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
+  text-align: var(--progress-heading-text-align, var(--ui-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))); */
+}
+.progress-container :global(p) {
+  font-family: var(--progress-paragraph-font-family, var(--ui-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
+  text-transform: var(--progress-paragraph-text-transform, var(--ui-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
+  text-decoration: var(--progress-paragraph-text-decoration, var(--ui-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
+  font-size: var(--progress-paragraph-font-size, var(--ui-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
+  font-weight: var(--progress-paragraph-font-weight, var(--ui-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
+  line-height: var(--progress-paragraph-line-height, var(--ui-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
+  letter-spacing: var(--progress-paragraph-letter-spacing, var(--ui-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
+  text-indent: var(--progress-paragraph-indent, var(--ui-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
+  font-variant: var(--progress-paragraph-font-variant, var(--ui-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
+  text-align: var(--progress-paragraph-text-align, var(--ui-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
+}
+.progress-container :global(p:first-of-type),
+.progress-container :global(h1 + p),
+.progress-container :global(h2 + p),
+.progress-container :global(h3 + p),
+.progress-container :global(h4 + p),
+.progress-container :global(h5 + p),
+.progress-container :global(h6 + p) {
+  font-family: var(--progress-first-paragraph-font-family, var(--ui-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit))));
+  text-transform: var(--progress-first-paragraph-text-transform, var(--ui-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit))));
+  text-decoration: var(--progress-first-paragraph-text-decoration, var(--ui-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))));
+  font-size: var(--progress-first-paragraph-font-size, var(--ui-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit))));
+  font-weight: var(--progress-first-paragraph-font-weight, var(--ui-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit))));
+  line-height: var(--progress-first-paragraph-line-height, var(--ui-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit))));
+  letter-spacing: var(--progress-first-paragraph-letter-spacing, var(--ui-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))));
+  text-indent: var(--progress-first-paragraph-indent, var(--ui-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
+  font-variant: var(--progress-first-paragraph-font-variant, var(--ui-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
+  text-align: var(--progress-first-paragraph-text-align, var(--ui-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  margin-block-start: var(--progress-first-paragraph-margin-top, var(--ui-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
+}
+.progress-container :global(p:first-of-type::first-line) {
+  font-family: var(--first-line-font-family, var(--progress-first-line-font-family, var(--ui-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
+  text-transform: var(--first-line-text-transform, var(--progress-first-line-text-transform, var(--ui-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
+  text-decoration: var(--first-line-text-decoration, var(--progress-first-line-text-decoration, var(--ui-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
+  font-size: var(--first-line-font-size, var(--progress-first-line-font-size, var(--ui-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
+  font-weight: var(--first-line-font-weight, var(--progress-first-line-font-weight, var(--ui-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
+  line-height: var(--first-line-line-height, var(--progress-first-line-line-height, var(--ui-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
+  letter-spacing: var(--first-line-letter-spacing, var(--progress-first-line-letter-spacing, var(--ui-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
+  text-indent: var(--first-line-indent, var(--progress-first-line-indent, var(--ui-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
+  font-variant: var(--first-line-font-variant, var(--progress-first-line-font-variant, var(--ui-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
+  text-align: var(--first-line-text-align, var(--progress-first-line-text-align, var(--ui-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
+}
+.progress-container :global(p:first-of-type::first-letter) {
+  font-family: var(--first-letter-font-family, var(--progress-first-letter-font-family, var(--ui-first-letter-font-family, var(--ui-first-letter-font-family, inherit))));
+  text-transform: var(--first-letter-text-transform, var(--progress-first-letter-text-transform, var(--ui-first-letter-text-transform, var(--ui-first-letter-text-transform, inherit))));
+  text-decoration: var(--first-letter-text-decoration, var(--progress-first-letter-text-decoration, var(--ui-first-letter-text-decoration, var(--ui-first-letter-text-decoration, inherit))));
+  font-size: var(--first-letter-font-size, var(--progress-first-letter-font-size, var(--ui-first-letter-font-size, var(--ui-first-letter-font-size, inherit))));
+  font-weight: var(--first-letter-font-weight, var(--progress-first-letter-font-weight, var(--ui-first-letter-font-weight, var(--ui-first-letter-font-weight, inherit))));
+  line-height: var(--first-letter-line-height, var(--progress-first-letter-line-height, var(--ui-first-letter-line-height, var(--ui-first-letter-line-height, inherit))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--progress-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, inherit))));
+  text-indent: var(--first-letter-indent, var(--progress-first-letter-indent, var(--ui-first-letter-indent, var(--ui-first-letter-indent, inherit))));
+  font-variant: var(--first-letter-font-variant, var(--progress-first-letter-font-variant, var(--ui-first-letter-font-variant, var(--ui-first-letter-font-variant, inherit))));
+  text-align: var(--first-letter-text-align, var(--progress-first-letter-text-align, var(--ui-first-letter-text-align, var(--ui-first-letter-text-align, inherit))));
+  --link-bg: var(--progress-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
+  --link-fg: var(--progress-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
+  background: var(--progress-first-letter-bg, var(--ui-first-letter-bg, var(--first-letter-bg, inherit)));
+  color: var(--progress-first-letter-fg, var(--ui-first-letter-fg, var(--first-letter-fg, inherit)));
+}
+.progress-container[data-state=uninitiated] {
+  background: var(--progress-uninitiated-bg, var(--container-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--progress-uninitiated-fg, var(--container-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--progress-uninitiated-link-bg, var(--container-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--progress-uninitiated-link-fg, var(--container-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+}
+.progress-container[data-state=inprogress] {
+  background: var(--progress-inprogress-bg, var(--container-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--progress-inprogress-fg, var(--container-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--progress-inprogress-link-bg, var(--container-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--progress-inprogress-link-fg, var(--container-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+}
+.progress-container[data-state=complete] {
+  background: var(--progress-complete-bg, var(--container-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--progress-complete-fg, var(--container-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--progress-complete-link-bg, var(--container-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--progress-complete-link-fg, var(--container-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+}
+.progress-container progress {
+  display: none;
+}
+.progress-container .progress-track {
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--progress-track-padding, var(--progress-padding, var(--control-padding, var(--padding, 4px))));
+  border: var(--progress-track-border, var(--progress-border, var(--control-border, var(--border, inherit))));
+  border-top: var(--progress-track-border-top, var(--progress-border-top, var(--control-border-top, var(--border-top, var(--progress-track-border, var(--progress-border, var(--control-border, var(--border, none))))))));
+  border-right: var(--progress-track-border-right, var(--progress-border-right, var(--control-border-right, var(--border-right, var(--progress-track-border, var(--progress-border, var(--control-border, var(--border, none))))))));
+  border-bottom: var(--progress-track-border-bottom, var(--progress-border-bottom, var(--control-border-bottom, var(--border-bottom, var(--progress-track-border, var(--progress-border, var(--control-border, var(--border, none))))))));
+  border-left: var(--progress-track-border-left, var(--progress-border-left, var(--control-border-left, var(--border-left, var(--progress-track-border, var(--progress-border, var(--control-border, var(--border, none))))))));
+  border-radius: var(--progress-track-border-radius, var(--progress-border-radius, var(--control-border-radius, var(--border-radius, none))));
+  height: var(--progress-track-height, var(--progress-height, 2em));
+  background: var(--progress-track-bg, var(--secondary-bg, var(--white)));
+  overflow: hidden;
+  /* If animate => scrolling stripes in offwhite->white */
+}
+.progress-container .progress-track[data-animate=true] {
+  background: repeating-linear-gradient(135deg, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 0, var(--progress-track-bg, var(--secondary-bg, #dfdfdf)) 20px, var(--progress-track-stripe-bg, var(--white, #fff)) 20px, var(--progress-track-stripe-bg, var(--white, #fff)) 40px);
+  background-size: 3000px;
+  background-position: center;
+  animation: track-stripes 1s linear infinite;
+}
+.progress-container .progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0%;
+  transition: width 0.3s ease;
+  /* 
+    The bar color: 
+    You can override with --progress-bar-color or 
+    fallback to var(--primary-bg). We then do opacity 0.8. 
+  */
+  background-color: var(--progress-bar-color, var(--primary-bg));
+  mix-blend-mode: multiply;
+}
+.progress-container .progress-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--progress-fg, var(--secondary-fg, var(--white)));
+  text-shadow: 1px 1px var(--progress-half-fg, var(--primary-fg, var(--white)));
+}
+.progress-container .half-full .progress-text {
+  color: var(--progress-half-fg, var(--primary-fg, var(--white)));
+  text-shadow: 1px 1px var(--progress-fg, var(--secondary-fg, var(--white)));
+}</style>

package/dist/misc/Progress.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        state?: "uninitiated" | "inprogress" | "complete" | undefined;
+        value?: number | "indeterminate" | undefined;
+        max?: number | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

package/dist/overlays/Dialog.svelte

@@ -38,13 +38,13 @@ let ref;
   </dialog>
 </section>
 
-<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 */
 .variable-placeholder {
   display: none;
 }

package/dist/overlays/Tooltip.svelte

@@ -88,13 +88,13 @@ function showPopover() {
   </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 */
 .tooltip {
   position: fixed;
   margin: 0;
@@ -105,21 +105,21 @@ function showPopover() {
   --link-fg: var(--tooltip-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
   box-sizing: border-box;
   border: var(--tooltip-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(--tooltip-padding, var(--padding, 4px));
   border-radius: var(--tooltip-square-radius, var(--square-radius, 0));
@@ -166,6 +166,25 @@ function showPopover() {
   margin-right: auto;
   margin-bottom: var(--tooltip-heading-margin-bottom, var(--ui-heading-margin-bottom, var(--heading-margin-bottom, 0)));
   margin-top: var(--tooltip-heading-margin-top, var(--ui-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--tooltip-heading-font-family, var(--ui-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
+  text-transform: var(--tooltip-heading-text-transform, var(--ui-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
+  text-decoration: var(--tooltip-heading-text-decoration, var(--ui-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
+  font-size: var(--tooltip-heading-font-size, var(--ui-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
+  font-weight: var(--tooltip-heading-font-weight, var(--ui-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
+  line-height: var(--tooltip-heading-line-height, var(--ui-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
+  letter-spacing: var(--tooltip-heading-letter-spacing, var(--ui-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
+  text-indent: var(--tooltip-heading-indent, var(--ui-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
+  font-variant: var(--tooltip-heading-font-variant, var(--ui-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
+  text-align: var(--tooltip-heading-text-align, var(--ui-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))); */
 }
 .tooltip :global(p) {
   font-family: var(--tooltip-paragraph-font-family, var(--ui-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -196,34 +215,35 @@ function showPopover() {
   text-indent: var(--tooltip-first-paragraph-indent, var(--ui-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--tooltip-first-paragraph-font-variant, var(--ui-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--tooltip-first-paragraph-text-align, var(--ui-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  margin-block-start: var(--tooltip-first-paragraph-margin-top, var(--ui-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 .tooltip :global(p:first-of-type::first-line) {
-  font-family: var(--tooltip-first-line-font-family, var(--ui-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
-  text-transform: var(--tooltip-first-line-text-transform, var(--ui-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
-  text-decoration: var(--tooltip-first-line-text-decoration, var(--ui-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
-  font-size: var(--tooltip-first-line-font-size, var(--ui-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
-  font-weight: var(--tooltip-first-line-font-weight, var(--ui-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
-  line-height: var(--tooltip-first-line-line-height, var(--ui-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
-  letter-spacing: var(--tooltip-first-line-letter-spacing, var(--ui-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
-  text-indent: var(--tooltip-first-line-indent, var(--ui-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
-  font-variant: var(--tooltip-first-line-font-variant, var(--ui-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
-  text-align: var(--tooltip-first-line-text-align, var(--ui-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
+  font-family: var(--first-line-font-family, var(--tooltip-first-line-font-family, var(--ui-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
+  text-transform: var(--first-line-text-transform, var(--tooltip-first-line-text-transform, var(--ui-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
+  text-decoration: var(--first-line-text-decoration, var(--tooltip-first-line-text-decoration, var(--ui-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
+  font-size: var(--first-line-font-size, var(--tooltip-first-line-font-size, var(--ui-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
+  font-weight: var(--first-line-font-weight, var(--tooltip-first-line-font-weight, var(--ui-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
+  line-height: var(--first-line-line-height, var(--tooltip-first-line-line-height, var(--ui-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
+  letter-spacing: var(--first-line-letter-spacing, var(--tooltip-first-line-letter-spacing, var(--ui-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
+  text-indent: var(--first-line-indent, var(--tooltip-first-line-indent, var(--ui-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
+  font-variant: var(--first-line-font-variant, var(--tooltip-first-line-font-variant, var(--ui-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
+  text-align: var(--first-line-text-align, var(--tooltip-first-line-text-align, var(--ui-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
 }
 .tooltip :global(p:first-of-type::first-letter) {
-  font-family: var(--tooltip-first-letter-font-family, var(--ui-first-letter-font-family, var(--ui-first-letter-font-family, inherit)));
-  text-transform: var(--tooltip-first-letter-text-transform, var(--ui-first-letter-text-transform, var(--ui-first-letter-text-transform, inherit)));
-  text-decoration: var(--tooltip-first-letter-text-decoration, var(--ui-first-letter-text-decoration, var(--ui-first-letter-text-decoration, inherit)));
-  font-size: var(--tooltip-first-letter-font-size, var(--ui-first-letter-font-size, var(--ui-first-letter-font-size, inherit)));
-  font-weight: var(--tooltip-first-letter-font-weight, var(--ui-first-letter-font-weight, var(--ui-first-letter-font-weight, inherit)));
-  line-height: var(--tooltip-first-letter-line-height, var(--ui-first-letter-line-height, var(--ui-first-letter-line-height, inherit)));
-  letter-spacing: var(--tooltip-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, inherit)));
-  text-indent: var(--tooltip-first-letter-indent, var(--ui-first-letter-indent, var(--ui-first-letter-indent, inherit)));
-  font-variant: var(--tooltip-first-letter-font-variant, var(--ui-first-letter-font-variant, var(--ui-first-letter-font-variant, inherit)));
-  text-align: var(--tooltip-first-letter-text-align, var(--ui-first-letter-text-align, var(--ui-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(--tooltip-first-letter-font-family, var(--ui-first-letter-font-family, var(--ui-first-letter-font-family, inherit))));
+  text-transform: var(--first-letter-text-transform, var(--tooltip-first-letter-text-transform, var(--ui-first-letter-text-transform, var(--ui-first-letter-text-transform, inherit))));
+  text-decoration: var(--first-letter-text-decoration, var(--tooltip-first-letter-text-decoration, var(--ui-first-letter-text-decoration, var(--ui-first-letter-text-decoration, inherit))));
+  font-size: var(--first-letter-font-size, var(--tooltip-first-letter-font-size, var(--ui-first-letter-font-size, var(--ui-first-letter-font-size, inherit))));
+  font-weight: var(--first-letter-font-weight, var(--tooltip-first-letter-font-weight, var(--ui-first-letter-font-weight, var(--ui-first-letter-font-weight, inherit))));
+  line-height: var(--first-letter-line-height, var(--tooltip-first-letter-line-height, var(--ui-first-letter-line-height, var(--ui-first-letter-line-height, inherit))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--tooltip-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, var(--ui-first-letter-letter-spacing, inherit))));
+  text-indent: var(--first-letter-indent, var(--tooltip-first-letter-indent, var(--ui-first-letter-indent, var(--ui-first-letter-indent, inherit))));
+  font-variant: var(--first-letter-font-variant, var(--tooltip-first-letter-font-variant, var(--ui-first-letter-font-variant, var(--ui-first-letter-font-variant, inherit))));
+  text-align: var(--first-letter-text-align, var(--tooltip-first-letter-text-align, var(--ui-first-letter-text-align, var(--ui-first-letter-text-align, inherit))));
+  --link-bg: var(--tooltip-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
+  --link-fg: var(--tooltip-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
+  background: var(--tooltip-first-letter-bg, var(--ui-first-letter-bg, var(--first-letter-bg, inherit)));
+  color: var(--tooltip-first-letter-fg, var(--ui-first-letter-fg, var(--first-letter-fg, inherit)));
 }
 
 .tooltip-wrapper {