contain-css-svelte 0.0.1

package/dist/dropdowns/DropdownMenu.svelte

@@ -0,0 +1,234 @@
+<script context="module">let addedGlobalDiv;
+</script>
+
+<script>import { cssProperties } from "../cssprops";
+import MenuList from "../layout/MenuList.svelte";
+import { injectVars } from "../util";
+import { portal } from "svelte-portal";
+import { onMount } from "svelte";
+onMount(() => {
+  console.log("Mounted");
+  if (!addedGlobalDiv) {
+    let div = document.createElement("div");
+    div.id = "dropdowns";
+    document.body.appendChild(div);
+    addedGlobalDiv = true;
+  }
+});
+let buttonElement;
+let dropdownContentElement;
+let style = injectVars($$props, "menu", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+let dropdownTop;
+let dropdownLeft;
+let dropdownMaxHeight;
+function triggerMenu() {
+  open = !open;
+  if (open) {
+    injectVariablesIntoDropdown();
+    let dropdownRect = dropdownContentElement.getBoundingClientRect();
+    let buttonRect = buttonElement.getBoundingClientRect();
+    dropdownTop = buttonRect.bottom;
+    dropdownLeft = buttonRect.left;
+    if (dropdownLeft + dropdownRect.width > window.innerWidth) {
+      dropdownLeft = window.innerWidth - dropdownRect.width;
+    }
+    if (dropdownTop + dropdownRect.height > window.innerHeight) {
+      dropdownTop = Math.max(0, window.innerHeight - dropdownRect.height);
+    }
+    if (dropdownTop + dropdownRect.height > window.innerHeight) {
+      dropdownMaxHeight = window.innerHeight - dropdownTop;
+    }
+    setTimeout(() => window.addEventListener("click", closeMenu), 0);
+  }
+}
+function closeMenu() {
+  open = false;
+  window.removeEventListener("click", closeMenu);
+}
+let searchString = "";
+let lastPress;
+function handleKeystroke(event) {
+  if (event.key == "Backspace" && searchString) {
+    searchString = searchString.slice(0, -1);
+  } else if (event.key.length == 1) {
+    if (searchString || event.key != " ") {
+      searchString += event.key;
+      maybeFocusMatch(searchString);
+    }
+  } else {
+    searchString = "";
+    if (event.key === "Escape") {
+      closeMenu();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      navigateMenu(event.key);
+      searchString = "";
+    }
+  }
+  console.log("Got ", event.key, "in menu");
+}
+function maybeFocusMatch(searchString2) {
+  console.log("Maybe focus", searchString2);
+  let focusableItems = dropdownContentElement.querySelectorAll(
+    "a,button,[tabindex]"
+  );
+  for (let element of focusableItems) {
+    if (element.textContent && element.textContent.toLowerCase().startsWith(searchString2.toLowerCase())) {
+      console.log("Found", element);
+      if (element.focus) {
+        element.focus();
+        return;
+      }
+    }
+  }
+}
+function navigateMenu(direction) {
+  const focusableItems = Array.from(
+    dropdownContentElement.querySelectorAll(
+      "button, a, [tabindex]:not([tabindex='-1'])"
+    )
+  );
+  let currentIndex = focusableItems.findIndex(
+    (item) => item === document.activeElement
+  );
+  if (direction === "ArrowDown") {
+    currentIndex = (currentIndex + 1) % focusableItems.length;
+  } else if (direction === "ArrowUp") {
+    currentIndex = (currentIndex - 1 + focusableItems.length) % focusableItems.length;
+  }
+  focusableItems[currentIndex]?.focus();
+}
+let open = false;
+let cssVariableContext = "";
+function injectVariablesIntoDropdown() {
+  cssVariableContext = "";
+  let buttonStyle = getComputedStyle(buttonElement);
+  for (let prop of cssProperties) {
+    if (buttonStyle.getPropertyValue(prop).trim()) {
+      cssVariableContext += `${prop}: ${buttonStyle.getPropertyValue(prop).trim()};`;
+    }
+  }
+}
+</script>
+
+<nav class="dropdown-menu" on:keydown={handleKeystroke} class:open>
+  <button bind:this={buttonElement} on:click={triggerMenu}>
+    <slot name="label">Menu</slot>
+  </button>
+  <div
+    use:portal={"#dropdowns"}
+    on:keydown={handleKeystroke}
+    class="dropdown-container"
+    class:open
+    hidden
+    style:top="{dropdownTop}px"
+    style:left="{dropdownLeft}px"
+    style:max-height="{dropdownMaxHeight}px"
+  >
+    <div
+      class="dropdown-content"
+      bind:this={dropdownContentElement}
+      style={cssVariableContext}
+    >
+      <MenuList>
+        <slot />
+      </MenuList>
+    </div>
+  </div>
+</nav>
+
+<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 {
+  background: var(--menu-bg, var(--button-bg, var(--container-bg, var(--bg, white))));
+  color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, black))));
+  box-sizing: border-box;
+  border: var(--menu-border, var(--button-border, var(--container-border, var(--border, none))));
+  border-top: var(--menu-border-top, var(--button-border-top, var(--container-border-top, var(--border-top, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
+  border-right: var(--menu-border-right, var(--button-border-right, var(--container-border-right, var(--border-right, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
+  border-bottom: var(--menu-border-bottom, var(--button-border-bottom, var(--container-border-bottom, var(--border-bottom, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
+  border-left: var(--menu-border-left, var(--button-border-left, var(--container-border-left, var(--border-left, var(--menu-border, var(--button-border, var(--container-border, var(--border, none))))))));
+  padding: var(--menu-padding, var(--button-padding, var(--container-padding, var(--padding, 4px))));
+  border-radius: var(--menu-square-radius, var(--button-square-radius, var(--container-square-radius, var(--square-radius, 0))));
+  cursor: pointer;
+  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+}
+button:hover {
+  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.1)))));
+  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+}
+button:active {
+  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
+  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
+}
+.menu {
+  background: var(--menu-bg, var(--container-bg, var(--bg, white)));
+  color: var(--menu-fg, var(--container-fg, var(--fg, black)));
+  box-sizing: border-box;
+  padding: var(--menu-padding, var(--padding, 4px));
+  border: var(--menu-border, var(--border, none));
+  border-top: var(--menu-border-top, var(--border-top, var(--menu-border, var(--border, none))));
+  border-right: var(--menu-border-right, var(--border-right, var(--menu-border, var(--border, none))));
+  border-bottom: var(--menu-border-bottom, var(--border-bottom, var(--menu-border, var(--border, none))));
+  border-left: var(--menu-border-left, var(--border-left, var(--menu-border, var(--border, none))));
+  border-radius: var(--menu-border-radius, var(--border-radius, none));
+  font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, none)));
+  text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, none)));
+  font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, 16px)));
+  font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, 400)));
+  line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, 0.05em)));
+  cursor: pointer;
+  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+}
+.menu:hover {
+  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.1)))));
+  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+}
+.menu:active {
+  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
+  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
+}
+.dropdown-container {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+  transition: var(--dropdown-transition, 150ms) opacity;
+  overflow-y: auto;
+  scrollbar-width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, thin)));
+  scrollbar-color: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+}
+.dropdown-container::-webkit-scrollbar {
+  width: var(--dropdown-menu-scrollbar-width, var(--menu-scrollbar-width, var(--scrollbar-width, var(--space-md))));
+  height: var(--dropdown-menu-scrollbar-height, var(--menu-scrollbar-height, var(--scrollbar-height, var(--gap))));
+}
+.dropdown-container::-webkit-scrollbar-track {
+  background: var(--dropdown-menu-scrollbar-track-bg, var(--menu-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+}
+.dropdown-container::-webkit-scrollbar-thumb {
+  background: var(--dropdown-menu-scrollbar-thumb-bg, var(--menu-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
+  border-radius: var(--dropdown-menu-scrollbar-thumb-radius, var(--menu-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+}
+.dropdown-container::-webkit-scrollbar-thumb:hover {
+  background: var(--dropdown-menu-scrollbar-thumb-hover-bg, var(--menu-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
+}
+.dropdown-container.open {
+  opacity: 1;
+  pointer-events: all;
+}
+.dropdown-content {
+  width: var(--dropdown-menu-width, 12em);
+  box-shadow: var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-blur, var(--dropdown-shadow-blur, var(--shadow-blur, var(--space)))) var(--dropdown-menu-shadow-color, var(--dropdown-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
+}</style>

package/dist/dropdowns/DropdownMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        default: {};
+    };
+};
+export type DropdownMenuProps = typeof __propDef.props;
+export type DropdownMenuEvents = typeof __propDef.events;
+export type DropdownMenuSlots = typeof __propDef.slots;
+export default class DropdownMenu extends SvelteComponent<DropdownMenuProps, DropdownMenuEvents, DropdownMenuSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import Card from "./Card.svelte";
+import Button from "./controls/Button.svelte";
+import Checkbox from "./controls/Checkbox.svelte";
+import Input from "./controls/Input.svelte";
+import Slider from "./controls/Slider.svelte";
+import Bar from "./layout/Bar.svelte";
+import Column from "./layout/Column.svelte";
+import Columns from "./layout/Columns.svelte";
+import Container from "./layout/Container.svelte";
+import FormItem from "./layout/FormItem.svelte";
+import GridLayout from "./layout/GridLayout.svelte";
+import MenuList from "./layout/MenuList.svelte";
+import Page from "./layout/Page.svelte";
+import ResponsiveText from "./layout/ResponsiveText.svelte";
+import Row from "./layout/Row.svelte";
+import Tile from "./layout/Tile.svelte";
+import Code from "./misc/Code.svelte";
+import TextLayout from "./typography/TextLayout.svelte";
+export { Button, Checkbox, Input, Slider };
+export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText };
+export { TextLayout, Code };
+export { Card, Tile, FormItem };
+export { Row, Column, Columns };

package/dist/index.js

@@ -0,0 +1,24 @@
+// Reexport your entry components here
+import Card from "./Card.svelte";
+import Button from "./controls/Button.svelte";
+import Checkbox from "./controls/Checkbox.svelte";
+import Input from "./controls/Input.svelte";
+import Slider from "./controls/Slider.svelte";
+import Bar from "./layout/Bar.svelte";
+import Column from "./layout/Column.svelte";
+import Columns from "./layout/Columns.svelte";
+import Container from "./layout/Container.svelte";
+import FormItem from "./layout/FormItem.svelte";
+import GridLayout from "./layout/GridLayout.svelte";
+import MenuList from "./layout/MenuList.svelte";
+import Page from "./layout/Page.svelte";
+import ResponsiveText from "./layout/ResponsiveText.svelte";
+import Row from "./layout/Row.svelte";
+import Tile from "./layout/Tile.svelte";
+import Code from "./misc/Code.svelte";
+import TextLayout from "./typography/TextLayout.svelte";
+export { Button, Checkbox, Input, Slider };
+export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText };
+export { TextLayout, Code };
+export { Card, Tile, FormItem };
+export { Row, Column, Columns };

package/dist/layout/Bar.svelte

@@ -0,0 +1,57 @@
+<script>import { injectVars } from "../util";
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+export let marginBottom = null;
+export let marginTop = null;
+export let justify = null;
+export let align = null;
+let style = injectVars($$props, "bar", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height",
+  "justify",
+  "align",
+  "marginBottom"
+]);
+</script>
+
+<div class="bar" {style}>
+  <slot />
+</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.
+  */
+.bar {
+  display: flex;
+  align-items: var(--bar-align, center);
+  justify-content: var(--bar-justify, space-between);
+  padding: var(--bar-padding, var(--padding, 8px));
+  border-bottom: var(--bar-border-bottom, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
+  border-top: var(--bar-border-top, var(--bar-border-width, var(--border-width, 1px)) var(--bar-border-style, var(--border-style, 1px)) var(--bar-border-color, var(--border-color, 1px)));
+  margin-bottom: var(--bar-margin-bottom, 1em);
+  min-height: var(--bar-min-height);
+  height: var(--bar-height, 3em);
+  max-height: var(--bar-max-height);
+  background: var(--bar-bg, var(--container-bg, var(--bg, white)));
+  color: var(--bar-fg, var(--container-fg, var(--fg, black)));
+  gap: var(--bar-gap, var(--gap, 8px));
+  /* Add other styles like background, border, etc., as needed */
+}
+.bar :global(h1),
+.bar :global(h2),
+.bar :global(h3),
+.bar :global(h4),
+.bar :global(h5),
+.bar :global(h6) {
+  margin: 0;
+}</style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+        marginBottom?: string | null | undefined;
+        marginTop?: string | null | undefined;
+        justify?: "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | null | undefined;
+        align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BarProps = typeof __propDef.props;
+export type BarEvents = typeof __propDef.events;
+export type BarSlots = typeof __propDef.slots;
+export default class Bar extends SvelteComponent<BarProps, BarEvents, BarSlots> {
+}
+export {};

package/dist/layout/Column.svelte

@@ -0,0 +1,40 @@
+<script>export let size = "medium";
+export let customWidth = null;
+</script>
+
+<section
+  class="column"
+  class:small={size == "small"}
+  class:medium={size == "medium"}
+  class:large={size == "large"}
+  style:--custom-width={customWidth}
+>
+  <slot />
+</section>
+
+<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.
+  */
+.small {
+  --w: 120px;
+}
+.medium {
+  --w: 240px;
+}
+.large {
+  --w: 320px;
+}
+section {
+  display: flex;
+  flex-direction: column;
+  width: var(--custom-width, var(--w, 200px));
+  gap: var(--column-gap, var(--container-gap, var(--gap, 8px)));
+  container-type: inline-size;
+  overflow: auto;
+  justify-content: start;
+  align-items: center;
+}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: "small" | "medium" | "large" | undefined;
+        customWidth?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ColumnProps = typeof __propDef.props;
+export type ColumnEvents = typeof __propDef.events;
+export type ColumnSlots = typeof __propDef.slots;
+export default class Column extends SvelteComponent<ColumnProps, ColumnEvents, ColumnSlots> {
+}
+export {};

package/dist/layout/Columns.svelte

@@ -0,0 +1,21 @@
+<script>
+</script>
+
+<div class="columns">
+  <slot />
+</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.
+  */
+.columns {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--columns-gap, var(--container-gap, var(--gap, 8px)));
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ColumnsProps */
+/** @typedef {typeof __propDef.events}  ColumnsEvents */
+/** @typedef {typeof __propDef.slots}  ColumnsSlots */
+export default class Columns extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ColumnsProps = typeof __propDef.props;
+export type ColumnsEvents = typeof __propDef.events;
+export type ColumnsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/layout/Container.svelte

@@ -0,0 +1,105 @@
+<script>import { injectVars } from "../util";
+export let bg = null;
+export let fg = null;
+export let margin = null;
+export let maxWidth = null;
+export let padding = null;
+export let height = null;
+export let border = false;
+export let paddingTop = null;
+export let borderTop = null;
+const style = injectVars($$props, "container", [
+  "bg",
+  "fg",
+  "margin",
+  "maxWidth",
+  "padding",
+  "height",
+  "paddingTop",
+  "borderTop"
+]);
+</script>
+
+<section class:border {style}>
+  <slot />
+</section>
+
+<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.
+  */
+section {
+  margin: auto;
+  max-width: var(--container-max-width, var(--block-max-width, var(--max-width, 900px)));
+  box-sizing: border-box;
+  padding: var(--container-padding, var(--padding, 8px));
+  background: var(--container-bg, var(--block-bg, var(--bg, white)));
+  color: var(--container-fg, var(--block-fg, var(--fg, black)));
+  box-sizing: border-box;
+  padding: var(--container-padding, var(--block-padding, var(--padding, 4px)));
+  border: var(--container-border, var(--block-border, var(--border, none)));
+  border-top: var(--container-border-top, var(--block-border-top, var(--border-top, var(--container-border, var(--block-border, var(--border, none))))));
+  border-right: var(--container-border-right, var(--block-border-right, var(--border-right, var(--container-border, var(--block-border, var(--border, none))))));
+  border-bottom: var(--container-border-bottom, var(--block-border-bottom, var(--border-bottom, var(--container-border, var(--block-border, var(--border, none))))));
+  border-left: var(--container-border-left, var(--block-border-left, var(--border-left, var(--container-border, var(--block-border, var(--border, none))))));
+  border-radius: var(--container-border-radius, var(--block-border-radius, var(--border-radius, none)));
+  font-family: var(--container-font-family, var(--block-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--container-text-transform, var(--block-text-transform, var(--text-transform, none)));
+  text-decoration: var(--container-text-decoration, var(--block-text-decoration, var(--text-decoration, none)));
+  font-size: var(--container-font-size, var(--block-font-size, var(--font-size, 16px)));
+  font-weight: var(--container-font-weight, var(--block-font-weight, var(--font-weight, 400)));
+  line-height: var(--container-line-height, var(--block-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--container-letter-spacing, var(--block-letter-spacing, var(--letter-spacing, 0.05em)));
+  margin-top: var(--container-margin, var(--block-margin, var(--margin, var(--gap))));
+  margin-bottom: var(--container-margin, var(--block-margin, var(--margin, var(--gap))));
+  /* Why is this suddenly causing a scroll? */
+  container-type: inline-size;
+  overflow-x: hidden;
+  height: var(--container-height);
+  overflow-y: auto;
+  overflow-y: auto;
+  scrollbar-width: var(--container-scrollbar-width, var(--scrollbar-width, thin));
+  scrollbar-color: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888)) var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color)));
+}
+section :global(p), section :global(blockquote), section :global(dl), section :global(ul), section :global(ol) {
+  max-width: var(--container-line-width, var(--block-line-width, var(--line-width, 40em)));
+  font-family: var(--container-body-font-family, var(--block-body-font-family, var(--body-font-family, var(--font-family))));
+  line-height: var(--container-line-height, var(--block-line-height, var(--line-height, 1.5)));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--container-body-font-weight, var(--block-body-font-weight, var(--body-font-weight, var(--normal))));
+}
+section :global(h1),
+section :global(h2),
+section :global(h3),
+section :global(h4),
+section :global(h5),
+section :global(h6) {
+  max-width: var(--container-line-width, var(--block-line-width, var(--line-width, 40em)));
+  font-family: var(--container-heading-font-family, var(--block-heading-font-family, var(--heading-font-family, var(--font-family))));
+  line-height: var(--container-heading-line-height, var(--block-heading-line-height, var(--heading-line-height, var(--line-height))));
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--heading-color, container, block, var(--fg));
+  font-weight: var(--heading-font-weight, container, block, var(--bold));
+}
+section::-webkit-scrollbar {
+  width: var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md)));
+  height: var(--container-scrollbar-height, var(--scrollbar-height, var(--gap)));
+}
+section::-webkit-scrollbar-track {
+  background: var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg)));
+}
+section::-webkit-scrollbar-thumb {
+  background: var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg)));
+  border-radius: var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius)));
+}
+section::-webkit-scrollbar-thumb:hover {
+  background: var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg)));
+}
+.border {
+  border: var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color)));
+}</style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        margin?: string | null | undefined;
+        maxWidth?: string | null | undefined;
+        padding?: string | null | undefined;
+        height?: string | null | undefined;
+        border?: boolean | undefined;
+        paddingTop?: string | null | undefined;
+        borderTop?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponent<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};