contain-css-svelte 0.0.1

package/dist/layout/ResponsiveText.svelte

@@ -0,0 +1,99 @@
+<script>import { browser } from "$app/environment";
+export let greaterThan = null;
+export let smallerThan = null;
+let smallerThanClasses = "";
+let greaterThanClasses = "";
+if (smallerThan) {
+  for (let className of ["xs", "small", "medium", "large", "xl"]) {
+    if (className === smallerThan) {
+      smallerThanClasses += ` ${className}`;
+      break;
+    }
+    smallerThanClasses += ` ${className}`;
+  }
+}
+if (greaterThan) {
+  for (let className of ["xl", "large", "medium", "small", "xs"]) {
+    if (className === greaterThan) {
+      greaterThanClasses += ` ${className}`;
+      break;
+    }
+    greaterThanClasses += ` ${className}`;
+  }
+}
+let xs;
+let small;
+let medium;
+let large;
+let xl;
+</script>
+
+<span class="xs" bind:this={xs}>
+  <slot name="xs" />
+</span>
+<span class="small" bind:this={small}>
+  <slot name="small" />
+</span>
+<span class="medium" bind:this={medium}>
+  <slot name="medium" />
+</span>
+<span class="large" bind:this={large}>
+  <slot name="large" />
+</span>
+<span class="xl" bind:this={xl}>
+  <slot name="xl" />
+</span>
+<span
+  class="else"
+  class:xs={!$$slots.xs}
+  class:small={!$$slots.small}
+  class:medium={!$$slots.medium}
+  class:large={!$$slots.large}
+  class:xl={!$$slots.xl}
+>
+  <slot name="else" />
+</span>
+<span class={greaterThanClasses}>
+  <slot name="greaterThan" />
+</span>
+<span class={smallerThanClasses}>
+  <slot name="smallerThan" />
+</span>
+
+<style>
+  .xs,
+  .small,
+  .medium,
+  .large,
+  .xl {
+    display: none;
+  }
+  @container (max-width: 240px) {
+    .xs {
+      display: contents;
+    }
+  }
+  @container (min-width: 241px) and (max-width: 480px) {
+    .small {
+      display: contents;
+    }
+  }
+  @container (min-width: 481px) and (max-width: 720px) {
+    .medium {
+      display: contents;
+    }
+  }
+  @container (min-width: 721px) and (max-width: 1024px) {
+    .large {
+      display: contents;
+    }
+  }
+  @container (min-width: 1025px) {
+    .xl {
+      display: contents;
+    }
+  }
+  .else.render {
+    display: contents;
+  }
+</style>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        greaterThan?: "small" | "medium" | "large" | "xs" | "xl" | null | undefined;
+        smallerThan?: "small" | "medium" | "large" | "xs" | "xl" | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        xs: {};
+        small: {};
+        medium: {};
+        large: {};
+        xl: {};
+        else: {};
+        greaterThan: {};
+        smallerThan: {};
+    };
+};
+export type ResponsiveTextProps = typeof __propDef.props;
+export type ResponsiveTextEvents = typeof __propDef.events;
+export type ResponsiveTextSlots = typeof __propDef.slots;
+export default class ResponsiveText extends SvelteComponent<ResponsiveTextProps, ResponsiveTextEvents, ResponsiveTextSlots> {
+}
+export {};

package/dist/layout/Row.svelte

@@ -0,0 +1,39 @@
+<script>export let size = "medium";
+export let customHeight = null;
+</script>
+
+<section
+  class="row"
+  class:small={size == "small"}
+  class:medium={size == "medium"}
+  class:large={size == "large"}
+  style:--custom-height={customHeight}
+>
+  <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 {
+  --h: 120px;
+}
+.medium {
+  --h: 240px;
+}
+.large {
+  --h: 360px;
+}
+section {
+  display: flex;
+  flex-direction: row;
+  height: var(--custom-height, var(--h, 200px));
+  gap: var(--column-gap, var(--container-gap, var(--gap, 8px)));
+  container-type: size;
+  overflow: auto;
+  align-items: flex-start;
+}</style>

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

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

package/dist/layout/Sidebar.svelte

