sveltacular 0.0.34 → 0.0.36

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

@@ -64,10 +64,10 @@ label .checkbox .checkmark {
   left: 0;
   width: 0;
   height: 0;
-  background-color: var(--form-input-checked-bg, #3182ce);
-  color: var(--form-input-checked-fg, white);
-  fill: var(--form-input-checked-bg, #3182ce);
-  stroke: var(--form-input-checked-fg, white);
+  background-color: var(--form-input-selected-bg, #3182ce);
+  color: var(--form-input-selected-fg, white);
+  fill: var(--form-input-selected-bg, #3182ce);
+  stroke: var(--form-input-selected-fg, white);
   transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
 }
 label input {

package/dist/forms/file-area/file-area.svelte

@@ -1,25 +1,42 @@
 <script>import UploadIcon from "../../icons/upload-icon.svelte";
 import { createEventDispatcher } from "svelte";
-let disabled = false;
+export let selectedFiles = [];
+export let disabled = false;
+export let fileLimit = 1;
+export let fileMimePattern = void 0;
 let isDragging = false;
 const dispatch = createEventDispatcher();
+const filterFiles = (files) => {
+  if (!fileMimePattern)
+    return files;
+  return [...files].filter((file) => {
+    if (!file.type)
+      return false;
+    if (!fileMimePattern)
+      return true;
+    if (typeof fileMimePattern === "string")
+      return file.type.startsWith(fileMimePattern);
+    return file.type.match(fileMimePattern);
+  });
+};
+const addFiles = async (files) => {
+  if (!files.length)
+    return;
+  selectedFiles = [...files, selectedFiles].flat().slice(0, fileLimit);
+  dispatch("filesSelected", selectedFiles);
+};
 const selectFiles = async (e) => {
   const target = e.target;
   if (!target?.files || !target.files.length)
     return;
-  const files = [...target.files].filter((file) => file.type.startsWith("image/"));
-  if (!files.length)
-    return;
-  dispatch("filesSelected", files);
+  addFiles(filterFiles([...target.files]));
 };
 const dropFiles = async (e) => {
   dragStop(e);
   if (!e.dataTransfer)
     return;
-  const files = e.dataTransfer.items ? [...e.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((item) => !!item) : e.dataTransfer.files;
-  if (!files.length)
-    return;
-  dispatch("filesSelected", files);
+  const files = e.dataTransfer.items ? [...e.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()) : e.dataTransfer.files;
+  addFiles(filterFiles(files));
 };
 const dragStart = (e) => {
   e.preventDefault();
@@ -31,9 +48,20 @@ const dragStop = (e) => {
   e.stopPropagation();
   isDragging = false;
 };
+$:
+  filesClass = selectedFiles.length ? "has-files" : "no-files";
+$:
+  enabledClass = disabled ? "disabled" : "";
+$:
+  draggingClass = isDragging ? "isDragging" : "";
+$:
+  filesSelectedText = selectedFiles.length ? `${selectedFiles.length} file${selectedFiles.length > 1 ? "s" : ""} selected` : "";
 </script>
 
-<div class="dropzone" class:disabled class:isDragging>
+<div
+	class="dropzone {filesClass} {enabledClass} {draggingClass}"
+	data-file-count={selectedFiles.length}
+>
 	<label
 		on:drop={dropFiles}
 		on:dragenter={dragStart}
@@ -51,6 +79,9 @@ const dragStop = (e) => {
 			{:else}
 				<span>Drop file or click to select</span>
 			{/if}
+			{#if filesSelectedText}
+				<span class="file-count">{filesSelectedText}</span>
+			{/if}
 		</div>
 	</label>
 </div>
@@ -65,9 +96,10 @@ const dragStop = (e) => {
   align-items: center;
   width: 100%;
   height: 100%;
-  border: 2px dashed #ccc;
+  border: 2px dashed var(--form-input-border, black);
+  background-color: var(--form-input-bg, white);
+  color: var(--form-input-fg, black);
   border-radius: 0.25rem;
-  color: #ccc;
   cursor: pointer;
 }
 .dropzone.disabled {
@@ -75,8 +107,8 @@ const dragStop = (e) => {
   cursor: not-allowed;
 }
 .dropzone.isDragging {
-  background-color: #bbf;
-  color: #333;
+  background-color: var(--form-input-selected-bg, #3182ce);
+  color: var(--form-input-selected-fg, white);
 }
 .dropzone label {
   display: flex;
@@ -90,9 +122,17 @@ const dragStop = (e) => {
 }
 .dropzone label .icon {
   width: 50%;
+  opacity: 0.5;
 }
 .dropzone label .text {
   font-size: 1rem;
   letter-spacing: 0.075rem;
   margin-top: 1rem;
+  opacity: 0.5;
+  text-align: center;
+}
+.dropzone label .file-count {
+  display: block;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
 }</style>

package/dist/forms/file-area/file-area.svelte.d.ts

@@ -1,6 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        selectedFiles?: (FileList | File[]) | undefined;
+        disabled?: boolean | undefined;
+        fileLimit?: number | undefined;
+        fileMimePattern?: string | RegExp | undefined;
+    };
     events: {
         filesSelected: CustomEvent<FileList | File[]>;
     } & {

package/dist/forms/form-field.svelte

@@ -19,5 +19,4 @@ $:
 <style>div {
   margin-bottom: 1rem;
   margin-right: 1rem;
-  font-family: var(--base-font-family, sans-serif);
 }</style>

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

@@ -11,6 +11,6 @@ $:
   decimals = allowCents ? 2 : 0;
 </script>
 
-<NumberBox bind:value {symbol} {decimals} {placeholder} {size} {min} {max} {step}
+<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
 	><slot /></NumberBox
 >

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

@@ -1,4 +1,4 @@
-<script>import { roundToDecimals } from "../../helpers/round-to-decimals.js";
+<script>import { formatNumber, roundToDecimals } from "../../helpers/round-to-decimals.js";
 import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
@@ -7,12 +7,12 @@ export let value = 0;
 export let placeholder = "";
 export let size = "full";
 export let type = "number";
-export let step = 1;
 export let min = 0;
 export let max = 1e6;
 export let decimals = 0;
 export let prefix = null;
 export let suffix = null;
+export let step = 1;
 const valueChanged = () => {
   value = roundToDecimals(value, decimals);
 };
@@ -80,8 +80,8 @@ const valueChanged = () => {
   line-height: 2rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  background-color: var(--base-accent-bg, #ccc);
-  color: var(--base-accent-fg, black);
+  background-color: var(--form-input-accent-bg, #ccc);
+  color: var(--form-input-accent-fg, black);
 }
 .input .prefix {
   border-right: 1px solid var(--form-input-border, black);

package/dist/forms/number-box/number-box.svelte.d.ts

@@ -6,12 +6,12 @@ declare const __propDef: {
         placeholder?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
         type?: ("number" | "currency") | undefined;
-        step?: number | undefined;
         min?: number | undefined;
         max?: number | undefined;
         decimals?: number | undefined;
         prefix?: string | null | undefined;
         suffix?: string | null | undefined;
+        step?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/forms/radio-group/radio-box.svelte

@@ -48,9 +48,9 @@ label .checkbox .checkmark {
   display: block;
   width: 0;
   height: 0;
-  color: var(--form-input-checked-fg, white);
-  fill: var(--form-input-checked-bg, #3182ce);
-  stroke: var(--form-input-checked-fg, white);
+  color: var(--form-input-selected-fg, white);
+  fill: var(--form-input-selected-bg, #3182ce);
+  stroke: var(--form-input-selected-fg, white);
   transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
 }
 label input {
@@ -58,7 +58,7 @@ label input {
   height: 0;
 }
 label input:checked + .checkbox {
-  background-color: var(--form-input-checked-bg, #3182ce);
+  background-color: var(--form-input-selected-bg, #3182ce);
 }
 label input:checked + .checkbox .checkmark {
   width: 100%;

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

@@ -1,17 +1,12 @@
 <script>import { uniqueId } from "../../helpers/unique-id.js";
 import { createEventDispatcher } from "svelte";
 export let checked = false;
-export let unCheckedColor = "#ccc";
-export let checkedColor = "#007bff";
 export let size = "full";
 const id = uniqueId();
 const dispatch = createEventDispatcher();
 </script>
 
-<label
-	class="switch-box {checked ? 'checked' : ''} {size}"
-	style={`--checked-color: ${checkedColor}; --unchecked-color: ${unCheckedColor};`}
->
+<label class="switch-box {checked ? 'checked' : ''} {size}">
 	<input type="checkbox" bind:checked on:change={() => dispatch('change', checked)} {id} />
 	<!-- svelte-ignore a11y-interactive-supports-focus -->
 	<span class="switch">
@@ -48,10 +43,10 @@ label .slider {
   background-color: var(--form-input-fg, black);
 }
 label.checked .switch {
-  background-color: var(--form-input-checked-bg, #3182ce);
+  background-color: var(--form-input-selected-bg, #3182ce);
 }
 label.checked .slider {
-  background-color: var(--form-input-checked-fg, white);
+  background-color: var(--form-input-selected-fg, white);
 }
 label.xl .switch {
   width: 4rem;

package/dist/forms/switch-box/switch-box.svelte.d.ts

@@ -3,8 +3,6 @@ import type { FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         checked?: boolean | undefined;
-        unCheckedColor?: string | undefined;
-        checkedColor?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
     };
     events: {

package/dist/generic/card/card.svelte

@@ -32,7 +32,6 @@ const onClick = () => {
   background-color: #fff;
   color: #555;
   transition: transform 0.2s ease-in-out;
-  font-family: var(--base-font-family, sans-serif);
 }
 li strong {
   display: block;

package/dist/generic/date/date-time.svelte

@@ -65,9 +65,3 @@ $:
 </script>
 
 <time {datetime}>{text}</time>
-
-<style>
-	time {
-		font-family: var(--base-font-family, sans-serif);
-	}
-</style>

package/dist/generic/link/link.svelte

@@ -33,15 +33,4 @@ export let display = "inline";
 }
 .link[href].underline-hover:hover {
   text-decoration: underline;
-}
-
-a {
-  color: var(--link-fg, #77b9ff);
-  cursor: pointer;
-}
-a:visited {
-  color: var(--link-visited-fg, #459fff);
-}
-a:hover {
-  color: var(--link-hover-fg, #d00);
 }</style>

package/dist/generic/menu/menu.svelte

@@ -64,9 +64,6 @@ $:
 <style>.menu {
   position: relative;
   width: 8rem;
-  background: white;
-  color: #000;
-  border: 1px solid black;
   list-style: none;
   z-index: 999;
   margin: 0;
@@ -75,6 +72,9 @@ $:
   max-height: 15rem;
   overflow-y: auto;
   font-family: var(--base-font-family, sans-serif);
+  border: 1px solid var(--form-input-border, black);
+  background-color: var(--form-input-bg, white);
+  color: var(--form-input-fg, black);
 }
 .menu.closed {
   display: none;
@@ -101,13 +101,13 @@ $:
 .menu li.instructions {
   padding: 0.5rem 1rem;
   font-style: italic;
-  color: #b7b7b7;
+  color: var(--form-input-placeholder, #aaa);
   cursor: pointer;
 }
 .menu li div:hover,
 .menu li div.selected {
-  background: #4e4eff;
-  color: #fff;
+  background: var(--form-input-selected-bg, #003c75);
+  color: var(--form-input-selected-fg, white);
 }
 .menu li .check {
   display: inline-block;

package/dist/generic/notice/notice.svelte

@@ -0,0 +1,159 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let title = void 0;
+export let style = "info";
+export let size = "full";
+export let dismissable = false;
+let visible = true;
+let fading = false;
+const goodbye = () => {
+  dispatch("dismiss");
+  fading = true;
+  setTimeout(() => {
+    visible = false;
+    dispatch("hidden");
+  }, 500);
+};
+const onClick = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  goodbye();
+};
+</script>
+
+<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
+	{#if $$slots.icon}
+		<div class="icon">
+			<slot name="icon" />
+		</div>
+	{/if}
+	<div class="content">
+		{#if title}
+			<strong>{title}</strong>
+		{/if}
+		<div class="message">
+			<slot />
+		</div>
+	</div>
+
+	{#if dismissable}
+		<div class="dismiss">
+			<button type="button" on:click={onClick}>X</button>
+		</div>
+	{/if}
+</div>
+
+<style>.notice {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  padding: 1rem;
+  border-radius: 0.2rem;
+  border: 2px solid var(--base-fg, black);
+  background: var(--base-bg, white);
+  color: var(--base-fg, black);
+  position: relative;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
+}
+.notice.hidden {
+  display: none;
+}
+.notice.fading {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.notice .icon {
+  position: relative;
+  width: 3rem;
+  min-width: 3rem;
+  height: 100%;
+}
+.notice .content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.notice.info {
+  background-color: rgb(225, 225, 225);
+  color: rgb(78, 78, 78);
+  border-color: rgb(144, 144, 144);
+}
+.notice.attention {
+  background-color: rgb(255, 248, 219);
+  color: rgb(117, 82, 0);
+  border-color: rgb(181, 129, 5);
+}
+.notice.success {
+  background-color: rgb(229, 248, 230);
+  color: rgb(0, 100, 0);
+  border-color: rgb(30, 188, 47);
+}
+.notice.error {
+  background-color: rgb(255, 232, 230);
+  color: rgb(100, 0, 0);
+  border-color: rgb(218, 40, 40);
+}
+.notice.xl {
+  width: 60rem;
+}
+.notice.lg {
+  width: 40rem;
+}
+.notice.lg .icon {
+  width: 2.5rem;
+  min-width: 2.5rem;
+}
+.notice.lg .content {
+  font-size: 0.95rem;
+}
+.notice.md {
+  width: 25rem;
+  border-width: 1px;
+  border-radius: 3px;
+}
+.notice.md .icon {
+  width: 2rem;
+  min-width: 2rem;
+}
+.notice.md .content {
+  font-size: 0.85rem;
+}
+.notice.sm {
+  width: 15rem;
+  border-width: 1px;
+  border-radius: 2px;
+}
+.notice.sm .icon {
+  width: 1.5rem;
+  min-width: 1.5rem;
+}
+.notice.sm .content {
+  font-size: 0.75rem;
+}
+
+button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: 1rem;
+  cursor: pointer;
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+button:hover {
+  font-weight: bold;
+}</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        style?: ("outline" | "attention" | "success" | "error" | "info") | undefined;
+        size?: ("sm" | "md" | "lg" | "xl" | "full") | undefined;
+        dismissable?: boolean | undefined;
+    };
+    events: {
+        dismiss: CustomEvent<void>;
+        hidden: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export type NoticeProps = typeof __propDef.props;
+export type NoticeEvents = typeof __propDef.events;
+export type NoticeSlots = typeof __propDef.slots;
+export default class Notice extends SvelteComponent<NoticeProps, NoticeEvents, NoticeSlots> {
+}
+export {};

package/dist/generic/panel/panel.svelte

@@ -13,8 +13,9 @@ export let border = true;
   position: relative;
   margin-bottom: 1rem;
   padding: 1rem;
-  border: soild 1px rgba(100, 100, 100, 0.5);
+  border: soild 1px;
   border-radius: 0.5rem;
+  border-color: var(--base-fg, #ccc);
   font-family: var(--base-font-family, sans-serif);
 }
 fieldset.no-border {
@@ -25,5 +26,6 @@ fieldset legend {
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1rem;
+  color: var(--base-fg, #ccc);
   font-family: var(--base-headline-font-family, sans-serif);
 }</style>

package/dist/generic/scorecard/scorecard.svelte

@@ -23,6 +23,7 @@ $:
 <style>button {
   display: inline-block;
   margin-right: 1rem;
+  margin-bottom: 1rem;
   padding: 0;
   border: none;
   background: none;

package/dist/helpers/round-to-decimals.d.ts

@@ -6,3 +6,7 @@
  * @returns
  */
 export declare const roundToDecimals: (value: number, decimals: number) => number;
+/**
+ * Format a number to a string with a specific number of decimals
+ */
+export declare const formatNumber: (value: number, decimals: number) => string;

package/dist/helpers/round-to-decimals.js

@@ -10,3 +10,9 @@ export const roundToDecimals = (value, decimals) => {
         return Math.round(value);
     return Number(Math.round(Number(`${value}e${decimals}`)) + `e-${decimals}`);
 };
+/**
+ * Format a number to a string with a specific number of decimals
+ */
+export const formatNumber = (value, decimals) => {
+    return roundToDecimals(value, decimals).toLocaleString();
+};

package/dist/images/image.svelte

@@ -33,13 +33,13 @@ $:
 	{/if}
 </div>
 
-<style>div {
+<style>.image {
   position: relative;
   width: 100%;
   height: 100%;
   flex-grow: 1;
 }
-div .caption {
+.image .caption {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -48,7 +48,7 @@ div .caption {
   background: rgba(0, 0, 0, 0.5);
   color: white;
 }
-div picture {
+.image picture {
   display: block;
   width: 100%;
   height: 100%;
@@ -57,7 +57,7 @@ div picture {
   object-fit: contain;
   object-position: center;
 }
-div img {
+.image img {
   display: block;
   width: 100%;
   height: 100%;
@@ -66,11 +66,11 @@ div img {
   object-fit: contain;
   object-position: center;
 }
-div.left picture,
-div.left img {
+.image.left picture,
+.image.left img {
   object-position: left;
 }
-div.right picture,
-div.right img {
+.image.right picture,
+.image.right img {
   object-position: right;
 }</style>

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Panel } from './generic/panel/panel.svelte';
 export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
+export { default as Notice } from './generic/notice/notice.svelte';
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';

package/dist/index.js

@@ -36,6 +36,7 @@ export { default as Panel } from './generic/panel/panel.svelte';
 export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
+export { default as Notice } from './generic/notice/notice.svelte';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';

package/dist/modals/dialog-window.svelte

@@ -4,6 +4,8 @@ const captureClick = (e) => {
 };
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class={size} on:click={captureClick}>
 	<slot />
 </div>
@@ -34,5 +36,11 @@ div.xl {
 }
 div.full {
   width: 100%;
-  max-width: none;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  div {
+    max-width: 100%;
+  }
 }</style>

package/dist/navigation/app-bar/app-bar.svelte

@@ -28,6 +28,15 @@ setContext("app-bar", {
   right: 0;
   z-index: 999;
   height: 3rem;
+  font-family: var(--base-font-family, sans-serif);
+}
+header a {
+  color: var(--nav-link, rgb(33, 150, 243));
+  text-decoration: none;
+}
+header a:hover {
+  color: var(--nav-link-hover, rgb(66, 165, 245));
+  text-decoration: underline;
 }
 header.fixed {
   position: fixed;

package/dist/navigation/app-bar/app-logo.svelte

@@ -23,8 +23,8 @@ div a {
   width: 100%;
   height: 100%;
   text-decoration: none;
-  color: var(--nav-link-fg, #333);
+  color: var(--nav-link, #333);
 }
 div a:hover {
-  color: var(--nav-link-hover-fg, #333);
+  color: var(--nav-link-hover, #333);
 }</style>

package/dist/navigation/app-bar/app-nav-item.svelte

@@ -29,7 +29,7 @@ const click = () => {
   align-items: center;
   height: 100%;
   font-family: var(--nav-font-family, sans-serif);
-  color: var(--nav-link-fg, black);
+  color: var(--nav-link, black);
   text-decoration: none;
   appearance: none;
   border: none;
@@ -37,14 +37,14 @@ const click = () => {
   cursor: pointer;
 }
 button:hover {
-  color: var(--nav-link-hover-fg, black);
+  color: var(--nav-link-hover, black);
   text-decoration: underline;
 }
 button .icon {
   width: 100%;
   height: 1.5rem;
-  fill: var(--nav-link-fg, black);
-  stroke: var(--nav-link-fg, black);
+  fill: var(--nav-link, black);
+  stroke: var(--nav-link, black);
 }
 
 @media (max-width: 640px) {
@@ -57,7 +57,8 @@ button .icon {
   }
   button.open:hover {
     text-decoration: none;
-    background-color: #bbb;
+    background-color: var(--nav-menu-hover-bg, #ddd);
+    color: var(--nav-menu-hover-fg, black);
   }
   button.open .title {
     flex-grow: 1;

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -40,21 +40,19 @@ const getCrumLabel = (crumb) => {
   padding: 0;
   margin: 0;
   line-height: 1.5rem;
-  font-family: var(--breadcrumbs-font-family, sans-serif);
-  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
 }
 nav li {
-  color: var(--breadcrumbs-fg, #bbb);
+  color: var(--breadcrumbs-fg, #555);
   padding: 0;
   margin: 0;
 }
 nav li a {
-  color: var(--breadcrumbs-link-fg, #bbb);
+  color: var(--breadcrumbs-fg, #555);
   text-decoration: none;
   width: 100%;
 }
 nav li a:hover {
-  color: var(--breadcrumbs-link-hover-fg, white);
+  color: var(--breadcrumbs-hover, #955);
   text-decoration: underline;
 }
 nav.sm li {

package/dist/navigation/tabs/tab-context.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="svelte" />
+import type { TabStyle } from '../../types/generic.js';
 import type { Writable } from 'svelte/store';
 export interface TabContext {
     active: Writable<string | null>;
+    style: TabStyle;
+    squared: boolean;
 }
 export declare const tabContext = "tabContext";

package/dist/navigation/tabs/tab-group.svelte

@@ -1,8 +1,12 @@
 <script>import { writable } from "svelte/store";
 import { setContext } from "svelte";
 import { tabContext } from "./tab-context.js";
+export let style = "traditional";
+export let squared = false;
 const ctx = {
-  active: writable(null)
+  active: writable(null),
+  style,
+  squared
 };
 setContext(tabContext, ctx);
 </script>

package/dist/navigation/tabs/tab-group.svelte.d.ts

@@ -1,6 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { TabStyle } from '../../types/generic.js';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        style?: TabStyle | undefined;
+        squared?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/navigation/tabs/tab.svelte

@@ -1,27 +1,33 @@
-<script>import { createEventDispatcher, getContext } from "svelte";
+<script>import { createEventDispatcher, getContext, onDestroy } from "svelte";
 import { tabContext } from "./tab-context.js";
 export let title;
 export let active = false;
 const dispatch = createEventDispatcher();
 const ctx = getContext(tabContext);
+const tabStyle = ctx.style || "traditional";
 const selectThisTab = () => {
   dispatch("selectTab", title);
   ctx.active.set(title);
 };
 if (active)
   selectThisTab();
-ctx.active.subscribe((value) => {
+const unsubscribe = ctx.active.subscribe((value) => {
   active = value === title;
 });
+onDestroy(() => {
+  unsubscribe();
+});
+$:
+  classes = `${active ? "active" : "inactive"} ${tabStyle} ${ctx.squared ? "squared" : "rounded"}`;
 </script>
 
-<section class:active>
-	<header>
+<section class={classes}>
+	<header class="tabTitle">
 		<button type="button" on:click={selectThisTab}>
 			{title}
 		</button>
 	</header>
-	<div>
+	<div class="tabContent">
 		{#if active}
 			<slot />
 		{/if}
@@ -31,59 +37,95 @@ ctx.active.subscribe((value) => {
 <style>section {
   display: inline;
 }
-section header {
+
+.tabTitle {
   display: inline-block;
   cursor: pointer;
-  height: 2rem;
+  height: 2.2rem;
   overflow: hidden;
-  border-width: 0.1rem 0.1rem 0 0.1rem;
-  border-style: solid;
-  border-radius: 0.5rem 0.5rem 0 0;
-  margin-right: 0.5rem;
-  border-color: transparent;
   position: relative;
   z-index: 2;
-  background: var(--tab-bg, transparent);
-  color: var(--tab-fg, #fff);
 }
-section header button {
+.tabTitle button {
   appearance: none;
   background: transparent;
-  border: none;
+  border-style: solid;
+  border-width: 0 0 0.2rem 0;
+  border-color: transparent;
+  border-radius: 0.5rem 0.5rem 0 0;
   color: inherit;
-  padding: 0;
   cursor: pointer;
   width: 100%;
   height: 100%;
   font-size: 1rem;
-  line-height: 2rem;
+  line-height: 1.8rem;
+  height: 2.2rem;
   font-weight: 300;
   padding: 0 1rem;
 }
-section header button:focus {
+.tabTitle button:focus {
   outline: none;
 }
-section header:hover {
-  background: var(--tab-hover-bg, transparent);
-  color: var(--tab-hover-fg, #fbb);
-}
-section div {
+
+.tabContent {
   display: none;
   width: 100%;
   position: absolute;
   top: 2rem;
   left: 0;
-  border-top: solid 0.2rem var(--tab-active-bg, #eee);
+  border-top: solid 0.2rem var(--tab-content-border, rgb(220, 220, 230));
   padding-top: 1rem;
   z-index: 1;
   font-size: 1rem;
 }
-section.active header {
+
+.active button {
   font-weight: 700;
-  background: var(--tab-active-bg, #eee);
-  color: var(--tab-active-fg, #000);
   cursor: default;
 }
-section.active div {
+
+.inactive button {
+  color: var(--tab-inactive-fg, #999);
+}
+.inactive button:hover {
+  color: var(--tab-hover-fg, #ccc);
+}
+
+.active .tabContent {
   display: block;
+}
+
+.squared button {
+  border-radius: 0.2rem 0.2rem 0 0;
+}
+
+.traditional.inactive button {
+  background: var(--tab-traditional-inactive-bg, transparent);
+  color: var(--tab-traditional-inactive-fg, rgb(100, 100, 100));
+}
+.traditional.inactive button:hover {
+  background: var(--tab-traditional-hover-bg, transparent);
+  color: var(--tab-traditional-hover-fg, rgb(160, 160, 160));
+}
+.traditional.active button {
+  background: var(--tab-traditional-active-bg, rgb(220, 220, 230));
+  color: var(--tab-traditional-active-fg, rgb(51, 51, 51));
+}
+
+.underline.inactive button {
+  background: var(--tab-underline-inactive-bg, transparent);
+  color: var(--tab-underline-inactive-fg, rgb(100, 100, 100));
+}
+.underline.inactive button:hover {
+  background: var(--tab-underline-hover-bg, transparent);
+  color: var(--tab-underline-hover-fg, rgb(150, 150, 150));
+}
+.underline.active button {
+  color: var(--tab-underline-active-fg, rgb(255, 134, 78));
+  border-color: var(--tab-underline-active-fg, rgb(255, 134, 78));
+}
+
+.outline.active button {
+  border-width: 0.1rem 0.1rem 0 0.1rem;
+  border-color: var(--tab-content-border, rgb(220, 220, 230));
 }</style>

package/dist/types/generic.d.ts

@@ -1,3 +1,4 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type HttpProtocol = 'http' | 'https';
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+export type TabStyle = 'traditional' | 'underline' | 'outline';

package/package.json

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