contain-css-svelte 0.0.13 → 0.0.15

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 {

package/dist/sass/_affordances.scss

@@ -0,0 +1,51 @@
+
+@use 'functions' as fn;
+
+@mixin clickable($prefixes...) {
+    cursor: fn.var-with-fallbacks(--cursor,append($prefixes, pointer)...);
+    transition: filter,transform fn.var-with-fallbacks(--transition,append($prefixes,300ms)...);
+    &:hover {
+      filter: fn.var-with-fallbacks(--hover-filter, append($prefixes, brightness(1.4))...);
+      transform: fn.var-with-fallbacks(--hover-transform, append($prefixes, none)...);
+      
+    }
+    &:active {
+        filter: fn.var-with-fallbacks(--active-filter, append($prefixes, brightness(0.9))...);
+        transform: fn.var-with-fallbacks(--active-transform, append($prefixes, none)...);      
+      }
+    &:disabled {
+      cursor: fn.var-with-fallbacks(--disabled-cursor, append($prefixes, not-allowed)...);
+      transform: fn.var-with-fallbacks(--disabled-transform, append($prefixes, none)...);
+      filter: fn.var-with-fallbacks(--disabled-filter, append($prefixes, grayscale(0.5))...);
+    }
+  }
+  
+  @mixin custom-scrollbar($prefixes...) {
+    overflow-y: auto;
+  
+    // Customizing the scrollbar
+    &::-webkit-scrollbar {
+      width: fn.var-with-fallbacks(--scrollbar-width, append($prefixes, var(--space-md))...);
+      height: fn.var-with-fallbacks(--scrollbar-height, append($prefixes, var(--gap))...);
+    }
+  
+    &::-webkit-scrollbar-track {
+      background: fn.var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--bg))...);
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background: fn.var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, var(--stripe-bg))...);
+  
+      border-radius: fn.var-with-fallbacks(--scrollbar-thumb-radius, append($prefixes, var(--border-radius))...);
+  
+      &:hover {
+        background: fn.var-with-fallbacks(--scrollbar-thumb-hover-bg, append($prefixes, var(--secondary-bg))...);
+        
+      }
+    }
+  
+    // For Firefox
+    scrollbar-width: fn.var-with-fallbacks(--scrollbar-width, append($prefixes, thin)...);
+    scrollbar-color: fn.var-with-fallbacks(--scrollbar-thumb-bg, append($prefixes, #888)...) fn.var-with-fallbacks(--scrollbar-track-bg, append($prefixes, var(--border-color))...);
+  }
+  

package/dist/sass/_box.scss

@@ -0,0 +1,112 @@
+
+@use 'functions' as fn;
+
+@mixin padding-props ($prefixes...) {
+    padding: fn.var-with-fallbacks(--padding, append($prefixes, 4px)...);
+  }
+  
+  @mixin border-props-border ($prefixes...) {
+    border: fn.var-with-fallbacks(
+      --border, 
+      append(
+        $prefixes, 
+        var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))
+      )...);  
+    $directions: (
+      top,
+      right,
+      bottom,
+      left
+    );
+    $rectProps : (border);
+  
+    // Loop through each direction
+    @each $dir in $directions {
+      // Apply prop for each direction
+       @each $p in $rectProps {
+        /* #{$p}-#{$dir}: fn.var-with-fallbacks(--#{$p}-#{$dir},
+          append($prefixes,          
+            fn.var-with-fallbacks(--border,$prefixes...)
+          )...) */
+      } 
+    }
+  }
+  @mixin border-props-none ($prefixes...) {
+    border: fn.var-with-fallbacks(--border, append($prefixes,inherit)...);
+    $directions: (
+      top,
+      right,
+      bottom,
+      left
+    );
+  $rectProps : (border);
+  
+  // Loop through each direction
+  @each $dir in $directions {
+  
+    // Apply prop for each direction
+    @each $p in $rectProps {
+      #{$p}-#{$dir}: fn.var-with-fallbacks(--#{$p}-#{$dir},
+        append($prefixes,
+          fn.var-with-fallbacks(--border,append($prefixes,none)...)
+        )...);
+    }
+  }
+  }
+  
+  @mixin box-props-square-border($prefixes...) {
+    box-sizing: border-box;
+    
+    @include border-props-border($prefixes...);
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+  }
+  
+  @mixin box-props-square($prefixes...) {
+    box-sizing: border-box;   
+    @include border-props-none($prefixes...);
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--square-radius, append($prefixes, 0)...);
+  }
+  
+  @mixin box-props($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);
+    border-radius: fn.var-with-fallbacks(--border-radius, append($prefixes,none)...);
+  }
+  
+  @mixin box-props-border($prefixes...) {
+    box-sizing: border-box;
+    @include border-props-border($prefixes..., var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)));
+    @include padding-props($prefixes...);
+    border-radius: fn.var-with-fallbacks(--radius, append($prefixes, 0)...); 
+  }
+  
+  @mixin box-props-bottom ($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);
+    border-bottom-right-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+    border-bottom-left-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+  }
+  @mixin box-props-top ($prefixes...) {
+    // Using the fn.var-with-fallbacks function for each property
+    box-sizing: border-box;
+    @include padding-props($prefixes...);
+    @include border-props-none($prefixes...);  
+    border-top-right-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+    border-top-left-radius: fn.var-with-fallbacks(--border-radius, $prefixes...);
+  }
+  
+  @mixin box-shadow($prefixes...) {  
+    //works:  
+    $shadow-distance: fn.var-with-fallbacks(--shadow-distance, append($prefixes, var(--space-md))...);
+    $shadow-blur: fn.var-with-fallbacks(--shadow-blur, append($prefixes, var(--space))...);
+    $shadow-color: fn.var-with-fallbacks(--shadow-color, append($prefixes, rgba(127, 127, 127, 0.4))...);
+    
+    box-shadow: $shadow-distance $shadow-distance $shadow-blur $shadow-color;
+  }
+  

package/dist/sass/_color.scss

@@ -0,0 +1,8 @@
+@use 'functions' as fn;
+
+@mixin color-props ($prefixes...) {
+    background: fn.var-no-fallbacks(--bg, $prefixes...);
+    color: fn.var-no-fallbacks(--fg, $prefixes...);  
+    --link-bg: #{fn.vars(link-bg, $prefixes...)};
+    --link-fg: #{fn.vars(link-fg, $prefixes...)};
+  }