contain-css-svelte 0.0.13 → 0.0.15

package/dist/layout/Accordion.svelte

@@ -0,0 +1,199 @@
+<script>import { onMount } from "svelte";
+export let highlanderMode = true;
+let wrapper;
+function onAccordionClicked(e) {
+    if (!highlanderMode) {
+        console.log('Not in highlander mode, no click handler');
+        return;
+    }
+    const target = e.target;
+    if (target.tagName === "SUMMARY") {
+        // If we clicked summary -- make sure to close the others
+        const details = target.parentElement;
+        let otherDetails = wrapper.querySelectorAll("details");
+        otherDetails.forEach((details) => {
+            if (details !== target.parentElement) {
+                details.open = false;
+            }
+        });
+    }
+}
+</script>
+
+<div
+  class="accordion-wrapper"
+  on:click={onAccordionClicked}
+  bind:this={wrapper}
+>
+  <slot />
+</div>
+
+<style>@charset "UTF-8";
+/* 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 */
+div {
+  background: var(--accordion-bg, var(--container-bg, var(--bg, unset)));
+  color: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--accordion-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
+  text-transform: var(--accordion-text-transform, var(--header-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--accordion-text-decoration, var(--header-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--accordion-font-size, var(--header-font-size, var(--font-size, unset)));
+  font-weight: var(--accordion-font-weight, var(--header-font-weight, var(--font-weight, unset)));
+  line-height: var(--accordion-line-height, var(--header-line-height, var(--line-height, unset)));
+  letter-spacing: var(--accordion-letter-spacing, var(--header-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--accordion-margin, var(--header-margin, var(--margin, unset)));
+  margin-top: var(--accordion-margin-top, var(--header-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--accordion-margin, var(--header-margin, var(--margin, unset)));
+  margin-bottom: var(--accordion-margin-bottom, var(--header-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--accordion-indent, var(--header-indent, var(--indent, unset)));
+  font-variant: var(--accordion-font-variant, var(--header-font-variant, var(--font-variant, unset)));
+  text-align: var(--accordion-text-align, var(--header-text-align, var(--text-align, unset)));
+  box-sizing: border-box;
+  border: var(--accordion-wrapper-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--accordion-wrapper-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-wrapper-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+  display: flex;
+  flex-direction: column;
+  gap: var(--accordion-gap, var(--gap));
+}
+
+div :global(details > summary) {
+  background: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  box-sizing: border-box;
+  border: var(--accordion-summary-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--accordion-summary-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-summary-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+  cursor: var(--accordion-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--accordion-transition, var(--transition, 300ms));
+  cursor: pointer;
+  font-family: var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit));
+  text-transform: var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit));
+  text-decoration: var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit));
+  font-size: var(--accordion-summary-font-size, var(--accordion-summary-font-size, inherit));
+  font-weight: var(--accordion-summary-font-weight, var(--accordion-summary-font-weight, inherit));
+  line-height: var(--accordion-summary-line-height, var(--accordion-summary-line-height, inherit));
+  letter-spacing: var(--accordion-summary-letter-spacing, var(--accordion-summary-letter-spacing, inherit));
+  text-indent: var(--accordion-summary-indent, var(--accordion-summary-indent, inherit));
+  font-variant: var(--accordion-summary-font-variant, var(--accordion-summary-font-variant, inherit));
+  text-align: var(--accordion-summary-text-align, var(--accordion-summary-text-align, inherit));
+}
+div :global(details > summary):hover {
+  filter: var(--accordion-hover-filter, var(--hover-filter, brightness(1.4)));
+  transform: var(--accordion-hover-transform, var(--hover-transform, none));
+}
+div :global(details > summary):active {
+  filter: var(--accordion-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--accordion-active-transform, var(--active-transform, none));
+}
+div :global(details > summary):disabled {
+  cursor: var(--accordion-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--accordion-disabled-transform, var(--disabled-transform, none));
+  filter: var(--accordion-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
+
+div :global(details[open] > summary) {
+  background: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-open-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-open-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit)));
+  font-family: var(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit)));
+  text-transform: var(--accordion-summary-open-text-transform, var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit)));
+  text-decoration: var(--accordion-summary-open-text-decoration, var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit)));
+  font-size: var(--accordion-summary-open-font-size, var(--accordion-summary-font-size, var(--accordion-summary-font-size, inherit)));
+  font-weight: var(--accordion-summary-open-font-weight, var(--accordion-summary-font-weight, var(--accordion-summary-font-weight, inherit)));
+  line-height: var(--accordion-summary-open-line-height, var(--accordion-summary-line-height, var(--accordion-summary-line-height, inherit)));
+  letter-spacing: var(--accordion-summary-open-letter-spacing, var(--accordion-summary-letter-spacing, var(--accordion-summary-letter-spacing, inherit)));
+  text-indent: var(--accordion-summary-open-indent, var(--accordion-summary-indent, var(--accordion-summary-indent, inherit)));
+  font-variant: var(--accordion-summary-open-font-variant, var(--accordion-summary-font-variant, var(--accordion-summary-font-variant, inherit)));
+  text-align: var(--accordion-summary-open-text-align, var(--accordion-summary-text-align, var(--accordion-summary-text-align, inherit)));
+}
+
+div :global(details) {
+  interpolate-size: allow-keywords;
+}
+
+div :global(details::details-content) {
+  opacity: 0;
+  block-size: 0;
+  box-sizing: border-box;
+  overflow-y: clip;
+  transition: var(--details-transition, content-visibility 300ms allow-discrete, opacity 300ms, block-size 300ms);
+}
+
+div :global(details[open]::details-content) {
+  opacity: 1;
+  block-size: auto;
+}
+
+div :global(details::placeholder) {
+  display: none;
+}
+
+div :global(summary) {
+  list-style: var(--details-list-style, none);
+  background: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  box-sizing: border-box;
+  border: var(--accordion-summary-border, var(--container-border, var(--border, inherit)));
+  border-top: var(--accordion-summary-border-top, var(--container-border-top, var(--border-top, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-right: var(--accordion-summary-border-right, var(--container-border-right, var(--border-right, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-bottom: var(--accordion-summary-border-bottom, var(--container-border-bottom, var(--border-bottom, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-left: var(--accordion-summary-border-left, var(--container-border-left, var(--border-left, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  padding: var(--accordion-summary-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-summary-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+}
+
+div :global(summary::after) {
+  content: var(--accordion-icon, "▼");
+  float: right;
+  transition: transform 0.3s;
+}
+
+div :global(details[open] > summary::after) {
+  transform: var(--accordion-icon-transform, rotateX(180deg));
+  content: var(--accordion-open-icon, var(--accordion-icon, "▼"));
+}</style>

package/dist/layout/Accordion.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        highlanderMode?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/layout/Bar.svelte

@@ -24,13 +24,13 @@ let style = injectVars($$props, "bar", [
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .bar {
   display: flex;
   align-items: var(--bar-align, center);

package/dist/layout/Column.svelte

@@ -12,13 +12,13 @@ export let customWidth = null;
   <slot />
 </section>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .small {
   --w: 120px;
 }
@@ -39,5 +39,5 @@ section {
   container-type: inline-size;
   overflow: auto;
   justify-content: start;
-  align-items: center;
+  align-items: var(--column-align, center);
 }</style>

package/dist/layout/Columns.svelte

@@ -5,13 +5,13 @@
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .columns {
   display: flex;
   flex-direction: row;

package/dist/layout/Container.svelte

@@ -24,13 +24,13 @@ const style = injectVars($$props, "container", [
   <slot />
 </section>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 section {
   margin: auto;
   box-sizing: border-box;
@@ -101,6 +101,25 @@ section :global(h6) {
   margin-right: auto;
   margin-bottom: var(--container-heading-margin-bottom, var(--block-heading-margin-bottom, var(--heading-margin-bottom, 0)));
   margin-top: var(--container-heading-margin-top, var(--block-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--container-heading-font-family, var(--block-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
+  text-transform: var(--container-heading-text-transform, var(--block-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
+  text-decoration: var(--container-heading-text-decoration, var(--block-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
+  font-size: var(--container-heading-font-size, var(--block-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
+  font-weight: var(--container-heading-font-weight, var(--block-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
+  line-height: var(--container-heading-line-height, var(--block-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
+  letter-spacing: var(--container-heading-letter-spacing, var(--block-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
+  text-indent: var(--container-heading-indent, var(--block-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
+  font-variant: var(--container-heading-font-variant, var(--block-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
+  text-align: var(--container-heading-text-align, var(--block-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))); */
 }
 section :global(p) {
   font-family: var(--container-paragraph-font-family, var(--block-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -131,34 +150,35 @@ section :global(h6 + p) {
   text-indent: var(--container-first-paragraph-indent, var(--block-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--container-first-paragraph-font-variant, var(--block-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--container-first-paragraph-text-align, var(--block-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
+  margin-block-start: var(--container-first-paragraph-margin-top, var(--block-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 section :global(p:first-of-type::first-line) {
-  font-family: var(--container-first-line-font-family, var(--block-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
-  text-transform: var(--container-first-line-text-transform, var(--block-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
-  text-decoration: var(--container-first-line-text-decoration, var(--block-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
-  font-size: var(--container-first-line-font-size, var(--block-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
-  font-weight: var(--container-first-line-font-weight, var(--block-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
-  line-height: var(--container-first-line-line-height, var(--block-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
-  letter-spacing: var(--container-first-line-letter-spacing, var(--block-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
-  text-indent: var(--container-first-line-indent, var(--block-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
-  font-variant: var(--container-first-line-font-variant, var(--block-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
-  text-align: var(--container-first-line-text-align, var(--block-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
+  font-family: var(--first-line-font-family, var(--container-first-line-font-family, var(--block-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
+  text-transform: var(--first-line-text-transform, var(--container-first-line-text-transform, var(--block-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
+  text-decoration: var(--first-line-text-decoration, var(--container-first-line-text-decoration, var(--block-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
+  font-size: var(--first-line-font-size, var(--container-first-line-font-size, var(--block-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
+  font-weight: var(--first-line-font-weight, var(--container-first-line-font-weight, var(--block-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
+  line-height: var(--first-line-line-height, var(--container-first-line-line-height, var(--block-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
+  letter-spacing: var(--first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--block-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
+  text-indent: var(--first-line-indent, var(--container-first-line-indent, var(--block-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
+  font-variant: var(--first-line-font-variant, var(--container-first-line-font-variant, var(--block-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
+  text-align: var(--first-line-text-align, var(--container-first-line-text-align, var(--block-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
 }
 section :global(p:first-of-type::first-letter) {
-  font-family: var(--container-first-letter-font-family, var(--block-first-letter-font-family, var(--block-first-letter-font-family, inherit)));
-  text-transform: var(--container-first-letter-text-transform, var(--block-first-letter-text-transform, var(--block-first-letter-text-transform, inherit)));
-  text-decoration: var(--container-first-letter-text-decoration, var(--block-first-letter-text-decoration, var(--block-first-letter-text-decoration, inherit)));
-  font-size: var(--container-first-letter-font-size, var(--block-first-letter-font-size, var(--block-first-letter-font-size, inherit)));
-  font-weight: var(--container-first-letter-font-weight, var(--block-first-letter-font-weight, var(--block-first-letter-font-weight, inherit)));
-  line-height: var(--container-first-letter-line-height, var(--block-first-letter-line-height, var(--block-first-letter-line-height, inherit)));
-  letter-spacing: var(--container-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, inherit)));
-  text-indent: var(--container-first-letter-indent, var(--block-first-letter-indent, var(--block-first-letter-indent, inherit)));
-  font-variant: var(--container-first-letter-font-variant, var(--block-first-letter-font-variant, var(--block-first-letter-font-variant, inherit)));
-  text-align: var(--container-first-letter-text-align, var(--block-first-letter-text-align, var(--block-first-letter-text-align, inherit)));
-  background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
-  color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
-  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
-  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
+  font-family: var(--first-letter-font-family, var(--container-first-letter-font-family, var(--block-first-letter-font-family, var(--block-first-letter-font-family, inherit))));
+  text-transform: var(--first-letter-text-transform, var(--container-first-letter-text-transform, var(--block-first-letter-text-transform, var(--block-first-letter-text-transform, inherit))));
+  text-decoration: var(--first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--block-first-letter-text-decoration, var(--block-first-letter-text-decoration, inherit))));
+  font-size: var(--first-letter-font-size, var(--container-first-letter-font-size, var(--block-first-letter-font-size, var(--block-first-letter-font-size, inherit))));
+  font-weight: var(--first-letter-font-weight, var(--container-first-letter-font-weight, var(--block-first-letter-font-weight, var(--block-first-letter-font-weight, inherit))));
+  line-height: var(--first-letter-line-height, var(--container-first-letter-line-height, var(--block-first-letter-line-height, var(--block-first-letter-line-height, inherit))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, var(--block-first-letter-letter-spacing, inherit))));
+  text-indent: var(--first-letter-indent, var(--container-first-letter-indent, var(--block-first-letter-indent, var(--block-first-letter-indent, inherit))));
+  font-variant: var(--first-letter-font-variant, var(--container-first-letter-font-variant, var(--block-first-letter-font-variant, var(--block-first-letter-font-variant, inherit))));
+  text-align: var(--first-letter-text-align, var(--container-first-letter-text-align, var(--block-first-letter-text-align, var(--block-first-letter-text-align, inherit))));
+  --link-bg: var(--container-link-bg, var(--block-link-bg, var(--block-link-bg, inherit)));
+  --link-fg: var(--container-link-fg, var(--block-link-fg, var(--block-link-fg, inherit)));
+  background: var(--container-first-letter-bg, var(--block-first-letter-bg, var(--first-letter-bg, inherit)));
+  color: var(--container-first-letter-fg, var(--block-first-letter-fg, var(--first-letter-fg, inherit)));
 }
 section::-webkit-scrollbar {
   width: var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md)));

package/dist/layout/FormItem.svelte

@@ -22,13 +22,13 @@
   <slot name="after" />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .form-item {
   display: flex;
   align-items: var(--form-label-align, baseline);

package/dist/layout/GridLayout.svelte

@@ -7,13 +7,13 @@ export let id = "";
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .grid-layout {
   display: flex;
   flex-wrap: wrap;

package/dist/layout/Hero.svelte

@@ -17,13 +17,13 @@ let cssVars = injectVars($$props, "hero", [
   <slot />
 </div>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .hero {
   --hero-font-size: calc(var(--font-size) * 2);
   background: var(--hero-bg, var(--container-bg, var(--bg, unset)));
@@ -82,6 +82,25 @@ let cssVars = injectVars($$props, "hero", [
   margin-right: auto;
   margin-bottom: var(--hero-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
   margin-top: var(--hero-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--hero-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
+  text-transform: var(--hero-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
+  text-decoration: var(--hero-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
+  font-size: var(--hero-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
+  font-weight: var(--hero-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
+  line-height: var(--hero-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
+  letter-spacing: var(--hero-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
+  text-indent: var(--hero-heading-indent, var(--container-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
+  font-variant: var(--hero-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
+  text-align: var(--hero-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))); */
 }
 .hero :global(p) {
   font-family: var(--hero-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -112,34 +131,35 @@ let cssVars = injectVars($$props, "hero", [
   text-indent: var(--hero-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
   font-variant: var(--hero-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
   text-align: var(--hero-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(--hero-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
 .hero :global(p:first-of-type::first-line) {
-  font-family: var(--hero-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
-  text-transform: var(--hero-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
-  text-decoration: var(--hero-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
-  font-size: var(--hero-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
-  font-weight: var(--hero-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
-  line-height: var(--hero-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
-  letter-spacing: var(--hero-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
-  text-indent: var(--hero-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
-  font-variant: var(--hero-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
-  text-align: var(--hero-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
+  font-family: var(--first-line-font-family, var(--hero-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(--hero-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
+  text-decoration: var(--first-line-text-decoration, var(--hero-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
+  font-size: var(--first-line-font-size, var(--hero-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
+  font-weight: var(--first-line-font-weight, var(--hero-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
+  line-height: var(--first-line-line-height, var(--hero-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
+  letter-spacing: var(--first-line-letter-spacing, var(--hero-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
+  text-indent: var(--first-line-indent, var(--hero-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
+  font-variant: var(--first-line-font-variant, var(--hero-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(--hero-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
 }
 .hero :global(p:first-of-type::first-letter) {
-  font-family: var(--hero-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
-  text-transform: var(--hero-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
-  text-decoration: var(--hero-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
-  font-size: var(--hero-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
-  font-weight: var(--hero-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
-  line-height: var(--hero-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
-  letter-spacing: var(--hero-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
-  text-indent: var(--hero-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
-  font-variant: var(--hero-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
-  text-align: var(--hero-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
-  background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
-  color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
-  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
-  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
+  font-family: var(--first-letter-font-family, var(--hero-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(--hero-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
+  text-decoration: var(--first-letter-text-decoration, var(--hero-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit))));
+  font-size: var(--first-letter-font-size, var(--hero-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit))));
+  font-weight: var(--first-letter-font-weight, var(--hero-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit))));
+  line-height: var(--first-letter-line-height, var(--hero-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit))));
+  letter-spacing: var(--first-letter-letter-spacing, var(--hero-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit))));
+  text-indent: var(--first-letter-indent, var(--hero-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit))));
+  font-variant: var(--first-letter-font-variant, var(--hero-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit))));
+  text-align: var(--first-letter-text-align, var(--hero-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit))));
+  --link-bg: var(--hero-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--hero-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  background: var(--hero-first-letter-bg, var(--container-first-letter-bg, var(--first-letter-bg, inherit)));
+  color: var(--hero-first-letter-fg, var(--container-first-letter-fg, var(--first-letter-fg, inherit)));
 }
 
 @keyframes fade-in {

package/dist/layout/MenuList.svelte

@@ -29,13 +29,13 @@ let style = injectVars($$props, "menu", [
   <slot />
 </ul>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .menu {
   list-style: none;
   /* @include padding-props(menu, container); */
@@ -64,6 +64,12 @@ let style = injectVars($$props, "menu", [
   filter: var(--menu-item-active-filter, var(--active-filter, brightness(0.9)));
   transform: var(--menu-item-active-transform, var(--active-transform, none));
 }
+.menu :global(li:has(> a)):disabled,
+.menu :global(li:has(> button)):disabled {
+  cursor: var(--menu-item-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--menu-item-disabled-transform, var(--disabled-transform, none));
+  filter: var(--menu-item-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
 
 .menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
   display: flex;

package/dist/layout/Page.svelte

@@ -90,13 +90,13 @@ onMount(() => {
   </footer>
 </section>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 header,
 .content,
 .aside,

package/dist/layout/Row.svelte

@@ -12,13 +12,13 @@ export let customHeight = null;
   <slot />
 </section>
 
-<style>/* Convenience groupings */
-/* Warning: because we define a fallback
+<style>/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
+/* Convenience groupings */
 .small {
   --h: 120px;
 }

package/dist/layout/Sidebar.svelte

@@ -38,13 +38,13 @@ let expandedBar = true;
 </aside>
 
 <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.
   */
+/* Convenience groupings */
 aside {
   background: var(--sidebar-bg, var(--container-bg, var(--bg, unset)));
   color: var(--sidebar-fg, var(--container-fg, var(--fg, unset)));
@@ -240,6 +240,11 @@ aside .content::-webkit-scrollbar-thumb:hover {
     filter: var(--mini-button-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
     transform: var(--mini-button-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
   }
+  aside > button:disabled {
+    cursor: var(--mini-button-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
+    transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
+    filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+  }
   aside > button.close {
     left: calc(var(--sidebar-width) - var(--icon-size, 32px) + var(--padding));
     border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));