@@ -0,0 +1,264 @@
+<script>import { onMount } from "svelte";
+import { injectVars } from "../util";
+export let width = null;
+export let bg = null;
+export let fg = null;
+export let right = false;
+export let left = true;
+let style = injectVars($$props, "sidebar", ["bg", "fg", "width"]);
+let expandedHamburger = false;
+let expandedBar = true;
+</script>
+
+<aside
+  class="sidebar"
+  class:right
+  class:left
+  class:expandedHamburger
+  class:expandedBar
+  {style}
+>
+  <button
+    class:expander={!expandedHamburger}
+    class:close={expandedHamburger}
+    on:click={() => (expandedHamburger = !expandedHamburger)}
+  ></button>
+  <div class="content">
+    <slot />
+  </div>
+  <label class="edge-bar">
+    <button
+      on:click={() => (expandedBar = !expandedBar)}
+      class="expander"
+      class:expander={!expandedBar}
+      class:close={expandedBar}
+      aria-label="Expand sidebar"
+    ></button>
+  </label>
+</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.
+  */
+aside {
+  background: var(--sidebar-bg, var(--container-bg, var(--bg, white)));
+  color: var(--sidebar-fg, var(--container-fg, var(--fg, black)));
+  height: 100%;
+  width: calc(var(--sidebar-width) + var(--grab-bar-width));
+  box-sizing: border-box;
+  overflow: hidden;
+}
+aside .content {
+  background: var(--sidebar-bg, var(--container-bg, var(--bg, white)));
+  color: var(--sidebar-fg, var(--container-fg, var(--fg, black)));
+  width: var(--sidebar-width);
+  height: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: var(--sidebar-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, thin)));
+  scrollbar-color: var(--sidebar-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, #888))) var(--sidebar-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--border-color))));
+}
+aside .content::-webkit-scrollbar {
+  width: var(--sidebar-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, var(--space-md))));
+  height: var(--sidebar-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, var(--gap))));
+}
+aside .content::-webkit-scrollbar-track {
+  background: var(--sidebar-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, var(--bg))));
+}
+aside .content::-webkit-scrollbar-thumb {
+  background: var(--sidebar-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, var(--stripe-bg))));
+  border-radius: var(--sidebar-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, var(--border-radius))));
+}
+aside .content::-webkit-scrollbar-thumb:hover {
+  background: var(--sidebar-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, var(--secondary-bg))));
+}
+.right {
+  border-left: var(--sidebar-border, var(--border, none));
+}
+.left {
+  border-right: var(--sidebar-border, var(--border, none));
+}
+/* Expander doo-dad */
+/* Responsive sidebar... */
+@container (min-width: 513px) {
+  /* Aside is a relative container whose width
+  will smoothly animate so our parent knows
+  how to lay us out */
+  aside {
+    transition: width var(--sidebar-transition);
+    position: relative;
+    height: 100%;
+    width: var(--grab-bar-width);
+  }
+  aside.expandedBar {
+    width: calc(var(--sidebar-width) + var(--grab-bar-width));
+  }
+  aside .content {
+    transition: transform var(--sidebar-transition);
+    transform: translateX(-110%);
+  }
+  aside.right .content {
+    transform: translateX(100%);
+  }
+  /* Positioning */
+  aside.expandedBar .content {
+    transform: translateX(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--sidebar-width);
+  }
+  aside.expandedBar.right .content {
+    left: auto;
+    right: 0;
+  }
+  .edge-bar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: var(--grab-bar-width);
+    background: var(--body-bg);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .right .edge-bar {
+    left: 0;
+    right: auto;
+  }
+  .edge-bar button {
+    display: block;
+    background: transparent;
+    color: var(--body-fg);
+    width: var(--grab-bar-width);
+    box-sizing: border-box;
+    padding: 0;
+    border: none;
+  }
+  /* Affordances */
+  .edge-bar:hover {
+    filter: var(--grab-bar-hover-filter);
+    background: var(--grab-bar-hover-bg);
+  }
+  aside .content,
+  .edge-bar {
+    transition: filter, background var(--transition);
+  }
+  .edge-bar:contains(:active) {
+    filter: var(--grab-bar-active-filter);
+    background: var(--grab-bar-active-bg);
+  }
+  aside:has(.edge-bar:hover) .content {
+    filter: var(--greyed-out-filter);
+  }
+  /* Hide hamburger expander when not in
+  hamburger mode */
+  button {
+    display: none;
+  }
+}
+@container (max-width: 512px) {
+  .edge-bar {
+    display: none;
+  }
+  .sidebar {
+    background: transparent;
+  }
+  .right,
+  .left {
+    border-left: none;
+    border-right: none;
+  }
+  aside > .content {
+    transform: translateX(-100%);
+    opacity: 0;
+    background: transparent;
+    pointer-events: none;
+    transition: transform var(--sidebar-transition) ease-in-out;
+    padding: var(--padding);
+  }
+  aside.left > .content {
+    border-right: var(--border-width) var(--border-style) var(--border-color);
+  }
+  aside.right > .content {
+    border-left: var(--border-width) var(--border-style) var(--border-color);
+  }
+  aside.expandedHamburger > .content {
+    transform: translateX(0);
+    height: 100%;
+    opacity: 1;
+    pointer-events: all;
+    background: var(--sidebar-bg, var(--container-bg, var(--bg, white)));
+    color: var(--sidebar-fg, var(--container-fg, var(--fg, black)));
+  }
+  aside > button {
+    transition: left var(--sidebar-transition);
+    transform: translateX(0);
+    z-index: 3;
+    position: absolute;
+    opacity: 1;
+    pointer-events: all;
+    display: block;
+    position: absolute;
+    top: var(--padding);
+    left: calc(-1 * var(--padding));
+    border-radius: var(--mini-button-radius, var(--button-radius, var(--radius, 50%)));
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border: var(--mini-button-border);
+    width: var(--icon-size, 32px);
+    height: var(--icon-size, 32px);
+    background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, white)))));
+    color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, black)))));
+    cursor: pointer;
+    transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+  }
+  aside > button:hover {
+    filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.1)))));
+    transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+  }
+  aside > button:active {
+    filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(0.9)))));
+    transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, translate(var(--space), var(--space))))));
+  }
+  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%)));
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  /* aside > button:hover {
+    background: var(--mini-button-hover-bg);
+    color: var(--mini-button-hover-fg);
+  } */
+  aside {
+    width: calc(var(--gap) + var(--icon-size));
+    flex: 0 0 auto;
+  }
+  aside .content {
+    position: absolute;
+    --top: calc(var(--padding) + var(--icon-size));
+    left: var(--padding);
+    width: var(--sidebar-width);
+    background: var(--sidebar-bg);
+    color: var(--sidebar-fg);
+    z-index: 2;
+  }
+}
+button.expander::after {
+  content: var(--sidebar-expand, "»");
+}
+button.close::after {
+  content: var(--sidebar-collapse, "«");
+}
+.right button::after {
+  display: inline-block;
+  transform: var(--mirror-sidebar-icons, scaleX(-1));
+}</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        width?: string | null | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        right?: boolean | undefined;
+        left?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponent<SidebarProps, SidebarEvents, SidebarSlots> {
+}
+export {};

