contain-css-svelte 0.0.1

package/dist/controls/RadioButton.svelte

@@ -0,0 +1,109 @@
+<script>export let group;
+export let value;
+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 style = injectVars($$props, "radio-button", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+let ref;
+let labelContent;
+let labelWidth;
+$: {
+  if (ref) {
+    labelContent = ref.innerHTML;
+  }
+}
+</script>
+
+<label>
+  <input {value} type="radio" bind:group />
+  <span style:--label-width="{labelWidth + 4}px" bind:this={ref}><slot /></span>
+</label>
+<!-- Off-screen span for measuring -->
+<span class="offscreen" bind:clientWidth={labelWidth}>{@html labelContent}</span
+>
+
+<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.
+  */
+:root {
+  /* Customize these variables for radio button styling */
+  --radio-button-dot: "•";
+}
+/* Styles will be similar to the checkbox, with appropriate adjustments */
+/* ... (rest of your styles adapted for radio button) ... */
+.offscreen,
+label {
+  font-family: var(--radio-button-font-family, var(--ui-font-family, var(--font-family, sans-serif)));
+  text-transform: var(--radio-button-text-transform, var(--ui-text-transform, var(--text-transform, none)));
+  text-decoration: var(--radio-button-text-decoration, var(--ui-text-decoration, var(--text-decoration, none)));
+  font-size: var(--radio-button-font-size, var(--ui-font-size, var(--font-size, 16px)));
+  font-weight: var(--radio-button-font-weight, var(--ui-font-weight, var(--font-weight, 400)));
+  line-height: var(--radio-button-line-height, var(--ui-line-height, var(--line-height, 1.5)));
+  letter-spacing: var(--radio-button-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, 0.05em)));
+}
+.offscreen {
+  visibility: hidden;
+  font-weight: var(--radio-button-checked-weight, var(--checked-weight, var(--weight, active)));
+  position: absolute;
+}
+label {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+  gap: var(--radio-button-space, var(--toggle-space, var(--space-md)));
+  cursor: pointer;
+  transition: filter, transform var(--button-transition, var(--control-transition, var(--transition, 300ms)));
+}
+label:hover {
+  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.1))));
+  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+}
+label:active {
+  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(0.9))));
+  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, translate(var(--space), var(--space)))));
+}
+label span {
+  width: var(--label-width);
+}
+label:has(input:checked) {
+  font-weight: var(--radio-button-checked-weight, var(--checked-weight, var(--weight, active)));
+}
+input[type=radio] {
+  display: none;
+}
+label::before {
+  transition: all var(--radio-button-transition, var(--transition, control));
+  display: inline-grid;
+  place-content: center;
+  content: " ";
+  width: var(--radio-button-size, var(--font-size, var(--size, 1em)));
+  height: var(--radio-button-size, var(--font-size, var(--size, 1em)));
+  background: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, white)))));
+  color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, black)))));
+  border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
+  box-sizing: border-box;
+  border-radius: var(--radio-button-border-radius, 50%);
+}
+label:has(input:checked)::before {
+  background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--radio-button-bg, var(--bg, white)))));
+  color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--radio-button-fg, var(--fg, black)))));
+  border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
+  box-sizing: border-box;
+  width: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+  height: var(--radio-button-size, var(--toggle-size, var(--font-size, var(--size, 1em))));
+}</style>

package/dist/controls/RadioButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        group: string;
+        value: 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 RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+}
+export {};

package/dist/controls/Select.svelte

