contain-css-svelte 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/Card.svelte

@@ -0,0 +1,172 @@
+<script>import { injectVars } from "./util";
+export let center = false;
+export let fixedHeight = false;
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+let cssVars = injectVars($$props, "card", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+$:
+  if (height) {
+    fixedHeight = true;
+  }
+let hasHeader = $$slots.header;
+let hasFooter = $$slots.footer;
+</script>
+
+<div class="card" class:center class:fixedHeight style={cssVars}>
+  <header class:hide={!hasHeader}>
+    <slot name="header" />
+  </header>
+  <section>
+    <slot />
+  </section>
+  <footer class:hide={!hasFooter}>
+    <slot name="footer" />
+  </footer>
+</div>
+
+<style>/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+.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))));
+  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)));
+  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;
+}
+.card :global(p), .card :global(blockquote), .card :global(dl), .card :global(ul), .card :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))));
+  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;
+}
+@container (max-width: 600px) {
+  .card {
+    --w: var(--card-width-small);
+    --h: var(--card-height-small);
+    --sidebar-width: calc(var(--card-width-small) - var(--padding) * 2);
+  }
+}
+@container (min-width: 1921px) {
+  .card {
+    --w: var(--card-width-large);
+    --h: var(--card-height-large);
+  }
+}
+.card.center {
+  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;
+  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))));
+}
+.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))));
+}
+.card.fixedHeight::-webkit-scrollbar-track {
+  background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+}
+.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))));
+}
+.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);
+  border-top-right-radius: var(--border-radius);
+  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)));
+  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-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))))));
+  border-left: var(--card-header-border-left, var(--bar-border-left, var(--border-left, var(--card-header-border, var(--bar-border, var(--border, none))))));
+  border-top-right-radius: var(--card-header-border-radius, var(--border-radius, bar));
+  border-top-left-radius: var(--card-header-border-radius, var(--border-radius, bar));
+  display: flex;
+  align-items: center;
+  height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
+}
+footer {
+  background: var(--card-footer-bg, var(--secondary-bg, var(--bg, white)));
+  color: var(--card-footer-fg, var(--secondary-fg, var(--fg, black)));
+  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-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))))));
+  border-left: var(--card-footer-border-left, var(--bar-border-left, var(--border-left, var(--card-footer-border, var(--bar-border, var(--border, none))))));
+  border-bottom-right-radius: var(--card-footer-border-radius, var(--border-radius, bar));
+  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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        center?: boolean | undefined;
+        fixedHeight?: boolean | 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: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+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 {};

package/dist/controls/Button.svelte

@@ -0,0 +1,74 @@
+<script>import { injectVars } from "../util";
+export let primary = false;
+export let warning = false;
+let iconSlotted = $$slots.icon;
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+let cssVars = injectVars($$props, "button", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+</script>
+
+<button
+  style={cssVars}
+  on:click
+  class:primary
+  class:warning
+  class:has-icon={iconSlotted}
+>
+  <span class="content"><slot /></span>
+  <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
+</button>
+
+<style>/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+button.has-icon {
+  display: flex;
+  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-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)));
+  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))));
+  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+}
+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)))));
+}
+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))));
+}
+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))));
+}</style>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        primary?: boolean | undefined;
+        warning?: boolean | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        icon: {};
+    };
+};
+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 {};

package/dist/controls/Checkbox.svelte

@@ -0,0 +1,111 @@
+<script>export let checked;
+let ref;
+let labelContent;
+let labelWidth;
+$: {
+  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
+>
+
+<style>@charset "UTF-8";
+/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+: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: "✓"; */
+}
+.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)));
+}
+.offscreen {
+  visibility: hidden;
+  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)));
+}
+label:hover {
+  filter: var(--checkbox-hover-filter);
+  transform: var(--checkbox-hover-transform);
+}
+label:has(:global(*:active)) {
+  filter: var(--checkbox-active-filter, var(--active-filter, control));
+  transform: var(--checkbox-active-transform, var(--active-transform, control));
+}
+label span {
+  width: var(--label-width);
+}
+label:has(input:checked) {
+  font-weight: var(--checkbox-checked-weight, var(--checked-weight, var(--weight, active)));
+}
+input {
+  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)))));
+  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)))));
+}
+label:has(input:checked)::after {
+  content: var(--checkbox-check, "✓");
+  font-size: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, checkbox))));
+  position: absolute;
+  left: 0;
+  animation: checkbox-check var(--checkbox-transition) ease-in-out;
+}
+@keyframes checkbox-check {
+  0% {
+    width: 0;
+    overflow: hidden;
+  }
+  100% {
+    width: var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  }
+}</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        checked: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};

