contain-css-svelte 0.0.16 → 1.0.0

package/dist/Card.svelte

@@ -1,34 +1,31 @@
-<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", [
+<script lang="ts">import { injectVars } from "./util";
+let { header, footer, children, height = "", fixedHeight, center, ...restProps } = $props();
+let cssVars = injectVars({ height, ...restProps }, "card", [
     "bg",
     "fg",
     "padding",
     "width",
     "height",
 ]);
-$: if (height) {
-    fixedHeight = true;
-}
-let hasHeader = $$slots.header;
-let hasFooter = $$slots.footer;
+const forceFixedHeight = (h) => {
+    if (h && !fixedHeight) {
+        fixedHeight = true;
+    }
+};
+$effect(() => forceFixedHeight(height));
+let hasHeader = $derived(Boolean(header));
+let hasFooter = $derived(Boolean(footer));
 </script>
 
 <div class="card" class:center class:fixedHeight style={cssVars}>
   <header class:hide={!hasHeader}>
-    <slot name="header" />
+    {#if header}{@render header()}{/if}
   </header>
   <section>
-    <slot />
+    {#if children}{@render children()}{/if}
   </section>
   <footer class:hide={!hasFooter}>
-    <slot name="footer" />
+    {#if footer}{@render footer()}{/if}
   </footer>
 </div>
 
@@ -42,7 +39,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 +54,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 +70,12 @@ 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)));
@@ -83,16 +83,15 @@ let hasFooter = $$slots.footer;
   margin-right: auto;
   font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
 }
+
 .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(--bg, unset));
-  color: var(--heading-fg, var(--fg, unset));
-  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
-  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
+  color: var(--card-heading-fg, var(--container-heading-fg, var(--heading-fg, unset)));
+  background: var(--card-heading-bg, var(--container-heading-bg, var(--heading-bg, transparent)));
   max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
   margin-left: auto;
   margin-right: auto;
@@ -110,14 +109,15 @@ 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))));
   text-transform: var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
@@ -130,6 +130,7 @@ let hasFooter = $$slots.footer;
   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),
@@ -149,6 +150,7 @@ let hasFooter = $$slots.footer;
   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))));
   margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
+
 .card section :global(p:first-of-type::first-line) {
   font-family: var(--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(--first-line-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)))));
@@ -161,6 +163,7 @@ let hasFooter = $$slots.footer;
   font-variant: var(--first-line-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(--first-line-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(--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(--first-letter-text-transform, var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
@@ -212,24 +215,31 @@ 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))));
 }
+
 .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))));
 }
 
+.card.fixedHeight {
+  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))));
+}
+
 header,
 section {
   padding: var(--padding);

package/dist/Card.svelte.d.ts

@@ -1,29 +1,14 @@
-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: {};
-    };
-    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 {};
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { CardStyleProps } from "./types";
+type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    center?: boolean;
+    height?: string;
+    fixedHeight?: boolean;
+} & CardStyleProps & HTMLAttributes<HTMLElement>;
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/controls/Button.svelte

@@ -1,31 +1,24 @@
-<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 lang="ts">import { injectVars } from "../util";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, icon, children, ...restProps } = $props();
+const style = $derived(injectVars(restProps, "button", ["bg", "fg", "padding", "width", "height"]));
+const iconSlotted = $derived(Boolean(icon));
 </script>
 
 <button
-  style={cssVars}
-  on:click
+  {style}
   class:primary
+  class:secondary
   class:warning
+  class:danger
+  class:success
+  class:info
   class:has-icon={iconSlotted}
-  {...$$restProps}
+  {...restProps}
 >
-  <span class="content"><slot /></span>
-  <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
+  <span class="content">{@render children?.()}</span>
+  <span class:hidden={!iconSlotted} class="icon">
+    {@render icon?.()}
+  </span>
 </button>
 
 <style>/* Warning: because we define a fallback
@@ -36,7 +29,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 +54,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)));
@@ -74,27 +67,34 @@ button {
   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.4))));
+  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
 }
+
 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)));
 }
+
 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))));
 }
+
 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)));
 }
 
+button {
+  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
+}
+
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
@@ -127,4 +127,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,30 +1,16 @@
-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: {};
-    };
-    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 {};
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { BaseStyleProps } from "../types";
+type Props = {
+    primary?: boolean;
+    secondary?: boolean;
+    warning?: boolean;
+    danger?: boolean;
+    success?: boolean;
+    info?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+} & BaseStyleProps & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/controls/ButtonLink.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">import { injectVars } from "../util";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, ...restProps } = $props();
+const { style: inlineStyle, ...elementProps } = restProps;
+const style = $derived(`${injectVars(elementProps, "button", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+])}${inlineStyle ?? ""}`);
+const iconSlotted = $derived(Boolean(icon));
+</script>
+
+<a
+  role="button"
+  {style}
+  {href}
+  id={id ?? undefined}
+  class:primary
+  class:secondary
+  class:warning
+  class:danger
+  class:success
+  class:info
+  class:has-icon={iconSlotted}
+  {...elementProps}
+>
+  <span class="content">{@render children?.()}</span>
+  <span class:hidden={!iconSlotted} class="icon">
+    {@render 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)));
+}
+
+a[role=button]:hover {
+  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
+  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] {
+  text-decoration: none;
+  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
+}
+
+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(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-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(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--danger-link-fg, var(--a-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(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--success-link-fg, var(--a-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(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--info-link-fg, var(--a-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>