@@ -0,0 +1,135 @@
+<script>import DropdownMenu from "../dropdowns/DropdownMenu.svelte";
+import { onMount, tick } from "svelte";
+export let value;
+let selectElement;
+let observer;
+onMount(async () => {
+  await tick();
+  updateOptions();
+  observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList") {
+        updateOptions();
+      }
+    });
+  });
+  observer.observe(selectElement, { childList: true });
+  return () => observer.disconnect();
+});
+let options = [];
+let activeOption = null;
+function updateOptions() {
+  if (!selectElement) {
+    return;
+  }
+  options = [];
+  let optionEls = selectElement.querySelectorAll("option");
+  let newOptions = [];
+  for (let optionEl of optionEls) {
+    options.push({
+      value: optionEl.value,
+      html: optionEl.innerHTML
+    });
+  }
+  activeOption = options[selectElement.selectedIndex];
+}
+function setValue(idx) {
+  console.log("Button to set", idx);
+  selectElement.selectedIndex = idx;
+  selectElement.dispatchEvent(new Event("change"));
+  activeOption = options[idx];
+}
+</script>
+
+<select bind:value on:change bind:this={selectElement}>
+  <slot />
+</select>
+<div class="dropdown-wrapper">
+  <DropdownMenu>
+    <span class="select-dropdown" slot="label">
+      <span>
+        {#if activeOption}{@html activeOption.html}{:else}-{/if}
+      </span>
+    </span>
+    {#each options as option, index}
+      <li>
+        <button on:click={() => setValue(index)}>{@html option.html} </button>
+      </li>
+    {/each}
+  </DropdownMenu>
+</div>
+
+<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.
+  */
+select,
+.dropdown-wrapper {
+  box-sizing: border-box;
+  border: var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))))));
+  border-top: var(--select-border-top, var(--input-border-top, var(--menu-border-top, var(--control-border-top, var(--container-border-top, var(--border-top, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
+  border-right: var(--select-border-right, var(--input-border-right, var(--menu-border-right, var(--control-border-right, var(--container-border-right, var(--border-right, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
+  border-bottom: var(--select-border-bottom, var(--input-border-bottom, var(--menu-border-bottom, var(--control-border-bottom, var(--container-border-bottom, var(--border-bottom, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
+  border-left: var(--select-border-left, var(--input-border-left, var(--menu-border-left, var(--control-border-left, var(--container-border-left, var(--border-left, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
+  padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--container-padding, var(--padding, 4px))))));
+  border-radius: var(--select-square-radius, var(--input-square-radius, var(--menu-square-radius, var(--control-square-radius, var(--container-square-radius, var(--square-radius, 0))))));
+  background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, white))))));
+  color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, black))))));
+  width: var(--select-width, var(--dropdown-menu-width, 12em));
+}
+.select-dropdown {
+  display: inline-flex;
+  width: var(--select-width, var(--dropdown-menu-width, 12em));
+  box-sizing: border-box;
+}
+.dropdown-wrapper {
+  background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, white))))));
+  color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, black))))));
+}
+.dropdown-menu :global(.dropdown-menu) > :global(button) {
+  background-color: inherit;
+  color: inherit;
+}
+.select-dropdown {
+  position: relative;
+}
+.select-dropdown::after {
+  content: var(--select-arrow, "⌄"); /* ↓ */
+  margin-left: auto;
+  transform: scaleX(1.5) translateY(-50%);
+  display: inline-grid;
+  width: 1em;
+  place-content: center;
+  position: absolute;
+  right: var(--padding);
+  top: 50%;
+}
+:global(.open) .select-dropdown::after {
+  transform: rotate(180deg) scaleX(1.5);
+}
+select {
+  display: none;
+}
+.dropdown-wrapper {
+  display: contents;
+}
+@media (max-width: 600px) {
+  select {
+    display: inline-block;
+  }
+  .dropdown-wrapper {
+    display: none;
+  }
+}
+@container (max-width: 600px) {
+  select {
+    display: inline-block;
+  }
+  .dropdown-wrapper {
+    display: none;
+  }
+}</style>

package/dist/controls/Select.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/controls/Slider.svelte

@@ -0,0 +1,45 @@
+<script>
+  export let value = 0;
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+</script>
+
+<input type="range" bind:value {min} {max} {step} />
+
+<style>
+  :root {
+    --slider-button-color: var(--primary-bg);
+    --slider-button-radius: 50%;
+    --slider-line-color: var(--fg);
+    /* Add more variables and styles as needed */
+  }
+
+  input[type="range"] {
+    /* Apply your custom styles here */
+    background: transparent;
+  }
+
+  /* Slider Thumb */
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: var(--slider-button-color);
+    border-radius: 3px;
+    width: 18px;
+    /* More styles for the thumb */
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    /* Styles for Firefox */
+  }
+
+  /* Slider Track */
+  input[type="range"]::-webkit-slider-runnable-track {
+    background: var(--slider-line-color);
+    /* More styles for the track */
+  }
+
+  input[type="range"]::-moz-range-track {
+    /* Styles for Firefox */
+  }
+</style>

