contain-css-svelte 0.0.4 → 0.0.5

package/dist/Card.svelte

@@ -7,16 +7,15 @@ export let padding = null;
 export let width = null;
 export let height = null;
 let cssVars = injectVars($$props, "card", [
-  "bg",
-  "fg",
-  "padding",
-  "width",
-  "height"
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
 ]);
-$:
-  if (height) {
+$: if (height) {
     fixedHeight = true;
-  }
+}
 let hasHeader = $$slots.header;
 let hasFooter = $$slots.footer;
 </script>
@@ -44,46 +43,119 @@ let hasFooter = $$slots.footer;
   --w: var(--card-width);
   --h: var(--card-height);
   box-shadow: var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--card-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--card-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
-  background: var(--card-bg, var(--container-bg, var(--bg, white)));
-  color: var(--card-fg, var(--container-fg, var(--fg, black)));
-  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, sans-serif)));
-  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, none)));
-  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, none)));
-  font-size: var(--card-font-size, var(--container-font-size, var(--font-size, 16px)));
-  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, 400)));
-  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
-  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, 0.05em)));
+  background: var(--card-bg, var(--container-bg, var(--container-bg, inherit)));
+  color: var(--card-fg, var(--container-fg, var(--container-fg, inherit)));
+  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
   border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
   border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
   display: flex;
   flex-direction: column;
   margin: var(--card-margin, var(--margin, 16px));
 }
-.card :global(p), .card :global(blockquote), .card :global(dl), .card :global(ul), .card :global(ol) {
+
+.card section {
+  flex-grow: 1;
+  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
+  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, inherit)));
+  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, inherit)));
+  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, inherit)));
+  font-size: var(--card-font-size, var(--container-font-size, var(--font-size, inherit)));
+  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, inherit)));
+  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, inherit)));
+  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, inherit)));
+  margin-top: var(--card-margin, var(--container-margin, var(--margin, inherit)));
+  margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, inherit)));
+  margin-bottom: var(--card-margin, var(--container-margin, var(--margin, inherit)));
+  margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, inherit)));
+  text-indent: var(--card-indent, var(--container-indent, var(--indent, inherit)));
+  font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, inherit)));
+  text-align: var(--card-text-align, var(--container-text-align, var(--text-align, inherit)));
+}
+.card section :global(p), .card section :global(blockquote), .card section :global(dl), .card section :global(ul), .card section :global(ol) {
   max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
   font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
   line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
   margin-left: auto;
   margin-right: auto;
-  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, var(--normal))));
-}
-.card :global(h1),
-.card :global(h2),
-.card :global(h3),
-.card :global(h4),
-.card :global(h5),
-.card :global(h6) {
-  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
-  font-family: var(--card-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--font-family))));
-  line-height: var(--card-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--line-height))));
+  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, inherit)));
+}
+.card section :global(h1),
+.card section :global(h2),
+.card section :global(h3),
+.card section :global(h4),
+.card section :global(h5),
+.card section :global(h6) {
+  background: var(--heading-bg, var(--heading-bg, inherit));
+  color: var(--heading-fg, var(--heading-fg, inherit));
+  --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(--card-line-width, var(--container-line-width, var(--line-width, unset)));
   margin-left: auto;
   margin-right: auto;
-  color: var(--heading-color, card, container, var(--fg));
-  font-weight: var(--heading-font-weight, card, container, var(--bold));
 }