package/dist/controls/Input.svelte

@@ -0,0 +1,33 @@
+<script>export let value;
+export let placeholder = "";
+</script>
+
+<input {placeholder} bind:value on:input on:change on:blur on:focus />
+
+<style>/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+input {
+  font-family: var(--input-font-family, var(--ui-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--input-text-transform, var(--ui-text-transform, var(--text-transform, none)));
+  text-decoration: var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, none)));
+  font-size: var(--input-font-size, var(--ui-font-size, var(--font-size, 16px)));
+  font-weight: var(--input-font-weight, var(--ui-font-weight, var(--font-weight, 400)));
+  line-height: var(--input-line-height, var(--ui-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, 0.05em)));
+  box-sizing: border-box;
+  padding: var(--input-padding, var(--ui-padding, var(--padding, 4px)));
+  border: var(--input-border, var(--ui-border, var(--border, none)));
+  border-top: var(--input-border-top, var(--ui-border-top, var(--border-top, var(--input-border, var(--ui-border, var(--border, none))))));
+  border-right: var(--input-border-right, var(--ui-border-right, var(--border-right, var(--input-border, var(--ui-border, var(--border, none))))));
+  border-bottom: var(--input-border-bottom, var(--ui-border-bottom, var(--border-bottom, var(--input-border, var(--ui-border, var(--border, none))))));
+  border-left: var(--input-border-left, var(--ui-border-left, var(--border-left, var(--input-border, var(--ui-border, var(--border, none))))));
+  border-radius: var(--input-border-radius, var(--ui-border-radius, var(--border-radius, none)));
+  background: var(--input-bg, var(--ui-bg, var(--bg, white)));
+  color: var(--input-fg, var(--ui-fg, var(--fg, black)));
+  width: var(--input-width);
+}</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+        placeholder?: string | undefined;
+    };
+    events: {
+        input: Event;
+        change: Event;
+        blur: FocusEvent;
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/dist/controls/MiniButton.svelte

@@ -0,0 +1,78 @@
+<script>export let primary = false;
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+import { injectVars } from "../util";
+let style = injectVars($$props, "mini-button", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+</script>
+
+<button
+  {style}
+  class:primary
+  on:click
+  on:blur
+  on:dblclick
+  on:focus
+  on:keydown
+  on:keyup
+>
+  <slot />
+</button>
+
+<style>/* Convenience groupings */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+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))));
+}
+button {
+  font-family: var(--button-font-family, var(--control-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--button-text-transform, var(--control-text-transform, var(--text-transform, none)));
+  text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--text-decoration, none)));
+  font-size: var(--button-font-size, var(--control-font-size, var(--font-size, 16px)));
+  font-weight: var(--button-font-weight, var(--control-font-weight, var(--font-weight, 400)));
+  line-height: var(--button-line-height, var(--control-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, 0.05em)));
+  background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, white)))));
+  color: var(--mini-button-fg, 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)));
+  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)))));
+  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));
+  border-radius: var(--mini-button-radius, 50%);
+  border: var(--mini-button-border, button-border, none);
+  display: inline-grid;
+  place-content: center;
+}
+button:hover {
+  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.1)))));
+  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
+}
+button:active {
+  filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9)))));
+  transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
+}
+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))));
+}
+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))));
+}</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        primary?: boolean | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        blur: FocusEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MiniButtonProps = typeof __propDef.props;
+export type MiniButtonEvents = typeof __propDef.events;
+export type MiniButtonSlots = typeof __propDef.slots;
+export default class MiniButton extends SvelteComponent<MiniButtonProps, MiniButtonEvents, MiniButtonSlots> {
+}
+export {};