package/dist/controls/Slider.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  SliderProps */
+/** @typedef {typeof __propDef.events}  SliderEvents */
+/** @typedef {typeof __propDef.slots}  SliderSlots */
+export default class Slider extends SvelteComponent<{
+    value?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/controls/TabItem.svelte

@@ -0,0 +1,56 @@
+<script>import { injectVars } from "../util";
+import Button from "./Button.svelte";
+export let primary = false;
+export let warning = false;
+let iconSlotted = $$slots.icon;
+export let bg = null;
+export let fg = null;
+export let padding = null;
+export let width = null;
+export let height = null;
+export let active;
+let style = injectVars($$props, "tab", [
+  "bg",
+  "fg",
+  "padding",
+  "width",
+  "height"
+]);
+</script>
+
+<div class="tab" class:active {style}>
+  <Button on:click primary={active}>
+    <span slot="icon"><slot name="icon" /></span>
+    <span><slot /></span>
+  </Button>
+</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,
+span {
+  display: contents;
+}
+div > :global(button) {
+  background: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, white)))));
+  color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, black)))));
+  box-sizing: border-box;
+  padding: var(--tab-padding, var(--button-padding, var(--control-padding, var(--secondary-padding, var(--padding, 4px)))));
+  border: var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none)))));
+  border-top: var(--tab-border-top, var(--button-border-top, var(--control-border-top, var(--secondary-border-top, var(--border-top, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-right: var(--tab-border-right, var(--button-border-right, var(--control-border-right, var(--secondary-border-right, var(--border-right, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-bottom: var(--tab-border-bottom, var(--button-border-bottom, var(--control-border-bottom, var(--secondary-border-bottom, var(--border-bottom, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-left: var(--tab-border-left, var(--button-border-left, var(--control-border-left, var(--secondary-border-left, var(--border-left, var(--tab-border, var(--button-border, var(--control-border, var(--secondary-border, var(--border, none))))))))));
+  border-radius: var(--tab-border-radius, var(--button-border-radius, var(--control-border-radius, var(--secondary-border-radius, var(--border-radius, none)))));
+  border-radius: var(--tab-border-radius, var(--border-radius) var(--border-radius) 0 0);
+  margin: 0;
+}
+div.active > :global(button) {
+  background: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, white)))))));
+  color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, black)))))));
+}</style>

package/dist/controls/TabItem.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        primary?: boolean | undefined;
+        warning?: boolean | undefined;
+        bg?: string | null | undefined;
+        fg?: string | null | undefined;
+        padding?: string | null | undefined;
+        width?: string | null | undefined;
+        height?: string | null | undefined;
+        active: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export type TabItemProps = typeof __propDef.props;
+export type TabItemEvents = typeof __propDef.events;
+export type TabItemSlots = typeof __propDef.slots;
+export default class TabItem extends SvelteComponent<TabItemProps, TabItemEvents, TabItemSlots> {
+}
+export {};

package/dist/cssprops.d.ts

@@ -0,0 +1 @@
+export declare const cssProperties: string[];

package/dist/cssprops.js