-.card section {
-  flex-grow: 1;
+.card section :global(p) {
+  font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
+  text-transform: var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
+  text-decoration: var(--card-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
+  font-size: var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
+  font-weight: var(--card-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
+  line-height: var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
+  letter-spacing: var(--card-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
+  text-indent: var(--card-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
+  font-variant: var(--card-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
+  text-align: var(--card-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
 }
+.card section :global(p:first-of-type),
+.card section :global(h1 + p),
+.card section :global(h2 + p),
+.card section :global(h3 + p),
+.card section :global(h4 + p),
+.card section :global(h5 + p),
+.card section :global(h6 + p) {
+  font-family: var(--card-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit))));
+  text-transform: var(--card-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit))));
+  text-decoration: var(--card-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))));
+  font-size: var(--card-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit))));
+  font-weight: var(--card-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit))));
+  line-height: var(--card-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit))));
+  letter-spacing: var(--card-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))));
+  text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
+  font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
+  text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+}
+.card section :global(p:first-of-type::first-line) {
+  font-family: var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
+  text-transform: var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
+  text-decoration: var(--card-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
+  font-size: var(--card-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
+  font-weight: var(--card-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
+  line-height: var(--card-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
+  letter-spacing: var(--card-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
+  text-indent: var(--card-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
+  font-variant: var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
+  text-align: var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
+}
+.card section :global(p:first-of-type::first-letter) {
+  font-family: var(--card-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
+  text-transform: var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
+  text-decoration: var(--card-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
+  font-size: var(--card-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
+  font-weight: var(--card-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
+  line-height: var(--card-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
+  letter-spacing: var(--card-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
+  text-indent: var(--card-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
+  font-variant: var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
+  text-align: var(--card-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(--first-line-bg, inherit)));
+  color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
+  --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)));
+}
+
 @container (max-width: 600px) {
   .card {
     --w: var(--card-width-small);
@@ -101,15 +173,18 @@ let hasFooter = $$slots.footer;
   display: grid;
   place-content: center;
 }
+
 .card {
   overflow-x: hidden;
   container-type: inline-size;
   width: var(--w);
 }
+
 .card section {
   line-height: var(--line-height);
   max-width: var(--line-width);
 }
+
 .card.fixedHeight {
   height: var(--h);
   container-type: size;
@@ -131,6 +206,7 @@ let hasFooter = $$slots.footer;
 .card.fixedHeight::-webkit-scrollbar-thumb:hover {
   background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
 }
+
 header,
 section {
   padding: var(--padding);
@@ -138,12 +214,15 @@ section {
   border-top-left-radius: var(--border-radius);
   border-bottom: var(--card-header-border);
 }
+
 header {
-  background: var(--card-header-bg, var(--secondary-bg, var(--bg, white)));
-  color: var(--card-header-fg, var(--secondary-fg, var(--fg, black)));
+  background: var(--card-header-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
+  color: var(--card-header-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
+  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
   box-sizing: border-box;
   padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
-  border: var(--card-header-border, var(--bar-border, var(--border, none)));
+  border: var(--card-header-border, var(--bar-border, var(--border, inherit)));
   border-top: var(--card-header-border-top, var(--bar-border-top, var(--border-top, var(--card-header-border, var(--bar-border, var(--border, none))))));
   border-right: var(--card-header-border-right, var(--bar-border-right, var(--border-right, var(--card-header-border, var(--bar-border, var(--border, none))))));
   border-bottom: var(--card-header-border-bottom, var(--bar-border-bottom, var(--border-bottom, var(--card-header-border, var(--bar-border, var(--border, none))))));
@@ -154,12 +233,34 @@ header {
   align-items: center;
   height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
 }
+
+header :global(h1),
+header :global(h2),
+header :global(h3),
+header :global(h4),
+header :global(h5),
+header :global(h6),
+footer :global(h1),
+footer :global(h2),
+footer :global(h3),
+footer :global(h4),
+footer :global(h5),
+footer :global(h6) {
+  margin: 0;
+  background: var(--card-header-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
+  color: var(--card-header-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
+  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+}
+
 footer {
-  background: var(--card-footer-bg, var(--secondary-bg, var(--bg, white)));
-  color: var(--card-footer-fg, var(--secondary-fg, var(--fg, black)));
+  background: var(--card-footer-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
+  color: var(--card-footer-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
+  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
   box-sizing: border-box;
   padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
-  border: var(--card-footer-border, var(--bar-border, var(--border, none)));
+  border: var(--card-footer-border, var(--bar-border, var(--border, inherit)));
   border-top: var(--card-footer-border-top, var(--bar-border-top, var(--border-top, var(--card-footer-border, var(--bar-border, var(--border, none))))));
   border-right: var(--card-footer-border-right, var(--bar-border-right, var(--border-right, var(--card-footer-border, var(--bar-border, var(--border, none))))));
   border-bottom: var(--card-footer-border-bottom, var(--bar-border-bottom, var(--border-bottom, var(--card-footer-border, var(--bar-border, var(--border, none))))));
@@ -168,6 +269,7 @@ footer {
   border-bottom-left-radius: var(--card-footer-border-radius, var(--border-radius, bar));
   height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
 }
+
 .hide {
   display: none;
 }</style>

package/dist/Card.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         default: {};
         footer: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type CardProps = typeof __propDef.props;
 export type CardEvents = typeof __propDef.events;

package/dist/controls/Button.svelte

@@ -8,11 +8,11 @@ export let padding = null;
 export let width = null;
 export let height = null;
 let cssVars = injectVars($$props, "button", [
-  "bg",
-  "fg",
-  "padding",
-  "width",
-  "height"
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
 ]);
 </script>
 
@@ -36,39 +36,87 @@ let cssVars = injectVars($$props, "button", [
   */
 button.has-icon {
   display: flex;
-  gap: var(--space);
+  gap: var(--button-icon-gap, var(--space));
 }
+
 button {
   width: var(--button-width);
   height: var(--button-height);
   box-sizing: border-box;
   padding: var(--button-padding, var(--control-padding, var(--secondary-padding, var(--padding, 4px))));
-  border: var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))));
+  border: var(--button-border, var(--control-border, var(--secondary-border, var(--border, inherit))));
   border-top: var(--button-border-top, var(--control-border-top, var(--secondary-border-top, var(--border-top, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))));
   border-right: var(--button-border-right, var(--control-border-right, var(--secondary-border-right, var(--border-right, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))));
   border-bottom: var(--button-border-bottom, var(--control-border-bottom, var(--secondary-border-bottom, var(--border-bottom, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))));
   border-left: var(--button-border-left, var(--control-border-left, var(--secondary-border-left, var(--border-left, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))));
   border-radius: var(--button-border-radius, var(--control-border-radius, var(--secondary-border-radius, var(--border-radius, none))));
-  background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, white))));
-  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, black))));
-  font-family: var(--button-font);
-  cursor: pointer;
-  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+  border: var(--button-border, var(--border, inherit));
+  border-top: var(--button-border-top, var(--border-top, var(--button-border, var(--border, none))));
+  border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
+  border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
+  border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
+  background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit))));
+  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit))));
+  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
+  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
+  font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
+  text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
+  text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--control-text-decoration, inherit)));
+  font-size: var(--button-font-size, var(--control-font-size, var(--control-font-size, inherit)));
+  font-weight: var(--button-font-weight, var(--control-font-weight, var(--control-font-weight, inherit)));
+  line-height: var(--button-line-height, var(--control-line-height, var(--control-line-height, inherit)));
+  letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--control-letter-spacing, inherit)));
+  text-indent: var(--button-indent, var(--control-indent, var(--control-indent, inherit)));
+  font-variant: var(--button-font-variant, var(--control-font-variant, var(--control-font-variant, inherit)));
+  text-align: var(--button-text-align, var(--control-text-align, var(--control-text-align, inherit)));
+  cursor: var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
+  transition: filter, transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
   margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
 }
 button:hover {
-  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.1))));
+  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  background-color: var(--button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
+  color: var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
 }
 button:active {
   filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
+  background-color: var(--active-bg, button, clickable, inherit);
+  color: var(--active-fg, button, clickable, inherit);
 }
