sveltacular 0.0.26 → 0.0.28

package/dist/forms/form-header.svelte

@@ -1,10 +1,10 @@
-<script>import Heading from "../typography/heading.svelte";
+<script>import Headline from "../typography/headline.svelte";
 export let title;
 export let level = 4;
 </script>
 
 <div>
-	<Heading {level}>{title}</Heading>
+	<Headline {level}>{title}</Headline>
 </div>
 
 <style>div {

package/dist/forms/form-header.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../types/generic.js';
 declare const __propDef: {
     props: {
         title: string;
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        level?: SectionLevel | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/forms/form.svelte

@@ -1,5 +1,8 @@
 <script>import { createEventDispatcher } from "svelte";
-export let action = "get";
+import Section from "../generic/section/section.svelte";
+export let method = "get";
+export let title = void 0;
+export let action = void 0;
 const dispatch = createEventDispatcher();
 const onSubmit = (e) => {
   e.preventDefault();
@@ -7,6 +10,8 @@ const onSubmit = (e) => {
 };
 </script>
 
-<form {action} on:submit={onSubmit}>
-	<slot />
-</form>
+<Section {title}>
+	<form {method} {action} on:submit={onSubmit}>
+		<slot />
+	</form>
+</Section>

package/dist/forms/form.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        action?: "get" | "post" | "put" | "delete" | undefined;
+        method?: "get" | "post" | "put" | "delete" | undefined;
+        title?: string | undefined;
+        action?: string | undefined;
     };
     events: {
         submit: CustomEvent<void>;

package/dist/forms/list-box/list-box.svelte

@@ -67,7 +67,7 @@ const onInputKeyPress = (e) => {
   }
 };
 const triggerSearch = debounce(async () => {
-  if (search) {
+  if (search && searchable) {
     items = await search(text);
   }
   updateText();
@@ -75,7 +75,7 @@ const triggerSearch = debounce(async () => {
 }, 300);
 const applyFilter = () => {
   const searchText = text.trim().toLowerCase();
-  filteredItems = searchText ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
+  filteredItems = searchText && searchable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
 };
 const clear = () => {
   text = "";

package/dist/generic/divider/divider.svelte

@@ -3,8 +3,7 @@
 <style>hr {
   border: 0;
   height: 0.1rem;
-  background: #333;
-  background-image: linear-gradient(to right, #ccc, #333, #ccc);
+  background: var(--divider-color, rgba(127, 127, 127, 0.5));
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }</style>

package/dist/generic/header/header.svelte

@@ -1,16 +1,18 @@
 <script>import FlexRow from "../../layout/flex-row.svelte";
-import Heading from "../../typography/heading.svelte";
+import Headline from "../../typography/headline.svelte";
 import Subtitle from "../../typography/subtitle.svelte";
-export let level = 1;
-export let title;
+import { getContext } from "svelte";
+const section = getContext("section");
+export let level = section?.level || 2;
+export let title = section?.title || "";
 export let subtitle = "";
 export let underline = false;
 </script>
 
-<header class:underline>
+<header class:underline data-level={level}>
 	<FlexRow>
 		<hgroup>
-			<Heading {level}>{title}</Heading>
+			<Headline {level}>{title}</Headline>
 			{#if subtitle}
 				<Subtitle {level}>{subtitle}</Subtitle>
 			{/if}

package/dist/generic/header/header.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../../types/generic.js';
 declare const __propDef: {
     props: {
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        title: string;
+        level?: SectionLevel | undefined;
+        title?: string | undefined;
         subtitle?: string | undefined;
         underline?: boolean | undefined;
     };

package/dist/generic/section/section.svelte

@@ -1,9 +1,20 @@
-<section>
+<script>import { setContext } from "svelte";
+import Header from "../header/header.svelte";
+export let title = void 0;
+export let level = 2;
+setContext("section", { level, title });
+</script>
+
+<section class="level-{level}">
+	{#if title}
+		<Header />
+	{/if}
 	<slot />
 </section>
 
 <style>section {
   padding: 0;
-  margin: 1rem 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   font-family: var(--base-font-family, sans-serif);
 }</style>

package/dist/generic/section/section.svelte.d.ts

@@ -1,21 +1,9 @@
-/** @typedef {typeof __propDef.props}  SectionProps */
-/** @typedef {typeof __propDef.events}  SectionEvents */
-/** @typedef {typeof __propDef.slots}  SectionSlots */
-export default class Section extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../../types/generic.js';
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        title?: string | undefined;
+        level?: SectionLevel | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type SectionProps = typeof __propDef.props;
+export type SectionEvents = typeof __propDef.events;
+export type SectionSlots = typeof __propDef.slots;
+export default class Section extends SvelteComponent<SectionProps, SectionEvents, SectionSlots> {
+}
 export {};

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export { default as TableFooter } from './tables/table-footer.svelte';
 export { default as TableFooterCell } from './tables/table-footer-cell.svelte';
 export { default as TableFooterRow } from './tables/table-footer-row.svelte';
 export { default as TableRow } from './tables/table-row.svelte';
-export { default as Heading } from './typography/heading.svelte';
+export { default as Headline } from './typography/headline.svelte';
 export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';

package/dist/index.js

@@ -69,7 +69,7 @@ export { default as TableFooterCell } from './tables/table-footer-cell.svelte';
 export { default as TableFooterRow } from './tables/table-footer-row.svelte';
 export { default as TableRow } from './tables/table-row.svelte';
 // Typography
-export { default as Heading } from './typography/heading.svelte';
+export { default as Headline } from './typography/headline.svelte';
 export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';

package/dist/modals/dialog-window.svelte

@@ -1,7 +1,10 @@
 <script>export let size = "md";
+const captureClick = (e) => {
+  e.stopPropagation();
+};
 </script>
 
-<div class={size}>
+<div class={size} on:click={captureClick}>
 	<slot />
 </div>
 

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -1,8 +1,8 @@
-<script>import AngleRightIcon from "../../icons/angle-right-icon.svelte";
-import HomeIcon from "../../icons/home-icon.svelte";
+<script>import HomeIcon from "../../icons/home-icon.svelte";
 export let homeUrl = null;
 export let crumbs = [];
 export let size = "md";
+export let separator = "/";
 const getCrumLabel = (crumb) => {
   if (typeof crumb === "string")
     return crumb;
@@ -12,8 +12,8 @@ const getCrumLabel = (crumb) => {
 
 <nav class={size}>
 	{#if homeUrl}
-		<li class="icon">
-			<a href={homeUrl} class="home"><HomeIcon /></a>
+		<li class="home">
+			<a href={homeUrl}><HomeIcon /></a>
 		</li>
 	{/if}
 	{#each crumbs as crumb, i}
@@ -27,9 +27,7 @@ const getCrumLabel = (crumb) => {
 			</li>
 		{/if}
 		{#if i < crumbs.length - 1}
-			<li class="icon">
-				<AngleRightIcon />
-			</li>
+			<li class="separator">{separator}</li>
 		{/if}
 	{/each}
 </nav>
@@ -38,44 +36,41 @@ const getCrumLabel = (crumb) => {
   display: flex;
   align-items: center;
   list-style: none;
+  gap: 0.5rem;
   padding: 0;
   margin: 0;
   line-height: 1.5rem;
   font-family: var(--breadcrumbs-font-family, sans-serif);
 }
 nav li {
-  display: flex;
-  align-items: center;
-  vertical-align: middle;
-  margin-left: 0.5rem;
   color: var(--breadcrumbs-fg, #333);
+  padding: 0;
+  margin: 0;
 }
 nav li a {
   color: var(--breadcrumbs-link-fg, #333);
   text-decoration: none;
+  width: 100%;
 }
 nav li a:hover {
   color: var(--breadcrumbs-link-hover-fg, black);
   text-decoration: underline;
 }
-nav li a.home {
-  width: 100%;
-}
-nav li:first-child {
-  margin-left: 0;
-}
-nav li.icon {
-  padding-top: 2px;
-}
 nav.sm li {
   font-size: 0.75rem;
-  min-width: 12px;
+}
+nav.sm li.home {
+  width: 12px;
 }
 nav.md li {
   font-size: 0.875rem;
-  min-width: 14px;
+}
+nav.md li.home {
+  width: 14px;
 }
 nav.lg li {
   font-size: 1rem;
-  min-width: 16px;
+}
+nav.lg li.home {
+  width: 16px;
 }</style>

package/dist/navigation/breadcrumbs/breadcrumbs.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
             href?: string | undefined;
         })[] | undefined;
         size?: "sm" | "md" | "lg" | undefined;
+        separator?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/types/generic.d.ts

@@ -0,0 +1 @@
+export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/types/generic.js

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

package/dist/typography/headline.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../types/generic.js';
+declare const __propDef: {
+    props: {
+        transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+        level?: SectionLevel | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadlineProps = typeof __propDef.props;
+export type HeadlineEvents = typeof __propDef.events;
+export type HeadlineSlots = typeof __propDef.slots;
+export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.26",
+	"version": "0.0.28",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",

package/dist/typography/heading.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeadingProps = typeof __propDef.props;
-export type HeadingEvents = typeof __propDef.events;
-export type HeadingSlots = typeof __propDef.slots;
-export default class Heading extends SvelteComponent<HeadingProps, HeadingEvents, HeadingSlots> {
-}
-export {};