@@ -0,0 +1,189 @@
+/* A convenient list of all the css variables (custom properties) in our library */
+import { compile } from "svelte/compiler";
+const plainProps = [
+    "--border-color",
+    "--border-radius",
+    "--border-style",
+    "--border-width",
+    "--bold",
+    "--font-size",
+    "--font-size-small",
+    "--first-heading-margin",
+    "--white",
+    "--black",
+    "--text",
+    "--text-size",
+    "--transition",
+    "--ui-font",
+    "--greyed-out-filter",
+    "stripe-bg",
+    "--space",
+    "--space-md",
+    "--space-lg",
+    "--space-xl",
+    "--shadow-distance",
+    "--shadow-color",
+    "--shadow-blur",
+    "icon-size",
+];
+const colorProps = [
+    "--primary-bg",
+    "--primary-fg",
+    "--secondary-bg",
+    "--secondary-fg",
+    "--inactive-bg",
+    "--inactive-fg",
+];
+const miscComponentProps = [
+    "--dropdown-transition",
+    "--column-gap",
+    "--split-pane-width",
+    "--split-pane-right-width",
+    "--split-pane-left-width",
+    "--sidebar-collapse",
+    "--sidebar-expand",
+    "--sidebar-transition",
+    "--resizer-grab-width",
+    "--resizer-grab-height",
+    "--resizer-color",
+    "--resizer-border",
+    "--radio-button-space",
+    "--mirror-sidebar-icons",
+];
+const flex = ["justify", "align", "gap"];
+const color = ["fg", "bg"];
+const typography = [
+    "font-family",
+    "text-transform",
+    "font-weight",
+    "font-size",
+    "line-height",
+    "letter-spacing",
+    "text-decoration",
+];
+const ctypography = [...typography, "body-font-family"];
+const box = [
+    "padding",
+    "border",
+    "margin",
+    "border-bottom",
+    "border-top",
+    "border-left",
+    "border-right",
+    "border-radius",
+];
+const size = [
+    "width",
+    "height",
+    "min-width",
+    "min-height",
+    "max-width",
+    "max-height",
+];
+const clickable = [
+    "hover-filter",
+    "hover-transform",
+    "active-filter",
+    "active-transform",
+    "transition",
+];
+const scrollable = [
+    "scrollbar-width",
+    "scrollbar-height",
+    "scrollbar-track-bg",
+    "scrollbar-thumb-radius",
+    "scrollbar-thumb-hover-bg",
+    "scrollbar-thumb-bg",
+];
+const adaptiveSizes = [
+    "width-small",
+    "height-small",
+    "width",
+    "height",
+    "width-large",
+    "height-large",
+];
+const genericProps = Array.from(new Set([
+    ...color,
+    ...flex,
+    ...ctypography,
+    ...box,
+    ...size,
+    ...clickable,
+    ...scrollable,
+    ...adaptiveSizes,
+])).map((prop) => `--${prop}`);
+export const cssProperties = Array.from(new Set([
+    ...genericProps,
+    ...miscComponentProps,
+    ...plainProps,
+    ...colorProps,
+]));
+/* Now we get the list of component props... */
+const components = [
+    ...[
+        "button",
+        "mini-button",
+        "menu-item",
+        "dropdown-menu",
+        "select",
+        "checkbox",
+        "checkbox-checked",
+        "control",
+        "ui",
+        "tab-item",
+    ].map((component) => ({
+        component,
+        props: [],
+        propnames: [...box, ...color, ...clickable, ...typography, ...size],
+    })),
+    ...["container", "card", "page", "sidebar", "hero"].map((component) => ({
+        component,
+        props: [],
+        propnames: [...box, ...color, ...ctypography, ...size, ...scrollable],
+    })),
+    ...["tab-bar", "bar", "form-item"].map((component) => ({
+        component,
+        props: [],
+        propnames: [...box, ...color, ...typography, ...size, ...flex],
+    })),
+    ...["heading", "form-label", "form-item"].map((component) => ({
+        component,
+        props: [],
+        propnames: [...typography, ...color, ...box],
+    })),
+    ...["code", "ui", "heading", "body"].map((component) => ({
+        component,
+        props: [],
+        propnames: [...typography, ...color],
+    })),
+    {
+        component: "tile",
+        props: [],
+        propnames: [
+            ...color,
+            ...box,
+            ...typography,
+            ...clickable,
+            ...size,
+            "width-large",
+            "width-small",
+            "height-large",
+            "height-small",
+            "selected",
+            "checkbox",
+            "checkbox-checked",
+        ],
+    },
+    {
+        component: "tile-selected",
+        props: [],
+        propnames: [...color, ...typography],
+    },
+];
+for (let c of components) {
+    c.props = c.propnames.map((prop) => `--${c.component}-${prop}`);
+    cssProperties.push(...c.props);
+}
+cssProperties.sort();
+console.log(cssProperties);