contain-css-svelte 0.0.1

package/dist/layout/FormItem.svelte

@@ -0,0 +1,97 @@
+<script>
+  export let fullWidth = false;
+  export let globalInputStyles = true;
+</script>
+
+<div class="form-item" class:fullWidth class:globalInputStyles>
+  <slot name="before" />
+  <label>
+    <span class="label">
+      <slot name="label" />
+    </span>
+    <span class="input">
+      <slot />
+    </span>
+  </label>
+  <slot name="after" />
+</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.
+  */
+.form-item {
+  display: flex;
+  align-items: var(--form-label-align, baseline);
+  justify-content: var(--form-label-justify, flex-start);
+  gap: var(--form-label-horizontal-gap, var(--padding));
+  padding-top: var(--padding, form-item, 8px);
+  padding-bottom: var(--padding, form-item, 8px);
+  font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform, none)));
+  text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration, none)));
+  font-size: var(--form-item-font-size, var(--ui-font-size, var(--font-size, 16px)));
+  font-weight: var(--form-item-font-weight, var(--ui-font-weight, var(--font-weight, 400)));
+  line-height: var(--form-item-line-height, var(--ui-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--form-item-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, 0.05em)));
+  box-sizing: border-box;
+}
+label {
+  display: contents;
+}
+.label {
+  box-sizing: border-box;
+  width: var(--form-label-width, 12em);
+  text-align: var(--form-label-text-align, right);
+}
+.input {
+  box-sizing: border-box;
+  width: var(--form-input-fixed-width, var(--form-input-width));
+}
+:global(.fullWidth) .input {
+  box-sizing: border-box;
+  width: var(--form-input-fixed-width, 100%);
+}
+:global(.fullWidth) .input :global(input) {
+  box-sizing: border-box;
+  width: 100%;
+}
+@container (max-width: 400px) {
+  .form-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--form-label-vertical-gap, var(--space));
+  }
+  .label {
+    text-align: left;
+  }
+  .form-item {
+    width: auto;
+    text-align: left;
+    font-size: var(--font-size-small);
+  }
+  .form-item {
+    width: var(--form-input-fixed-width, var(--form-input-width));
+  }
+}
+/* Global Input Styles */
+.globalInputStyles :global(input) {
+  font-family: var(--form-input-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, sans-serif))));
+  text-transform: var(--form-input-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform, none))));
+  text-decoration: var(--form-input-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, none))));
+  font-size: var(--form-input-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size, 16px))));
+  font-weight: var(--form-input-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight, 400))));
+  line-height: var(--form-input-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height, 1.5))));
+  letter-spacing: var(--form-input-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, 0.05em))));
+  box-sizing: border-box;
+  border: var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))));
+  border-top: var(--form-input-border-top, var(--input-border-top, var(--ui-border-top, var(--border-top, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));
+  border-right: var(--form-input-border-right, var(--input-border-right, var(--ui-border-right, var(--border-right, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));
+  border-bottom: var(--form-input-border-bottom, var(--input-border-bottom, var(--ui-border-bottom, var(--border-bottom, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));
+  border-left: var(--form-input-border-left, var(--input-border-left, var(--ui-border-left, var(--border-left, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));
+  padding: var(--form-input-padding, var(--input-padding, var(--ui-padding, var(--padding, 4px))));
+  border-radius: var(--form-input-square-radius, var(--input-square-radius, var(--ui-square-radius, var(--square-radius, 0))));
+}</style>

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  FormItemProps */
+/** @typedef {typeof __propDef.events}  FormItemEvents */
+/** @typedef {typeof __propDef.slots}  FormItemSlots */
+export default class FormItem extends SvelteComponent<{
+    fullWidth?: boolean | undefined;
+    globalInputStyles?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    before: {};
+    label: {};
+    default: {};
+    after: {};
+}> {
+}
+export type FormItemProps = typeof __propDef.props;
+export type FormItemEvents = typeof __propDef.events;
+export type FormItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        fullWidth?: boolean | undefined;
+        globalInputStyles?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        before: {};
+        label: {};
+        default: {};
+        after: {};
+    };
+};
+export {};

package/dist/layout/GridLayout.svelte

@@ -0,0 +1,22 @@
+<script>import { onMount } from "svelte";
+let grid;
+</script>
+
+<div class="grid-layout">
+  <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.
+  */
+.grid-layout {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  /*@include box-props(grid-layout);*/
+  gap: var(--grid-layout-gap, var(--gap, 8px));
+}</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GridLayoutProps = typeof __propDef.props;
+export type GridLayoutEvents = typeof __propDef.events;
+export type GridLayoutSlots = typeof __propDef.slots;
+export default class GridLayout extends SvelteComponent<GridLayoutProps, GridLayoutEvents, GridLayoutSlots> {
+}
+export {};

package/dist/layout/Hero.svelte

@@ -0,0 +1,86 @@
+<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;
+let cssVars = injectVars($$props, "hero", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+</script>
+
+<div class="hero">
+  <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.
+  */
+.hero {
+  background: var(--hero-bg, var(--container-bg, var(--bg, white)));
+  color: var(--hero-fg, var(--container-fg, var(--fg, black)));
+  font-family: var(--hero-font-family, var(--container-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--hero-text-transform, var(--container-text-transform, var(--text-transform, none)));
+  text-decoration: var(--hero-text-decoration, var(--container-text-decoration, var(--text-decoration, none)));
+  font-size: var(--hero-font-size, var(--container-font-size, var(--font-size, 16px)));
+  font-weight: var(--hero-font-weight, var(--container-font-weight, var(--font-weight, 400)));
+  line-height: var(--hero-line-height, var(--container-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--hero-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, 0.05em)));
+  display: grid;
+  place-content: center;
+  width: var(--hero-width, 100%);
+  height: var(--hero-height, 100vh);
+  font-size: var(--hero-font-size, 2rem);
+  box-sizing: border-box;
+  animation-name: fade-in;
+  animation-duration: var(--hero-animation-duration, 1s);
+  animation-timing-function: var(--hero-animation-timing-function, ease-in-out);
+}
+.hero :global(p), .hero :global(blockquote), .hero :global(dl), .hero :global(ul), .hero :global(ol) {
+  max-width: var(--hero-line-width, var(--container-line-width, var(--line-width, 40em)));
+  font-family: var(--hero-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
+  line-height: var(--hero-line-height, var(--container-line-height, var(--line-height, 1.5)));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--hero-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, var(--normal))));
+}
+.hero :global(h1),
+.hero :global(h2),
+.hero :global(h3),
+.hero :global(h4),
+.hero :global(h5),
+.hero :global(h6) {
+  max-width: var(--hero-line-width, var(--container-line-width, var(--line-width, 40em)));
+  font-family: var(--hero-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--font-family))));
+  line-height: var(--hero-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--line-height))));
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--heading-color, hero, container, var(--fg));
+  font-weight: var(--heading-font-weight, hero, container, var(--bold));
+}
+.hero h1,
+.hero h2,
+.hero h3,
+.hero h4,
+.hero h5,
+.hero h6 {
+  text-align: center;
+}
+@keyframes fade-in {
+  0% {
+    filter: blur(3px);
+    opacity: 0;
+  }
+  100% {
+    filter: blur(0);
+    opacity: 1;
+  }
+}</style>

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

