@lavalogic/scoria 0.40.12 → 0.40.14

package/dist/Components/CollapsibleCard.svelte

@@ -9,10 +9,13 @@
 
 <script lang="ts">
 	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import { Colour } from '../scss/colours.js';
-	import Action from './Action.svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
 	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
+	import Icon from './Icon.svelte';
 
 	let {
 		title,
@@ -26,6 +29,9 @@
 	const contentId = `collapsible-card-${generateWeakId()}`;
 
 	const cardMaxHeight = $derived(maxHeight != null && maxHeight > 0 ? `${maxHeight}px` : undefined);
+
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
 </script>
 
 <div
@@ -34,7 +40,16 @@
 	class:is-collapsed={isCollapsed}
 	class:grow
 >
-	<div class="heading">
+	<button
+		type="button"
+		class="heading"
+		class:is-collapsed={isCollapsed}
+		aria-expanded={!isCollapsed}
+		aria-controls={contentId}
+		onclick={() => {
+			isCollapsed = !isCollapsed;
+		}}
+	>
 		<div class="left">
 			<h3>{title}</h3>
 			{#if subtitle}
@@ -45,34 +60,27 @@
 				{/await}
 			{/if}
 		</div>
-		<div class="right">
-			<Action
-				label={isCollapsed ? 'Expand' : 'Collapse'}
-				aria-expanded={!isCollapsed}
-				aria-controls={contentId}
-				onclick={() => {
-					isCollapsed = !isCollapsed;
-				}}
-				size={Size.TripleXLarge}
-				icon={{
-					name: isCollapsed ? 'circle-plus' : 'circle-minus',
-					colour: Colour['$ui-blue-5'],
-					size: Size.Medium,
-				}}
+		<span class="indicator">
+			<Icon
+				name={isCollapsed ? 'circle-plus' : 'circle-minus'}
+				colour={Colour['$ui-blue-5']}
+				size={Size.Medium}
 			/>
-		</div>
-	</div>
+		</span>
+	</button>
 
-	<div
-		id={contentId}
-		class="content"
-		class:is-collapsed={isCollapsed}
-		aria-hidden={isCollapsed}
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
+	{#if !isCollapsed}
+		<div
+			id={contentId}
+			class="content"
+			style="overflow: {cardMaxHeight != null ? 'auto' : 'visible'};"
+			transition:slide={{ duration: slideDuration, easing: cubicOut }}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>.collapsible-card {
@@ -84,40 +92,47 @@
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   padding: 1.5rem;
   max-height: 100%;
-  overflow: hidden;
 }
 .collapsible-card.grow {
   flex: 1;
 }
-.collapsible-card .heading {
+
+.heading {
   display: flex;
   flex-flow: row nowrap;
-  transition: margin ease-out 0.15s 0s;
+  align-items: center;
+  width: 100%;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  background: transparent;
+  border: none;
   box-sizing: border-box;
   padding: 0 0.5rem 0.5rem 0.5rem;
 }
-.collapsible-card .heading .left {
+.heading .left {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
+  gap: 0.25rem;
 }
-.collapsible-card .heading .left h3 {
+.heading .left h3 {
   margin: 0;
   margin-top: 0.25rem;
   color: #46525b;
   font-weight: 500;
   font-size: 1.125rem;
 }
-.collapsible-card .heading .left span {
-  margin-top: auto;
-  margin-bottom: 0.25rem;
+.heading .left span {
   color: #647d8e;
   font-size: 0.875rem;
 }
-.collapsible-card .heading .right {
+.heading .indicator {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
 }
-.collapsible-card:not(.is-collapsed) .heading {
+.heading:not(.is-collapsed) {
   margin-bottom: 1rem;
   border-bottom: solid 1px #dae0e5;
 }
@@ -125,49 +140,8 @@
 div.content {
   display: flex;
   flex-flow: column nowrap;
-}
-@media (prefers-reduced-motion: no-preference) {
-  div.content {
-    transition: max-height ease-out 0.15s 0s, opacity ease-out 0.15s 0.1s;
-  }
-}
-div.content {
   max-height: var(--card-max-height, 100%);
   height: max-content;
   min-height: 0;
-  opacity: 1;
   width: 100%;
-}
-@media (prefers-reduced-motion: no-preference) {
-  div.content.is-collapsed {
-    animation: accordion ease-out 0.15s 0s forwards;
-  }
-}
-div.content.is-collapsed {
-  max-height: 0px;
-  opacity: 0;
-  overflow: hidden;
-}
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes accordion {
-    0% {
-      opacity: 1;
-      max-height: var(--card-max-height, 90vh);
-      overflow: auto;
-    }
-    100% {
-      opacity: 0;
-      max-height: 0px;
-      overflow: hidden;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .heading,
-  div.content,
-  div.content.is-collapsed {
-    animation-duration: 0.001ms !important;
-    transition-duration: 0.001ms !important;
-  }
 }</style>

package/dist/Components/CollapsibleMenuGroup.svelte

@@ -0,0 +1,93 @@
+<svelte:options runes />
+
+<!--
+@component
+A labelled, collapsible group for a side menu: a header row (label + chevron)
+that expands and collapses the items supplied as the default snippet. Pair
+several of these in a menu column to build a grouped navigation tree.
+-->
+<script lang="ts">
+	import { usePrefersReducedMotion } from '../Helpers/prefersReducedMotion.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import type { CollapsibleMenuGroupProps } from './CollapsibleMenuGroupProps.js';
+	import Icon from './Icon.svelte';
+
+	let { title, isCollapsed = $bindable(false), children }: CollapsibleMenuGroupProps = $props();
+
+	const reducedMotion = usePrefersReducedMotion();
+	const slideDuration = $derived(reducedMotion.matches ? 0 : 200);
+</script>
+
+<div class="menu-group">
+	<button
+		type="button"
+		class="group-header"
+		aria-expanded={!isCollapsed}
+		onclick={() => {
+			isCollapsed = !isCollapsed;
+		}}
+	>
+		<span class="group-title">{title}</span>
+		<span
+			class="chevron"
+			class:collapsed={isCollapsed}
+		>
+			<Icon
+				name="chevron-down"
+				size={Size.Small}
+				colour={Colour['$ui-blue-11']}
+			/>
+		</span>
+	</button>
+
+	{#if !isCollapsed}
+		<div
+			class="group-items"
+			transition:slide={{ duration: slideDuration, easing: cubicOut }}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>.menu-group {
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.group-header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  font: inherit;
+  font-weight: 500;
+  color: #46525b;
+  text-align: start;
+  background-color: #f4f7f9;
+  border: none;
+  cursor: pointer;
+}
+.group-header .group-title {
+  flex-grow: 1;
+}
+.group-header .chevron {
+  display: inline-flex;
+  transition: transform 0.15s ease-out;
+}
+.group-header .chevron.collapsed {
+  transform: rotate(-90deg);
+}
+
+.group-items {
+  display: flex;
+  flex-flow: column nowrap;
+  border-top: solid 1px #cbd4da;
+}</style>

package/dist/Components/CollapsibleMenuGroup.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CollapsibleMenuGroupProps } from './CollapsibleMenuGroupProps.js';
+/**
+ * A labelled, collapsible group for a side menu: a header row (label + chevron)
+ * that expands and collapses the items supplied as the default snippet. Pair
+ * several of these in a menu column to build a grouped navigation tree.
+ */
+declare const CollapsibleMenuGroup: import("svelte").Component<CollapsibleMenuGroupProps, {}, "isCollapsed">;
+type CollapsibleMenuGroup = ReturnType<typeof CollapsibleMenuGroup>;
+export default CollapsibleMenuGroup;

package/dist/Components/CollapsibleMenuGroupProps.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for {@link CollapsibleMenuGroup} — a labelled group in a side menu
+ * whose items collapse and expand under a clickable header. The items are
+ * supplied as the default snippet.
+ */
+export interface CollapsibleMenuGroupProps {
+    /** Header label. */
+    title: string;
+    /** Two-way bindable collapsed state. Defaults to expanded. */
+    isCollapsed?: boolean;
+    /** The menu items revealed when expanded. */
+    children: Snippet;
+}

package/dist/Components/CollapsibleMenuGroupProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/OptionCards.svelte

@@ -19,25 +19,41 @@ native radio group (the radio inputs are visually hidden but focusable).
 	import type { OptionCardsProps } from './OptionCardsProps.js';
 	import Icon from './Icon.svelte';
 
-	let { name, options, selected, onchange }: OptionCardsProps<T> = $props();
+	let {
+		name,
+		options,
+		selected,
+		onchange,
+		multiple = false,
+		selectedValues,
+		ontoggle,
+	}: OptionCardsProps<T> = $props();
 </script>
 
 <div
 	class="option-cards"
-	role="radiogroup"
+	role={multiple ? 'group' : 'radiogroup'}
 >
 	{#each options as option (option.value)}
-		{@const isSelected = selected === option.value}
+		{@const isSelected = multiple
+			? (selectedValues?.includes(option.value) ?? false)
+			: selected === option.value}
 		<label
 			class="card"
 			class:selected={isSelected}
 		>
 			<input
 				class="native"
-				type="radio"
+				type={multiple ? 'checkbox' : 'radio'}
 				{name}
 				checked={isSelected}
-				onchange={() => void onchange?.(option.value)}
+				onchange={() => {
+					if (multiple) {
+						ontoggle?.(option.value, !isSelected);
+					} else {
+						void onchange?.(option.value);
+					}
+				}}
 			/>
 			{#if option.icon}
 				<Icon

package/dist/Components/OptionCardsProps.d.ts

@@ -12,8 +12,17 @@ export interface OptionCardsProps<T> {
     name?: string;
     /** The option set rendered as cards. */
     options: ReadonlyArray<OptionCard<T>>;
-    /** Currently-selected value. */
+    /** Currently-selected value (single-select mode). */
     selected?: T;
-    /** Called when a card is chosen. May be `void` or `Promise<void>`. */
+    /** Called when a card is chosen (single-select mode). May be `void` or `Promise<void>`. */
     onchange?: (value: T) => void | Promise<void>;
+    /**
+     * Enable multi-select: cards become independent checkboxes. Use with
+     * `selectedValues` and `ontoggle` instead of `selected` / `onchange`.
+     */
+    multiple?: boolean;
+    /** Currently-selected values (multi-select mode). */
+    selectedValues?: ReadonlyArray<T>;
+    /** Called when a card is toggled on or off (multi-select mode). */
+    ontoggle?: (value: T, selected: boolean) => void;
 }

package/dist/Components/PopoverButton.svelte

@@ -0,0 +1,164 @@
+<svelte:options runes />
+
+<!--
+@component
+An icon button that toggles a floating popover anchored beneath it, with a
+caret pointing back at the button. The popover holds arbitrary content (the
+default snippet) and closes on click-outside or Escape.
+-->
+<script lang="ts">
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { PopoverButtonProps } from './PopoverButtonProps.js';
+
+	let {
+		icon,
+		label,
+		children,
+		align = 'center',
+		borderless = false,
+		open = $bindable(false),
+	}: PopoverButtonProps = $props();
+
+	let wrapper: HTMLDivElement | undefined = $state();
+
+	function onWindowPointerDown(e: MouseEvent) {
+		if (!open) {
+			return;
+		}
+		if (wrapper && e.target instanceof Node && !wrapper.contains(e.target)) {
+			open = false;
+		}
+	}
+
+	function onWindowKeydown(e: KeyboardEvent) {
+		if (open && e.key === 'Escape') {
+			open = false;
+		}
+	}
+</script>
+
+<svelte:window
+	onpointerdown={onWindowPointerDown}
+	onkeydown={onWindowKeydown}
+/>
+
+<div
+	class="popover-button"
+	bind:this={wrapper}
+>
+	<button
+		type="button"
+		class="trigger"
+		class:open
+		class:borderless
+		aria-label={label}
+		aria-expanded={open}
+		aria-haspopup="dialog"
+		onclick={() => {
+			open = !open;
+		}}
+	>
+		<Icon
+			name={icon}
+			size={Size.Large}
+			colour={open ? Colour['$brand-primary'] : Colour['$font-secondary']}
+		/>
+	</button>
+
+	{#if open}
+		<div
+			class="popover align-{align}"
+			role="dialog"
+			aria-label={label}
+		>
+			<span class="caret"></span>
+			<div class="popover-inner">
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>.popover-button {
+  position: relative;
+  display: inline-flex;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  cursor: pointer;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+}
+.trigger:hover {
+  background-color: #f4f7f9;
+}
+.trigger.open:not(.borderless) {
+  border-color: #259fc7;
+}
+.trigger.borderless {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+}
+.trigger.borderless:hover {
+  background-color: #f4f7f9;
+}
+.trigger.borderless.open {
+  background-color: #f4fbfd;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 0.6rem);
+  z-index: 100;
+  background-color: #ffffff;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 1.25rem;
+  width: max-content;
+  max-width: 80vw;
+}
+.popover.align-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.popover.align-start {
+  left: 0;
+}
+.popover.align-end {
+  right: 0;
+}
+
+.caret {
+  position: absolute;
+  top: -6px;
+  width: 12px;
+  height: 12px;
+  background-color: #ffffff;
+  border-left: solid 1px #cbd4da;
+  border-top: solid 1px #cbd4da;
+  transform: rotate(45deg);
+}
+
+.align-center .caret {
+  left: 50%;
+  margin-left: -6px;
+}
+
+.align-start .caret {
+  left: 1.5rem;
+}
+
+.align-end .caret {
+  right: 1.5rem;
+}</style>

package/dist/Components/PopoverButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PopoverButtonProps } from './PopoverButtonProps.js';
+/**
+ * An icon button that toggles a floating popover anchored beneath it, with a
+ * caret pointing back at the button. The popover holds arbitrary content (the
+ * default snippet) and closes on click-outside or Escape.
+ */
+declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "open">;
+type PopoverButton = ReturnType<typeof PopoverButton>;
+export default PopoverButton;

package/dist/Components/PopoverButtonProps.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { icons } from './Icons.js';
+/**
+ * Props for {@link PopoverButton} — an icon button that toggles a floating
+ * popover (with a caret pointing back at the button) holding arbitrary
+ * content. Closes on click-outside or Escape.
+ */
+export interface PopoverButtonProps {
+    /** Icon shown in the trigger button. */
+    icon: keyof typeof icons;
+    /** Accessible label for the trigger button. */
+    label: string;
+    /** Popover contents. */
+    children: Snippet;
+    /** Horizontal alignment of the popover relative to the button. Defaults to `'center'`. */
+    align?: 'center' | 'start' | 'end';
+    /** Drop the trigger's border so it can sit flush inside a grouped bar. */
+    borderless?: boolean;
+    /** Two-way bindable open state. */
+    open?: boolean;
+}

package/dist/Components/PopoverButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/SidebarPanel.svelte

@@ -0,0 +1,85 @@
+<svelte:options runes />
+
+<!--
+@component
+A titled card laid out as a fixed-width menu column beside a main content
+area. Both regions are supplied by the consumer as snippets (`menu` and the
+default `children`), so the component only owns the framing and layout.
+-->
+<script lang="ts">
+	import type { SidebarPanelProps } from './SidebarPanelProps.js';
+
+	let { title, subtitle, menu, children, menuWidth = '14rem' }: SidebarPanelProps = $props();
+</script>
+
+<section class="sidebar-panel">
+	<header class="heading">
+		<h2>{title}</h2>
+		{#if subtitle}
+			<span class="subtitle">{subtitle}</span>
+		{/if}
+	</header>
+
+	<div class="body">
+		<aside
+			class="menu"
+			style="--menu-width: {menuWidth};"
+		>
+			{@render menu()}
+		</aside>
+		<div class="main">
+			{@render children()}
+		</div>
+	</div>
+</section>
+
+<style>.sidebar-panel {
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+}
+
+.heading {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.125rem;
+  padding: 1.5rem;
+  border-bottom: solid 1px #dae0e5;
+}
+.heading h2 {
+  margin: 0;
+  color: #46525b;
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+.heading .subtitle {
+  color: #647d8e;
+  font-size: 0.875rem;
+}
+
+.body {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+}
+
+.menu {
+  width: var(--menu-width, 14rem);
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-right: solid 1px #dae0e5;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}</style>

package/dist/Components/SidebarPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SidebarPanelProps } from './SidebarPanelProps.js';
+/**
+ * A titled card laid out as a fixed-width menu column beside a main content
+ * area. Both regions are supplied by the consumer as snippets (`menu` and the
+ * default `children`), so the component only owns the framing and layout.
+ */
+declare const SidebarPanel: import("svelte").Component<SidebarPanelProps, {}, "">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

package/dist/Components/SidebarPanelProps.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for {@link SidebarPanel} — a titled card with a fixed-width menu
+ * column on the left and a main content area on the right. Generic layout
+ * shell; the consumer supplies both regions as snippets.
+ */
+export interface SidebarPanelProps {
+    /** Heading shown at the top of the panel. */
+    title: string;
+    /** Optional sub-heading shown under the title. */
+    subtitle?: string;
+    /** Left-hand menu column. */
+    menu: Snippet;
+    /** Main content area. */
+    children: Snippet;
+    /** Width of the menu column. Defaults to `'14rem'`. */
+    menuWidth?: string;
+}

package/dist/Components/SidebarPanelProps.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -22,6 +22,12 @@ export { default as Checkbox } from './Components/Checkbox.svelte';
 export type { CheckboxProps } from './Components/CheckboxProps.js';
 export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte';
 export type { CollapsibleCardProps } from './Components/CollapsibleCardProps.js';
+export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';
+export type { CollapsibleMenuGroupProps } from './Components/CollapsibleMenuGroupProps.js';
+export { default as PopoverButton } from './Components/PopoverButton.svelte';
+export type { PopoverButtonProps } from './Components/PopoverButtonProps.js';
+export { default as SidebarPanel } from './Components/SidebarPanel.svelte';
+export type { SidebarPanelProps } from './Components/SidebarPanelProps.js';
 export { default as ConditionBuilder } from './Components/ConditionBuilder/ConditionBuilder.svelte';
 export type { ConditionBuilderProps } from './Components/ConditionBuilder/ConditionBuilderProps.js';
 export { makeGroup, makeLeaf, type Combinator, type ConditionGroup, type ConditionLeaf, type ConditionNode, } from './Components/ConditionBuilder/ConditionTree.js';

package/dist/index.js

@@ -14,6 +14,9 @@ export {} from './Components/BubbleProps.js';
 export { default as Button } from './Components/Button.svelte';
 export { default as Checkbox } from './Components/Checkbox.svelte';
 export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte';
+export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';
+export { default as PopoverButton } from './Components/PopoverButton.svelte';
+export { default as SidebarPanel } from './Components/SidebarPanel.svelte';
 export { default as ConditionBuilder } from './Components/ConditionBuilder/ConditionBuilder.svelte';
 export { makeGroup, makeLeaf, } from './Components/ConditionBuilder/ConditionTree.js';
 export {} from './Components/Contexts/ContextMenuOptionProps.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.12",
+  "version": "0.40.14",
   "publishConfig": {
     "access": "restricted"
   },