+
 button.primary {
-  background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, white))));
-  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, black))));
+  background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
+  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
+  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--primary-font-family, var(--button-font-family, var(--button-font-family, inherit)));
+  text-transform: var(--primary-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
+  text-decoration: var(--primary-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
+  font-size: var(--primary-font-size, var(--button-font-size, var(--button-font-size, inherit)));
+  font-weight: var(--primary-font-weight, var(--button-font-weight, var(--button-font-weight, inherit)));
+  line-height: var(--primary-line-height, var(--button-line-height, var(--button-line-height, inherit)));
+  letter-spacing: var(--primary-letter-spacing, var(--button-letter-spacing, var(--button-letter-spacing, inherit)));
+  text-indent: var(--primary-indent, var(--button-indent, var(--button-indent, inherit)));
+  font-variant: var(--primary-font-variant, var(--button-font-variant, var(--button-font-variant, inherit)));
+  text-align: var(--primary-text-align, var(--button-text-align, var(--button-text-align, inherit)));
 }
+
 button.warning {
-  background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, white))));
-  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, black))));
+  background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
+  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
+  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--warning-font-family, var(--button-font-family, var(--button-font-family, inherit)));
+  text-transform: var(--warning-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
+  text-decoration: var(--warning-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
+  font-size: var(--warning-font-size, var(--button-font-size, var(--button-font-size, inherit)));
+  font-weight: var(--warning-font-weight, var(--button-font-weight, var(--button-font-weight, inherit)));
+  line-height: var(--warning-line-height, var(--button-line-height, var(--button-line-height, inherit)));
+  letter-spacing: var(--warning-letter-spacing, var(--button-letter-spacing, var(--button-letter-spacing, inherit)));
+  text-indent: var(--warning-indent, var(--button-indent, var(--button-indent, inherit)));
+  font-variant: var(--warning-font-variant, var(--button-font-variant, var(--button-font-variant, inherit)));
+  text-align: var(--warning-text-align, var(--button-text-align, var(--button-text-align, inherit)));
 }</style>

package/dist/controls/Button.svelte.d.ts

@@ -19,6 +19,8 @@ declare const __propDef: {
         default: {};
         icon: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;

package/dist/controls/Checkbox.svelte

@@ -1,21 +1,39 @@
 <script>export let checked;
+export let value;
+export let group;
+/* Styling properties */
+import { injectVars } from "../util";
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+let style = injectVars($$props, "checkbox", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+]);
 let ref;
 let labelContent;
-let labelWidth;
 $: {
-  if (ref) {
-    labelContent = ref.innerHTML;
-  }
+    if (ref) {
+        labelContent = ref.innerHTML;
+    }
 }
 </script>
 
-<label>
-  <input type="checkbox" bind:checked />
-  <span style:--label-width="{labelWidth + 4}px" bind:this={ref}><slot /></span>
-</label>
-<!-- Off-screen span for measuring -->
-<span class="offscreen" bind:clientWidth={labelWidth}>{@html labelContent}</span
->
+<div class="label-sizing-box">
+  <label class="checkbox-item">
+    <input type="checkbox" bind:checked />
+    <span bind:this={ref}><slot /></span>
+  </label>
+  <label class="invisible">
+    <input type="checkbox" checked="true" />
+    <span>{@html labelContent}</span>
+  </label>
+</div>
 
 <style>@charset "UTF-8";
 /* Convenience groupings */
@@ -25,73 +43,113 @@ $: {
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+.label-sizing-box {
+  position: relative;
+  display: inline-block;
+}
+
+.label-sizing-box .checkbox-item {
+  position: absolute;
+  left: 0;
+}
+
+.label-sizing-box .invisible {
+  position: static;
+  pointer-events: none;
+  visibility: hidden;
+}
+
 :root {
-  /*   --checkbox-size: var(--font-size);
-  --checkbox-bg: var(--inactive-bg);
-  --checkbox-fg: var(--inactive-fg);
-  --checkbox-checked-bg: var(--primary-bg);
-  --checkbox-checked-fg: var(--primary-fg);
-  --checkbox-border: 1px solid var(--white);
-  --checkbox-checked-border: 1px solid var(--white); 
-  --checkbox-check: "✓"; */
+  /* Customize these variables for checkbox styling */
+  --checkbox-check: "✓";
 }
+
 .offscreen,
 label {
-  font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family, sans-serif)));
-  text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform, none)));
-  text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration, none)));
-  font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size, 16px)));
-  font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight, 400)));
-  line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height, 1.5)));
-  letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, 0.05em)));
+  font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family, inherit)));
+  text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform, inherit)));
+  text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration, inherit)));
+  font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size, inherit)));
+  font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight, inherit)));
+  line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height, inherit)));
+  letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, inherit)));
+  margin-top: var(--checkbox-margin, var(--ui-margin, var(--margin, inherit)));
+  margin-top: var(--checkbox-margin-top, var(--ui-margin-top, var(--margin-top, inherit)));
+  margin-bottom: var(--checkbox-margin, var(--ui-margin, var(--margin, inherit)));
+  margin-bottom: var(--checkbox-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, inherit)));
+  text-indent: var(--checkbox-indent, var(--ui-indent, var(--indent, inherit)));
+  font-variant: var(--checkbox-font-variant, var(--ui-font-variant, var(--font-variant, inherit)));
+  text-align: var(--checkbox-text-align, var(--ui-text-align, var(--text-align, inherit)));
 }
