contain-css-svelte 0.0.16 → 0.0.18

package/dist/Card.svelte

@@ -42,7 +42,7 @@ let hasFooter = $$slots.footer;
 .card {
   --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))));
+  box-shadow: var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) 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, unset)));
   color: var(--card-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
@@ -57,8 +57,6 @@ let hasFooter = $$slots.footer;
 .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, unset)));
   text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, unset)));
@@ -75,7 +73,11 @@ let hasFooter = $$slots.footer;
   font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
   text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
 }
-.card section :global(p), .card section :global(blockquote), .card section :global(dl), .card section :global(ul), .card section :global(ol) {
+.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)));
@@ -110,13 +112,13 @@ let hasFooter = $$slots.footer;
   font-variant: var(--card-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
   text-align: var(--card-heading-text-align, var(--container-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))); */
+    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))); */
 }
 .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))));
@@ -212,22 +214,29 @@ let hasFooter = $$slots.footer;
   height: var(--h);
   container-type: size;
   overflow-y: auto;
-  scrollbar-width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, thin)));
-  scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 .card.fixedHeight::-webkit-scrollbar {
-  width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md))));
-  height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, var(--gap))));
+  width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, 6px)));
+  height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, 6px)));
 }
 .card.fixedHeight::-webkit-scrollbar-track {
-  background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+  background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
 .card.fixedHeight::-webkit-scrollbar-thumb {
-  background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
-  border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+  background: transparent;
+  border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
+  transition: background var(--card-transition, var(--container-transition, var(--transition, 300ms)));
+}
+.card.fixedHeight:hover {
+  scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
+}
+.card.fixedHeight:hover::-webkit-scrollbar-thumb {
+  background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
 }
-.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))));
+.card.fixedHeight:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
 }
 
 header,

package/dist/Card.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -18,12 +18,10 @@ declare const __propDef: {
         default: {};
         footer: {};
     };
-    exports?: undefined;
-    bindings?: undefined;
 };
 export type CardProps = typeof __propDef.props;
 export type CardEvents = typeof __propDef.events;
 export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
 }
 export {};

package/dist/controls/Button.svelte

@@ -1,6 +1,10 @@
 <script>import { injectVars } from "../util";
 export let primary = false;
+export let secondary = false;
 export let warning = false;
+export let danger = false;
+export let success = false;
+export let info = false;
 let iconSlotted = $$slots.icon;
 export let bg = null;
 export let fg = null;
@@ -20,7 +24,11 @@ let cssVars = injectVars($$props, "button", [
   style={cssVars}
   on:click
   class:primary
+  class:secondary
   class:warning
+  class:danger
+  class:success
+  class:info
   class:has-icon={iconSlotted}
   {...$$restProps}
 >
@@ -36,7 +44,7 @@ let cssVars = injectVars($$props, "button", [
   */
 /* Convenience groupings */
 button.has-icon {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--button-icon-gap, var(--space));
 }
@@ -61,7 +69,7 @@ button {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --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))));
+  box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) 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)));
@@ -127,4 +135,55 @@ button.warning {
   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)));