@@ -0,0 +1,23 @@
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
+}
+export {};

package/dist/layout/MenuList.svelte

@@ -0,0 +1,108 @@
+<script>import { injectVars } from "../util";
+export let fg = null;
+export let bg = null;
+export let itemPadding = null;
+export let itemWidth = null;
+export let itemHeight = null;
+export let itemFg = null;
+export let itemBg = null;
+export let itemEvenFg = null;
+export let itemEvenBg = null;
+export let itemActiveFg = null;
+export let itemActiveBg = null;
+let style = injectVars($$props, "menu", [
+  "fg",
+  "bg",
+  "itemPadding",
+  "itemWidth",
+  "itemHeight",
+  "itemFg",
+  "itemBg",
+  "itemEvenFg",
+  "itemEvenBg",
+  "itemActiveFg",
+  "itemActiveBg"
+]);
+</script>
+
+<ul {style} class="menu">
+  <slot />
+</ul>
+
+<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.
+  */
+.menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: var(--menu-bg, var(--container-bg, var(--bg, white)));
+  color: var(--menu-fg, var(--container-fg, var(--fg, black)));
+}
+.menu :global(a), .menu :global(button), .menu :global(input[type="submit"]), .menu :global(.button) {
+  display: flex;
+  justify-content: var(--menu-item-justify, center);
+  align-items: var(--menu-item-align, center);
+  width: var(--menu-item-width, 100%);
+  height: var(--menu-item-height);
+  text-decoration: none;
+  font-family: var(--menu-item-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--font-family, sans-serif)))));
+  text-transform: var(--menu-item-text-transform, var(--button-text-transform, var(--ui-text-transform, var(--control-text-transform, var(--text-transform, none)))));
+  text-decoration: var(--menu-item-text-decoration, var(--button-text-decoration, var(--ui-text-decoration, var(--control-text-decoration, var(--text-decoration, none)))));
+  font-size: var(--menu-item-font-size, var(--button-font-size, var(--ui-font-size, var(--control-font-size, var(--font-size, 16px)))));
+  font-weight: var(--menu-item-font-weight, var(--button-font-weight, var(--ui-font-weight, var(--control-font-weight, var(--font-weight, 400)))));
+  line-height: var(--menu-item-line-height, var(--button-line-height, var(--ui-line-height, var(--control-line-height, var(--line-height, 1.5)))));
+  letter-spacing: var(--menu-item-letter-spacing, var(--button-letter-spacing, var(--ui-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, 0.05em)))));
+  background: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--bg, white))));
+  color: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--fg, black))));
+  box-sizing: border-box;
+  border: var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))));
+  border-top: var(--menu-item-border-top, var(--button-border-top, var(--control-border-top, var(--border-top, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
+  border-right: var(--menu-item-border-right, var(--button-border-right, var(--control-border-right, var(--border-right, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
+  border-bottom: var(--menu-item-border-bottom, var(--button-border-bottom, var(--control-border-bottom, var(--border-bottom, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
+  border-left: var(--menu-item-border-left, var(--button-border-left, var(--control-border-left, var(--border-left, var(--menu-item-border, var(--button-border, var(--control-border, var(--border, none))))))));
+  padding: var(--menu-item-padding, var(--button-padding, var(--control-padding, var(--padding, 4px))));
+  border-radius: var(--menu-item-square-radius, var(--button-square-radius, var(--control-square-radius, var(--square-radius, 0))));
+  cursor: pointer;
+  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+}
+.menu :global(a):hover, .menu :global(button):hover, .menu :global(input[type="submit"]):hover, .menu :global(.button):hover {
+  filter: var(--menu-item-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.1)))));
+  transform: var(--menu-item-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+}
+.menu :global(a):active, .menu :global(button):active, .menu :global(input[type="submit"]):active, .menu :global(.button):active {
+  filter: var(--menu-item-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
+  transform: var(--menu-item-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
+}
+.menu :global(.active) {
+  background: var(--menu-item-active-bg, var(--primary-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--container-bg, var(--bg, white)))))));
+  color: var(--menu-item-active-fg, var(--primary-fg, var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--container-fg, var(--fg, black)))))));
+}
+/* & :global(li:nth-of-type(even)) > {
+    @include global-buttons {
+      @include color-props(
+        menu-item-even,
+        stripe,
+        menu-item,
+        button,
+        control
+      );
+    }
+  }
+
+  & :global(li:nth-of-type(even)) :global(.active),
+  :global(li:nth-of-type(odd)) :global(.active) {
+    @include color-props(
+      menu-item-active,
+      primary,
+      menu-item,
+      button,
+      control,
+      container
+    );
+  }
+} */</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        fg?: string | null | undefined;
+        bg?: string | null | undefined;
+        itemPadding?: string | null | undefined;
+        itemWidth?: string | null | undefined;
+        itemHeight?: string | null | undefined;
+        itemFg?: string | null | undefined;
+        itemBg?: string | null | undefined;
+        itemEvenFg?: string | null | undefined;
+        itemEvenBg?: string | null | undefined;
+        itemActiveFg?: string | null | undefined;
+        itemActiveBg?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuListProps = typeof __propDef.props;
+export type MenuListEvents = typeof __propDef.events;
+export type MenuListSlots = typeof __propDef.slots;
+export default class MenuList extends SvelteComponent<MenuListProps, MenuListEvents, MenuListSlots> {
+}
+export {};

package/dist/layout/Page.svelte

@@ -0,0 +1,189 @@
+<script>import { injectVars } from "../util";
+import { onDestroy, onMount } from "svelte";
+export let right = false;
+export let sticky = false;
+export let hideSidebar = false;
+export let hideHeader = false;
+export let hideFooter = false;
+export let contentPadding = null;
+export let width = null;
+export let height = null;
+export let bg = null;
+export let fg = null;
+let style = injectVars($$props, "page", [
+  "bg",
+  "fg",
+  "contentPadding",
+  "width",
+  "height"
+]);
+let hasSidebar;
+let hasHeader;
+let hasFooter;
+$:
+  hasSidebar = $$slots.sidebar && !hideSidebar;
+$:
+  hasHeader = $$slots.header && !hideHeader;
+$:
+  hasFooter = $$slots.footer && !hideFooter;
+$:
+  console.log(
+    "Update to flags: header,footer,sidebar=",
+    hasHeader,
+    hasFooter,
+    hasSidebar
+  );
+let freeze = false;
+let pageElement;
+function handleScroll() {
+  if (sticky) {
+    const rect = pageElement.getBoundingClientRect();
+    const computedTopStyle = getComputedStyle(pageElement).getPropertyValue("top");
+    const computedTop = parseFloat(computedTopStyle);
+    const isSticking = rect.top <= computedTop;
+    console.log("Freeze = ", !isSticking);
+    freeze = !isSticking;
+  }
+}
+onMount(() => {
+  if (sticky) {
+    console.log("Add scroll handler in a sec");
+    let el = document.querySelector(window.location.hash);
+    console.log("Hash", window.location.hash, "points to ", el);
+    el?.scrollIntoView();
+    window.addEventListener("scroll", handleScroll);
+  }
+  return () => {
+    if (window) {
+      window.removeEventListener("scroll", handleScroll);
+    }
+  };
+});
+</script>
+
+<section
+  class="page"
+  class:freeze
+  class:right
+  class:sticky
+  class:hasHeader
+  class:hasSidebar
+  class:hasFooter
+  bind:this={pageElement}
+  {style}
+>
+  <header>
+    <slot name="header" />
+  </header>
+  <div class="side-by-side">
+    <div class="aside">
+      <slot name="sidebar" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+  <footer>
+    <slot name="footer" />
+  </footer>
+</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.
+  */
+header {
+  display: none;
+}
+.hasHeader > header {
+  display: block;
+}
+footer {
+  display: none;
+}
+.hasFooter > footer {
+  display: block;
+}
+.aside {
+  display: none;
+}
+.hasSidebar > div > .aside {
+  display: flex;
+}
+.page {
+  background: var(--page-bg, var(--bg, white));
+  color: var(--page-fg, var(--fg, black));
+  border: var(--page-border);
+  height: var(--page-height, 100vh);
+  width: var(--page-width, 100%);
+  container-type: size;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.page.sticky {
+  position: sticky;
+  top: 0;
+}
+.header {
+  flex-shrink: 1;
+}
+.content {
+  overflow-y: auto;
+  scrollbar-width: var(--page-content-scrollbar-width, var(--page-scrollbar-width, var(--scrollbar-width, thin)));
+  scrollbar-color: var(--page-content-scrollbar-thumb-bg, var(--page-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--page-content-scrollbar-track-bg, var(--page-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+  box-sizing: border-box;
+  padding: var(--page-content-padding, var(--padding, 4px));
+  border: var(--page-content-border, var(--border, none));
+  border-top: var(--page-content-border-top, var(--border-top, var(--page-content-border, var(--border, none))));
+  border-right: var(--page-content-border-right, var(--border-right, var(--page-content-border, var(--border, none))));
+  border-bottom: var(--page-content-border-bottom, var(--border-bottom, var(--page-content-border, var(--border, none))));
+  border-left: var(--page-content-border-left, var(--border-left, var(--page-content-border, var(--border, none))));
+  border-radius: var(--page-content-border-radius, var(--border-radius, none));
+}
+.content::-webkit-scrollbar {
+  width: var(--page-content-scrollbar-width, var(--page-scrollbar-width, var(--scrollbar-width, var(--space-md))));
+  height: var(--page-content-scrollbar-height, var(--page-scrollbar-height, var(--scrollbar-height, var(--gap))));
+}
+.content::-webkit-scrollbar-track {
+  background: var(--page-content-scrollbar-track-bg, var(--page-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+}
+.content::-webkit-scrollbar-thumb {
+  background: var(--page-content-scrollbar-thumb-bg, var(--page-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
+  border-radius: var(--page-content-scrollbar-thumb-radius, var(--page-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+}
+.content::-webkit-scrollbar-thumb:hover {
+  background: var(--page-content-scrollbar-thumb-hover-bg, var(--page-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
+}
+.aside {
+  flex: 0 0 auto;
+}
+.side-by-side {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: stretch;
+  overflow: hidden;
+  margin: 0;
+  box-sizing: border-box;
+  gap: var(--column-gap);
+  padding: var(--padding);
+}
+.right .side-by-side {
+  flex-direction: row-reverse;
+}
+.page .content {
+  container-type: size;
+  height: 100%;
+  width: 100%;
+  background: var(--bg);
+  color: var(--text);
+}
+.page.sticky.freeze :global(*) {
+  overflow: hidden;
+}</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        right?: boolean | undefined;
+        sticky?: boolean | undefined;
+        hideSidebar?: boolean | undefined;
+        hideHeader?: boolean | undefined;
+        hideFooter?: boolean | undefined;
+        contentPadding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        sidebar: {};
+        default: {};
+        footer: {};
+    };
+};
+export type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
+export default class Page extends SvelteComponent<PageProps, PageEvents, PageSlots> {
+}
+export {};