+
+label {
+  margin-left: var(--checkbox-padding, var(--padding));
+}
+
 .offscreen {
-  visibility: hidden;
+  visibility: visible;
   font-weight: var(--checkbox-checked-weight, var(--checked-weight, var(--weight, active)));
   position: absolute;
 }
+
 label {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  line-height: 1.2;
-  position: relative;
   user-select: none;
-  gap: var(--radio-button-space, var(--toggle-space, var(--space-md)));
+  gap: var(--checkbox-space, var(--toggle-space, var(--space-md)));
+  cursor: var(--checkbox-cursor, var(--clickable-cursor, var(--cursor, pointer)));
+  transition: filter, transform var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms)));
 }
 label:hover {
-  filter: var(--checkbox-hover-filter);
-  transform: var(--checkbox-hover-transform);
+  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
+  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  background-color: var(--checkbox-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
+  color: var(--checkbox-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
 }
-label:has(:global(*:active)) {
-  filter: var(--checkbox-active-filter, var(--active-filter, control));
-  transform: var(--checkbox-active-transform, var(--active-transform, control));
+label:active {
+  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
+  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
+  background-color: var(--active-bg, checkbox, clickable, inherit);
+  color: var(--active-fg, checkbox, clickable, inherit);
 }
+
 label span {
   width: var(--label-width);
 }
+
 label:has(input:checked) {
   font-weight: var(--checkbox-checked-weight, var(--checked-weight, var(--weight, active)));
 }
-input {
+
+input[type=checkbox] {
   display: none;
 }
+
 label::before {
   transition: all var(--checkbox-transition, var(--transition, control));
   display: inline-grid;
   place-content: center;
   content: " ";
-  width: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
-  height: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
-  background: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, white)))));
-  color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, black)))));
+  width: var(--checkbox-size, var(--font-size, var(--size, 1em)));
+  height: var(--checkbox-size, var(--font-size, var(--size, 1em)));
+  background: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
+  color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
+  --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
   border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
   box-sizing: border-box;
 }
+
 label:has(input:checked)::before {
-  background: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, white)))));
-  color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, black)))));
+  background: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--checkbox-bg, inherit)))));
+  color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--checkbox-fg, inherit)))));
+  --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, var(--checkbox-link-bg, inherit)))));
+  --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, var(--checkbox-link-fg, inherit)))));
+  border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));
+  box-sizing: border-box;
 }
+
 label:has(input:checked)::after {
   content: var(--checkbox-check, "✓");
   font-size: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
@@ -100,6 +158,7 @@ label:has(input:checked)::after {
   left: 0;
   animation: checkbox-check var(--checkbox-transition) ease-in-out;
 }
+
 @keyframes checkbox-check {
   0% {
     width: 0;

package/dist/controls/Checkbox.svelte.d.ts

@@ -1,7 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         checked: boolean;
+        value: any;
+        group: string;
+        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>;
@@ -9,6 +17,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;