+}
+
+button.danger {
+  background: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--danger-font-family, var(--button-font-family, var(--button-font-family, inherit)));
+  text-transform: var(--danger-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
+  text-decoration: var(--danger-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
+  font-size: var(--danger-font-size, var(--button-font-size, var(--button-font-size, inherit)));
+  font-weight: var(--danger-font-weight, var(--button-font-weight, var(--button-font-weight, inherit)));
+  line-height: var(--danger-line-height, var(--button-line-height, var(--button-line-height, inherit)));
+  letter-spacing: var(--danger-letter-spacing, var(--button-letter-spacing, var(--button-letter-spacing, inherit)));
+  text-indent: var(--danger-indent, var(--button-indent, var(--button-indent, inherit)));
+  font-variant: var(--danger-font-variant, var(--button-font-variant, var(--button-font-variant, inherit)));
+  text-align: var(--danger-text-align, var(--button-text-align, var(--button-text-align, inherit)));
+}
+
+button.success {
+  background: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--success-font-family, var(--button-font-family, var(--button-font-family, inherit)));
+  text-transform: var(--success-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
+  text-decoration: var(--success-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
+  font-size: var(--success-font-size, var(--button-font-size, var(--button-font-size, inherit)));
+  font-weight: var(--success-font-weight, var(--button-font-weight, var(--button-font-weight, inherit)));
+  line-height: var(--success-line-height, var(--button-line-height, var(--button-line-height, inherit)));
+  letter-spacing: var(--success-letter-spacing, var(--button-letter-spacing, var(--button-letter-spacing, inherit)));
+  text-indent: var(--success-indent, var(--button-indent, var(--button-indent, inherit)));
+  font-variant: var(--success-font-variant, var(--button-font-variant, var(--button-font-variant, inherit)));
+  text-align: var(--success-text-align, var(--button-text-align, var(--button-text-align, inherit)));
+}
+
+button.info {
+  background: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--info-font-family, var(--button-font-family, var(--button-font-family, inherit)));
+  text-transform: var(--info-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
+  text-decoration: var(--info-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
+  font-size: var(--info-font-size, var(--button-font-size, var(--button-font-size, inherit)));
+  font-weight: var(--info-font-weight, var(--button-font-weight, var(--button-font-weight, inherit)));
+  line-height: var(--info-line-height, var(--button-line-height, var(--button-line-height, inherit)));
+  letter-spacing: var(--info-letter-spacing, var(--button-letter-spacing, var(--button-letter-spacing, inherit)));
+  text-indent: var(--info-indent, var(--button-indent, var(--button-indent, inherit)));
+  font-variant: var(--info-font-variant, var(--button-font-variant, var(--button-font-variant, inherit)));
+  text-align: var(--info-text-align, var(--button-text-align, var(--button-text-align, inherit)));
 }</style>

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

@@ -1,9 +1,13 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         primary?: boolean | undefined;
+        secondary?: boolean | undefined;
         warning?: boolean | undefined;
+        danger?: boolean | undefined;
+        success?: boolean | undefined;
+        info?: boolean | undefined;
         bg?: string | null | undefined;
         fg?: string | null | undefined;
         padding?: string | null | undefined;
@@ -19,12 +23,10 @@ declare const __propDef: {
         default: {};
         icon: {};
     };
-    exports?: undefined;
-    bindings?: undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

package/dist/controls/ButtonLink.svelte

@@ -0,0 +1,217 @@
+<script>import { injectVars } from "../util";
+export let primary = false;
+export let secondary = false;
+export let warning = false;
+export let danger = false;
+export let success = false;
+export let info = false;
+let iconSlotted = $$slots.icon;
+/* svelte-ignore unused-export-let */
+export let bg = null;
+/* svelte-ignore unused-export-let */
+export let fg = null;
+/* svelte-ignore unused-export-let */
+export let padding = null;
+/* svelte-ignore unused-export-let */
+export let width = null;
+/* svelte-ignore unused-export-let */
+export let height = null;
+let cssVars = injectVars($$props, "button", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+]);
+export let href = "#";
+export let id = null;
+</script>
+
+<a
+  role="button"
+  style={cssVars}
+  on:click
+  {href}
+  {id}
+  class:primary
+  class:secondary
+  class:warning
+  class:danger
+  class:success
+  class:info
+  class:has-icon={iconSlotted}
+  {...$$restProps}
+>
+  <span class="content"><slot /></span>
+  <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
+</a>
+
+<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 */
+a.has-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a-icon-gap, var(--space));
+}
+
+a[role=button] {
+  display: inline-block;
+  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, 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))));
+  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(--bg, unset))));
+  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --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)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) 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)));
+  text-decoration: none;
+  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
+}
+a[role=button]:hover {
+  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)));
+}
+a[role=button]:active {
+  filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
+  transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
+}
+a[role=button]:disabled {
+  cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
+  transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
+  filter: var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
+}
+a[role=button]:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
+a[role=button]:hover {
+  text-decoration: none;
+  /* Override other link styles that may be outside us */
+  background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --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))));
+}
+
+a.primary[role=button]:hover {
+  background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+}
+
+a.primary {
+  background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  font-family: var(--primary-font-family, var(--a-font-family, var(--a-font-family, inherit)));
+  text-transform: var(--primary-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
+  text-decoration: var(--primary-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
+  font-size: var(--primary-font-size, var(--a-font-size, var(--a-font-size, inherit)));
+  font-weight: var(--primary-font-weight, var(--a-font-weight, var(--a-font-weight, inherit)));
+  line-height: var(--primary-line-height, var(--a-line-height, var(--a-line-height, inherit)));
+  letter-spacing: var(--primary-letter-spacing, var(--a-letter-spacing, var(--a-letter-spacing, inherit)));
+  text-indent: var(--primary-indent, var(--a-indent, var(--a-indent, inherit)));
+  font-variant: var(--primary-font-variant, var(--a-font-variant, var(--a-font-variant, inherit)));
+  text-align: var(--primary-text-align, var(--a-text-align, var(--a-text-align, inherit)));
+}
+
+a.warning {
+  background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
+  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  font-family: var(--warning-font-family, var(--a-font-family, var(--a-font-family, inherit)));
+  text-transform: var(--warning-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
+  text-decoration: var(--warning-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
+  font-size: var(--warning-font-size, var(--a-font-size, var(--a-font-size, inherit)));
+  font-weight: var(--warning-font-weight, var(--a-font-weight, var(--a-font-weight, inherit)));
+  line-height: var(--warning-line-height, var(--a-line-height, var(--a-line-height, inherit)));
+  letter-spacing: var(--warning-letter-spacing, var(--a-letter-spacing, var(--a-letter-spacing, inherit)));
+  text-indent: var(--warning-indent, var(--a-indent, var(--a-indent, inherit)));
+  font-variant: var(--warning-font-variant, var(--a-font-variant, var(--a-font-variant, inherit)));
+  text-align: var(--warning-text-align, var(--a-text-align, var(--a-text-align, inherit)));
+}
+
+a.danger {
+  background: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--danger-font-family, var(--a-font-family, var(--a-font-family, inherit)));
+  text-transform: var(--danger-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
+  text-decoration: var(--danger-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
+  font-size: var(--danger-font-size, var(--a-font-size, var(--a-font-size, inherit)));
+  font-weight: var(--danger-font-weight, var(--a-font-weight, var(--a-font-weight, inherit)));
+  line-height: var(--danger-line-height, var(--a-line-height, var(--a-line-height, inherit)));
+  letter-spacing: var(--danger-letter-spacing, var(--a-letter-spacing, var(--a-letter-spacing, inherit)));
+  text-indent: var(--danger-indent, var(--a-indent, var(--a-indent, inherit)));
+  font-variant: var(--danger-font-variant, var(--a-font-variant, var(--a-font-variant, inherit)));
+  text-align: var(--danger-text-align, var(--a-text-align, var(--a-text-align, inherit)));
+}
+
+a.success {
+  background: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--success-font-family, var(--a-font-family, var(--a-font-family, inherit)));
+  text-transform: var(--success-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
+  text-decoration: var(--success-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
+  font-size: var(--success-font-size, var(--a-font-size, var(--a-font-size, inherit)));
+  font-weight: var(--success-font-weight, var(--a-font-weight, var(--a-font-weight, inherit)));
+  line-height: var(--success-line-height, var(--a-line-height, var(--a-line-height, inherit)));
+  letter-spacing: var(--success-letter-spacing, var(--a-letter-spacing, var(--a-letter-spacing, inherit)));
+  text-indent: var(--success-indent, var(--a-indent, var(--a-indent, inherit)));
+  font-variant: var(--success-font-variant, var(--a-font-variant, var(--a-font-variant, inherit)));
+  text-align: var(--success-text-align, var(--a-text-align, var(--a-text-align, inherit)));
+}
+
+a.info {
+  background: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  font-family: var(--info-font-family, var(--a-font-family, var(--a-font-family, inherit)));
+  text-transform: var(--info-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
+  text-decoration: var(--info-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
+  font-size: var(--info-font-size, var(--a-font-size, var(--a-font-size, inherit)));
+  font-weight: var(--info-font-weight, var(--a-font-weight, var(--a-font-weight, inherit)));
+  line-height: var(--info-line-height, var(--a-line-height, var(--a-line-height, inherit)));
+  letter-spacing: var(--info-letter-spacing, var(--a-letter-spacing, var(--a-letter-spacing, inherit)));
+  text-indent: var(--info-indent, var(--a-indent, var(--a-indent, inherit)));
+  font-variant: var(--info-font-variant, var(--a-font-variant, var(--a-font-variant, inherit)));
+  text-align: var(--info-text-align, var(--a-text-align, var(--a-text-align, inherit)));
+}</style>

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

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        primary?: boolean | undefined;
+        secondary?: boolean | undefined;
+        warning?: boolean | undefined;
+        danger?: boolean | undefined;
+        success?: boolean | undefined;
+        info?: boolean | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+        href?: string | undefined;
+        id?: string | null | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        icon: {};
+    };
+};
+export type ButtonLinkProps = typeof __propDef.props;
+export type ButtonLinkEvents = typeof __propDef.events;
+export type ButtonLinkSlots = typeof __propDef.slots;
+export default class ButtonLink extends SvelteComponentTyped<ButtonLinkProps, ButtonLinkEvents, ButtonLinkSlots> {
+}
+export {};

package/dist/controls/Checkbox.svelte

@@ -1,10 +1,16 @@
-<script>export let checked;
+<script>export let checked = undefined;
+export let name = "";
 /* Styling properties */
 import { injectVars } from "../util";
+/* svelte-ignore unused-export-let */
 export let bg = null;
+/* svelte-ignore unused-export-let */
 export let fg = null;
+/* svelte-ignore unused-export-let */
 export let padding = null;
+/* svelte-ignore unused-export-let */
 export let width = null;
+/* svelte-ignore unused-export-let */
 export let height = null;
 let style = injectVars($$props, "checkbox", [
     "bg",
@@ -14,8 +20,9 @@ let style = injectVars($$props, "checkbox", [
     "height",
 ]);
 export let value = undefined;
-// default group to an empty array so code that calls group.indexOf(...) won't throw
-export let group = [];
+export let group = undefined;
+// Determine if we're using group binding or checked binding
+$: useGroup = group !== undefined && value !== undefined;
 let ref;
 let labelContent = "";
 $: {
@@ -27,23 +34,44 @@ $: {
 
 <div class="label-sizing-box">
   <label class="checkbox-item">
-    <input
-      type="checkbox"
-      bind:checked
-      bind:group
-      {value}
-      on:change
-      on:click
-      on:blur
-      on:focus
-      on:focusin
-      on:focusout
-      {...$$restProps}
-    />
+    {#if useGroup}
+      <input
+        name={name || undefined}
+        type="checkbox"
+        {value}
+        checked={Array.isArray(group) && group.includes(value)}
+        on:change={(e) => {
+          if (e.currentTarget.checked) {
+            group = [...(group || []), value];
+          } else {
+            group = (group || []).filter(v => v !== value);
+          }
+        }}
+        on:click
+        on:blur
+        on:focus
+        on:focusin
+        on:focusout
+        {...$$restProps}
+      />
+    {:else}
+      <input
+        name={name || (ref && ref.textContent) || undefined}
+        type="checkbox"
+        bind:checked
+        on:change
+        on:click
+        on:blur
+        on:focus
+        on:focusin
+        on:focusout
+        {...$$restProps}
+      />
+    {/if}
     <span bind:this={ref}><slot /></span>
   </label>
-  <label class="invisible">
-    <input type="checkbox" checked={true} />
+  <label class="invisible" aria-hidden="true">
+    <input type="checkbox" checked={true} tabindex="-1" />
     <span>{@html labelContent}</span>
   </label>
 </div>

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

@@ -1,8 +1,9 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        checked: boolean;
+        checked?: boolean | undefined;
+        name?: string | undefined;
         bg?: string | null | undefined;
         fg?: string | null | undefined;
         padding?: string | null | undefined;
@@ -12,24 +13,22 @@ declare const __propDef: {
         group?: any;
     };
     events: {
-        change: Event;
         click: MouseEvent;
         blur: FocusEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
-    exports?: undefined;
-    bindings?: undefined;
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,12 +14,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/dist/controls/MiniButton.svelte

@@ -64,7 +64,7 @@ button {
   font-family: var(--button-font);
   cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
   transition: filter, transform var(--mini-button-transition, var(--button-transition, var(--clickable-transition, var(--transition, 300ms))));
-  box-shadow: var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md))))) var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md))))) var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space))))) var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4)))));
+  box-shadow: var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-distance, var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space))))) var(--mini-button-shadow-blur, var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space))))) var(--mini-button-shadow-color, var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4)))));
   margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
   width: var(--mini-button-size, var(--icon-size, 1em));
   height: var(--mini-button-size, var(--icon-size, 1em));