package/dist/layout/SplitPane.svelte

@@ -0,0 +1,160 @@
+<script>import { injectVars } from "../util";
+import { onMount } from "svelte";
+export let leftWidth = "1fr";
+export let rightWidth = "1fr";
+const style = injectVars($$props, "split-pane", [
+  "bg",
+  "fg",
+  "border",
+  "height",
+  "leftWidth",
+  "rightWidth"
+]);
+let resizeStyle = "";
+let startWidthLeft;
+let startWidthRight;
+let startX;
+let splitPaneContainer;
+let resizerDiv;
+let leftPane;
+let rightPane;
+function onMouseDown(event) {
+  startX = event.clientX;
+  startWidthLeft = leftPane.getBoundingClientRect().width;
+  startWidthRight = rightPane.getBoundingClientRect().width;
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+}
+function onMouseMove(event) {
+  const delta = event.clientX - startX;
+  const newLeftWidth = startWidthLeft + delta;
+  const newRightWidth = startWidthRight - delta;
+  setSize(newLeftWidth, newRightWidth);
+}
+function setSize(newLeftWidth, newRightWidth) {
+  const MIN_SIZE = 32;
+  if (newLeftWidth < MIN_SIZE || newRightWidth < MIN_SIZE) {
+    return;
+  }
+  let containerWidth = splitPaneContainer.getBoundingClientRect().width;
+  let resizerWidth = resizerDiv.getBoundingClientRect().width;
+  if (newLeftWidth + newRightWidth + resizerWidth > containerWidth) {
+    newRightWidth = containerWidth - newLeftWidth - resizerWidth;
+  }
+  resizeStyle = `grid-template-columns: ${newLeftWidth}px 8px ${newRightWidth}px`;
+}
+function onMouseUp() {
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+}
+function onKeyUp(event) {
+  const STEP_SIZE = 10;
+  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+    const delta = event.key === "ArrowLeft" ? -STEP_SIZE : STEP_SIZE;
+    startWidthLeft = leftPane.getBoundingClientRect().width;
+    startWidthRight = rightPane.getBoundingClientRect().width;
+    let newLeftWidth = startWidthLeft + delta;
+    let newRightWidth = startWidthRight - delta;
+    setSize(newLeftWidth, newRightWidth);
+  }
+}
+function handleWindowResize() {
+  if (!resizeStyle)
+    return;
+  const existingLeftWidth = leftPane.getBoundingClientRect().width;
+  const existingRightWidth = rightPane.getBoundingClientRect().width;
+  let w = splitPaneContainer.getBoundingClientRect().width;
+  let delta = w - existingLeftWidth - existingRightWidth;
+  setSize(existingLeftWidth + delta / 2, existingRightWidth + delta / 2);
+}
+onMount(() => {
+  if (window) {
+    window.addEventListener("resize", handleWindowResize);
+  }
+  return () => window.removeEventListener("resize", handleWindowResize);
+});
+</script>
+
+<div
+  class="split-pane"
+  style={style + resizeStyle}
+  bind:this={splitPaneContainer}
+>
+  <div class="left" bind:this={leftPane}>
+    <slot name="left" />
+  </div>
+  <div
+    bind:this={resizerDiv}
+    class="resizer"
+    tabindex="0"
+    aria-role="resizer"
+    on:mousedown={onMouseDown}
+    on:keydown={onKeyUp}
+  ></div>
+  <div class="right" bind:this={rightPane}>
+    <slot name="right" />
+  </div>
+</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.
+  */
+.split-pane {
+  display: grid;
+  grid-template-columns: var(--split-pane-columns, var(--split-pane-left-width, 1fr) var(--split-pane-resizer-width, var(--resizer-width, 4px)) var(--split-pane-right-width, 1fr));
+  justify-content: stretch;
+  height: var(--split-pane-height, auto);
+  width: var(--split-pane-width, 100%);
+  box-sizing: border-box;
+  gap: var(--split-pane-gap, var(--gap, 0.5rem));
+  border: var(--split-pane-border, var(--container-border, var(--border, 1px solid #ccc)));
+}
+.split-pane > div {
+  padding: var(--split-pane-content-padding, var(--split-pane-padding, var(--padding, 8px)));
+  container-type: inline-size;
+}
+/* Resizer */
+.split-pane > .resizer {
+  padding: 0;
+  width: var(--resizer-grab-width, 12px);
+  cursor: col-resize;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+.split-pane > .resizer::before {
+  content: " ";
+  width: var(--resizer-width, var(--border-width, 1px));
+  background-color: var(--split-pane-resizer-color, var(--resizer-color, var(--fg)));
+  height: 100%;
+  display: block;
+}
+.split-pane > .resizer::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  height: var(--resizer-grab-height, 1em);
+  width: var(--resizer-grab-width, 8px);
+  color: var(--fg);
+  transform: translateY(-50%);
+  background: var(--resizer-background, repeating-linear-gradient(90deg, var(--resizer-color, var(--fg)) 0px, var(--resizer-color, var(--fg)) 1px, transparent 1px, transparent 3px));
+}
+@container (max-width: 600px) {
+  .split-pane {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap, 4px);
+  }
+  .split-pane > div:first-child {
+    border-bottom: var(--resizer-border, var(--border, 1px solid #ccc));
+  }
+  .split-pane > .resizer {
+    display: none;
+  }
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        leftWidth?: string | undefined;
+        rightWidth?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        left: {};
+        right: {};
+    };
+};
+export type SplitPaneProps = typeof __propDef.props;
+export type SplitPaneEvents = typeof __propDef.events;
+export type SplitPaneSlots = typeof __propDef.slots;
+export default class SplitPane extends SvelteComponent<SplitPaneProps, SplitPaneEvents, SplitPaneSlots> {
+}
+export {};

package/dist/layout/TabBar.svelte

@@ -0,0 +1,49 @@
+<script>export let sticky = false;
+import Bar from "./Bar.svelte";
+import TabItem from "../controls/TabItem.svelte";
+import { createEventDispatcher } from "svelte";
+export let active = null;
+export let items = [];
+const dispatch = createEventDispatcher();
+function setValue(value) {
+  active = value;
+  dispatch("change", { value });
+}
+</script>
+
+<div class="tabs" class:sticky>
+  <Bar padding="0" borderTop="none">
+    {#each items as item}
+      {@const value = item.value || item}
+      {@const label = item.label || item}
+      <TabItem active={value === active} on:click={() => setValue(value)}>
+        {label}
+      </TabItem>
+    {/each}
+    <slot />
+  </Bar>
+</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.
+  */
+div > :global(.bar) {
+  background: var(--tab-bar-bg, var(--bar-bg, var(--container-bg, var(--bg, white))));
+  color: var(--tab-bar-fg, var(--bar-fg, var(--container-fg, var(--fg, black))));
+  justify-content: var(--tab-bar-justify, var(--justify, flex-start));
+  align-items: var(--tab-bar-align, var(--align, flex-end));
+  border-bottom: var(--tab-bar-border-bottom, var(--border-width) var(--border-style) var(--border-color));
+  border-left: var(--tab-bar-border-left, none);
+  border-right: var(--tab-bar-border-left, none);
+  border-top: var(--tab-bar-border-left, none);
+  gap: var(--tab-bar-gap, var(--space-md));
+}
+.sticky {
+  position: sticky;
+  top: calc(-1 * var(--container-padding, var(--block-padding, var(--padding, 8px))));
+  background-color: var(--tab-bar-bg, var(--bg, white));
+}</style>