@dosgato/dialog 0.0.19 → 0.0.21

package/FieldText.svelte.d.ts

@@ -15,15 +15,16 @@ declare const __propDef: {
         required?: boolean;
         use?: HTMLActionEntry[];
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldTextProps = typeof __propDef.props;
-export declare type FieldTextEvents = typeof __propDef.events;
-export declare type FieldTextSlots = typeof __propDef.slots;
+export type FieldTextProps = typeof __propDef.props;
+export type FieldTextEvents = typeof __propDef.events;
+export type FieldTextSlots = typeof __propDef.slots;
 export default class FieldText extends SvelteComponentTyped<FieldTextProps, FieldTextEvents, FieldTextSlots> {
 }
 export {};

package/FieldTextArea.svelte

@@ -1,4 +1,5 @@
-<script>import { passActions } from '@txstate-mws/svelte-components';
+<script>import { getDescribedBy } from './';
+import { passActions } from '@txstate-mws/svelte-components';
 import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
@@ -14,10 +15,11 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
 </FieldStandard>
 
 <style>

package/FieldTextArea.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         required?: boolean;
         use?: HTMLActionEntry[];
         inputelement?: HTMLTextAreaElement;
+        helptext?: string | undefined;
     };
     events: {
         paste: ClipboardEvent;
@@ -22,9 +23,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldTextAreaProps = typeof __propDef.props;
-export declare type FieldTextAreaEvents = typeof __propDef.events;
-export declare type FieldTextAreaSlots = typeof __propDef.slots;
+export type FieldTextAreaProps = typeof __propDef.props;
+export type FieldTextAreaEvents = typeof __propDef.events;
+export type FieldTextAreaSlots = typeof __propDef.slots;
 export default class FieldTextArea extends SvelteComponentTyped<FieldTextAreaProps, FieldTextAreaEvents, FieldTextAreaSlots> {
 }
 export {};

package/FileIcon.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FileIconProps = typeof __propDef.props;
-export declare type FileIconEvents = typeof __propDef.events;
-export declare type FileIconSlots = typeof __propDef.slots;
+export type FileIconProps = typeof __propDef.props;
+export type FileIconEvents = typeof __propDef.events;
+export type FileIconSlots = typeof __propDef.slots;
 export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
 }
 export {};

package/Form.svelte

@@ -13,8 +13,8 @@ export let preload = undefined;
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting>
-  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} />
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
+  <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
   <div class="form-errors" aria-live='assertive'>
     {#if messages.length}
       <ul>
@@ -40,7 +40,7 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
     padding: 0;
   }
   .form-errors {
-    color: #9a3332;
+    color: var(--dg-danger-bg, #9a3332);
     padding: 1em;
   }
 </style>

package/Form.svelte.d.ts

@@ -6,9 +6,9 @@ declare class __sveltets_Render<T, F> {
     };
     slots(): any;
 }
-export declare type FormProps<T, F> = ReturnType<__sveltets_Render<T, F>['props']>;
-export declare type FormEvents<T, F> = ReturnType<__sveltets_Render<T, F>['events']>;
-export declare type FormSlots<T, F> = ReturnType<__sveltets_Render<T, F>['slots']>;
+export type FormProps<T, F> = ReturnType<__sveltets_Render<T, F>['props']>;
+export type FormEvents<T, F> = ReturnType<__sveltets_Render<T, F>['events']>;
+export type FormSlots<T, F> = ReturnType<__sveltets_Render<T, F>['slots']>;
 export default class Form<T, F> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
 }
 export {};

package/FormDialog.svelte

@@ -0,0 +1,34 @@
+<script>import contentSave from '@iconify-icons/mdi/content-save';
+import { createEventDispatcher, setContext } from 'svelte';
+import { CHOOSER_API_CONTEXT, Form } from './';
+import Dialog from './Dialog.svelte';
+export let submit;
+export let validate = undefined;
+export let store = undefined;
+export let chooserClient = undefined;
+export let autocomplete = undefined;
+export let name = undefined;
+export let title = '';
+export let icon = undefined;
+export let size = 'normal';
+export let preload = undefined;
+const dispatch = createEventDispatcher();
+async function onSubmit() {
+    const resp = await store.submit();
+    if (resp.success)
+        dispatch('saved', resp.data);
+}
+setContext(CHOOSER_API_CONTEXT, chooserClient);
+</script>
+
+<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size}>
+  <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:saved let:valid let:invalid let:validating let:submitting let:data>
+    <slot {messages} {saved} {validating} {submitting} {valid} {invalid} {data} />
+  </Form>
+</Dialog>
+
+<style>
+  :global(:root) {
+    --ck-z-default: var(--popup-z, 3001);
+  }
+</style>

package/FormDialog.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconifyIcon } from '@iconify/svelte';
+import type { Feedback, FormStore, SubmitResponse } from '@txstate-mws/svelte-forms';
+declare class __sveltets_Render<T> {
+    props(): {
+        submit: (state: T) => Promise<SubmitResponse<T>>;
+        validate?: (state: T) => Promise<Feedback[]>;
+        store?: FormStore<T>;
+        chooserClient?: any;
+        autocomplete?: string;
+        name?: string;
+        title?: string;
+        icon?: IconifyIcon;
+        size?: "small" | "normal" | "tiny" | "large";
+        preload?: T;
+    };
+    events(): {
+        saved: CustomEvent<T>;
+        escape: CustomEvent<undefined>;
+    };
+    slots(): {
+        default: {
+            messages: any;
+            saved: any;
+            validating: any;
+            submitting: any;
+            valid: any;
+            invalid: any;
+            data: any;
+        };
+    };
+}
+export type FormDialogProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type FormDialogEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type FormDialogSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FormDialog<T> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
+}
+export {};

package/Icon.svelte.d.ts

@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type IconProps = typeof __propDef.props;
-export declare type IconEvents = typeof __propDef.events;
-export declare type IconSlots = typeof __propDef.slots;
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
 export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
 }
 export {};

package/InlineMessage.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InlineMessageProps = typeof __propDef.props;
-export declare type InlineMessageEvents = typeof __propDef.events;
-export declare type InlineMessageSlots = typeof __propDef.slots;
+export type InlineMessageProps = typeof __propDef.props;
+export type InlineMessageEvents = typeof __propDef.events;
+export type InlineMessageSlots = typeof __propDef.slots;
 export default class InlineMessage extends SvelteComponentTyped<InlineMessageProps, InlineMessageEvents, InlineMessageSlots> {
 }
 export {};

package/InlineMessages.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InlineMessagesProps = typeof __propDef.props;
-export declare type InlineMessagesEvents = typeof __propDef.events;
-export declare type InlineMessagesSlots = typeof __propDef.slots;
+export type InlineMessagesProps = typeof __propDef.props;
+export type InlineMessagesEvents = typeof __propDef.events;
+export type InlineMessagesSlots = typeof __propDef.slots;
 export default class InlineMessages extends SvelteComponentTyped<InlineMessagesProps, InlineMessagesEvents, InlineMessagesSlots> {
 }
 export {};

package/Input.svelte

@@ -1,5 +1,6 @@
 <script>import { passActions } from '@txstate-mws/svelte-components';
 import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
+import { isNotBlank } from 'txstate-utils';
 let className = '';
 export { className as class };
 export let name;
@@ -13,6 +14,7 @@ export let step = undefined;
 export let id = undefined;
 export let disabled = false;
 export let messagesid = undefined;
+export let helptextid = undefined;
 export let valid = false;
 export let invalid = false;
 export let onChange;
@@ -20,6 +22,7 @@ export let onBlur;
 export let onSelect = undefined;
 export let use = [];
 export let inputelement = undefined;
+$: descby = [helptextid, messagesid].filter(isNotBlank).join(' ');
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;
@@ -33,4 +36,4 @@ $: minStr = resolveMinMax(min);
 $: maxStr = resolveMinMax(max);
 </script>
 
-<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>
+<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/Input.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         id?: string | undefined;
         disabled?: boolean;
         messagesid?: string | undefined;
+        helptextid?: string | undefined;
         valid?: boolean;
         invalid?: boolean;
         onChange: any;
@@ -31,9 +32,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InputProps = typeof __propDef.props;
-export declare type InputEvents = typeof __propDef.events;
-export declare type InputSlots = typeof __propDef.slots;
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/Listbox.svelte.d.ts

@@ -20,9 +20,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ListboxProps = typeof __propDef.props;
-export declare type ListboxEvents = typeof __propDef.events;
-export declare type ListboxSlots = typeof __propDef.slots;
+export type ListboxProps = typeof __propDef.props;
+export type ListboxEvents = typeof __propDef.events;
+export type ListboxSlots = typeof __propDef.slots;
 export default class Listbox extends SvelteComponentTyped<ListboxProps, ListboxEvents, ListboxSlots> {
 }
 export {};

package/Radio.svelte

@@ -1,16 +1,19 @@
-<script>export let id = undefined;
+<script>import { isNotBlank } from 'txstate-utils';
+export let id = undefined;
 export let name;
 export let value;
 export let selected = false;
 export let onChange = undefined;
 export let onBlur = undefined;
 export let messagesid = undefined;
+export let helptextid = undefined;
 export let disabled = false;
 export let valid = false;
 export let invalid = false;
+$: descby = [messagesid, helptextid].filter(isNotBlank).join(' ');
 </script>
 
-<input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={messagesid} {value} on:change={onChange} on:blur={onBlur}>
+<input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={descby} {value} on:change={onChange} on:blur={onBlur}>
 
 <style>
 input, input:before, input:after {

package/Radio.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         onChange?: any;
         onBlur?: any;
         messagesid?: string | undefined;
+        helptextid?: string | undefined;
         disabled?: boolean;
         valid?: boolean;
         invalid?: boolean;
@@ -17,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RadioProps = typeof __propDef.props;
-export declare type RadioEvents = typeof __propDef.events;
-export declare type RadioSlots = typeof __propDef.slots;
+export type RadioProps = typeof __propDef.props;
+export type RadioEvents = typeof __propDef.events;
+export type RadioSlots = typeof __propDef.slots;
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};

package/Tab.svelte

@@ -20,8 +20,9 @@ const last = idx === $store.tabs.length - 1;
 <style>
   .tabs-panel {
     width: 100%;
-    border: var(--tabs-panel-border, var(--tabs-border, 1px solid #666666));
-    padding: var(--tabs-panel-padding, 1em);
+    min-height: 50vh;
+    border: var(--tabs-panel-border, var(--tabs-border, 0));
+    padding: var(--tabs-margin-top, 2em) var(--tabs-padding-hori, 0.7em) 0 var(--tabs-padding-hori, 0.7em);
   }
   .tabs-panel.accordion {
     border-left: 0;

package/Tab.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type TabProps = typeof __propDef.props;
-export declare type TabEvents = typeof __propDef.events;
-export declare type TabSlots = typeof __propDef.slots;
+export type TabProps = typeof __propDef.props;
+export type TabEvents = typeof __propDef.events;
+export type TabSlots = typeof __propDef.slots;
 export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
 }
 export {};

package/TabStore.d.ts

@@ -2,19 +2,28 @@ import { Store } from '@txstate-mws/svelte-store';
 import type { ElementSize } from '@txstate-mws/svelte-components';
 import type { IconifyIcon } from '@iconify/svelte';
 export declare const TAB_CONTEXT: {};
-interface TabDef {
+export interface TabDef {
+    name?: string;
     title: string;
     icon?: IconifyIcon;
+    required?: boolean;
 }
 interface ITabStore extends ElementSize {
     current?: number;
+    prevTitle?: string;
+    nextTitle?: string;
+    requireNext: boolean;
     tabs: TabDef[];
+    visited: Record<string, boolean>;
     tabids: Record<string, string>;
     panelids: Record<string, string>;
 }
 export declare class TabStore extends Store<ITabStore> {
     initialTab?: string | undefined;
     constructor(tabs: TabDef[], initialTab?: string | undefined);
+    set(v: ITabStore): void;
+    currentIdx(): import("@txstate-mws/svelte-store").DerivedStore<number, ITabStore>;
+    currentName(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentTitle(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentTabId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
     currentPanelId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
@@ -24,5 +33,6 @@ export declare class TabStore extends Store<ITabStore> {
     home(): void;
     end(): void;
     activate(idx: number): void;
+    activateName(name: string): void;
 }
 export {};

package/TabStore.js

@@ -1,18 +1,42 @@
 import { Store, derivedStore } from '@txstate-mws/svelte-store';
 import { findIndex, randomid } from 'txstate-utils';
 export const TAB_CONTEXT = {};
+function checkNext(v) {
+    v.visited = { ...v.visited, [v.tabs[v.current].title]: true };
+    v.prevTitle = v.current > 0 ? v.tabs[v.current - 1].title : undefined;
+    v.nextTitle = v.tabs.length - 1 > v.current ? v.tabs[v.current + 1].title : undefined;
+    v.requireNext = v.tabs.some((t, i) => t.required && !v.visited[t.title]);
+    return v;
+}
 export class TabStore extends Store {
     initialTab;
     constructor(tabs, initialTab) {
-        super({
+        const current = findIndex(tabs, t => t.title === initialTab, 0);
+        super(checkNext({
             tabs,
-            current: findIndex(tabs, t => t.title === initialTab, 0),
+            current,
+            visited: {},
             tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
             panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
             clientWidth: 1024
-        });
+        }));
         this.initialTab = initialTab;
     }
+    set(v) {
+        v.tabids ??= {};
+        v.panelids ??= {};
+        for (const tab of v.tabs) {
+            v.tabids[tab.title] ??= randomid();
+            v.panelids[tab.title] ??= randomid();
+        }
+        super.set(checkNext(v));
+    }
+    currentIdx() {
+        return derivedStore(this, v => v.current);
+    }
+    currentName() {
+        return derivedStore(this, v => v.tabs[v.current].name ?? v.tabs[v.current].title);
+    }
     currentTitle() {
         return derivedStore(this, v => v.tabs[v.current].title);
     }
@@ -40,4 +64,7 @@ export class TabStore extends Store {
     activate(idx) {
         this.update(v => ({ ...v, current: Math.min(v.tabs.length, Math.max(0, idx)) }));
     }
+    activateName(name) {
+        this.update(v => ({ ...v, current: findIndex(v.tabs, t => t.name === name) ?? findIndex(v.tabs, t => t.title === name) ?? v.current }));
+    }
 }

package/Tabs.svelte

@@ -1,20 +1,33 @@
-<script>import { modifierKey, resize } from '@txstate-mws/svelte-components';
-import { setContext } from 'svelte';
+<script>import { modifierKey, resize, offset } from '@txstate-mws/svelte-components';
+import { Store } from '@txstate-mws/svelte-store';
+import { getContext, onMount, setContext } from 'svelte';
 import { roundTo } from 'txstate-utils';
+import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
+$: store.update(v => ({ ...v, tabs }));
+const activeStore = new Store({});
 const tabelements = [];
+let activeelement;
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
-const current = store.currentTitle();
+const dialogContext = getContext(DIALOG_TABS_CONTEXT) ?? { change: () => { } };
+dialogContext.onNext = () => { store.right(); };
+dialogContext.onPrev = () => { store.left(); };
+$: dialogContext.prevTitle = $store.prevTitle;
+$: dialogContext.nextTitle = $store.nextTitle;
+$: dialogContext.hasRequired = $store.requireNext;
+$: dialogContext.change($store);
+setContext(DIALOG_TABS_CONTEXT, { change: () => { } }); // reset context so that any sub-tabs do NOT control the Dialog component
+const currentTitle = store.currentTitle();
+const currentIdx = store.currentIdx();
 const accordion = store.accordion();
 $: cols = Math.min(Math.floor($store.clientWidth / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo($store.clientWidth / (cols * 130), 4), 1);
-$: width = `calc(${100 / cols}% + 1px)`;
-$: widthleft = `${100 / cols}%`;
 $: wrapping = cols !== $store.tabs.length;
+$: dialogContext.hasTabs = !$accordion;
 function onClick(idx) {
     return () => store.activate(idx);
 }
@@ -50,17 +63,35 @@ function onKeyDown(idx) {
 function isActive(idx, activeidx) {
     return idx === (activeidx ?? 0);
 }
-$: active = $current;
+const activeOversize = 2;
+async function reactToCurrent(..._) {
+    if (!activeelement)
+        return;
+    const tabelement = tabelements[$currentIdx];
+    if (!tabelement)
+        return;
+    const span = tabelement.querySelector(':scope > span');
+    if (!span)
+        return;
+    const left = span.offsetLeft - activeelement.offsetLeft - activeOversize;
+    const width = span.offsetWidth + (activeOversize * 2);
+    activeelement.style.transform = `translateX(${left}px)`;
+    activeelement.style.width = `${width}px`;
+}
+$: active = $currentTitle;
+$: reactToCurrent($activeStore);
+onMount(reactToCurrent);
 </script>
 
 {#if !$accordion}
-  <ul use:resize={{ store }} class="dialog-tab-buttons" role="tablist">
+  <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
     {#each $store.tabs as tab, idx (tab.title)}
-    {@const active = isActive(idx, $store.current)}
-    {@const left = idx % cols === 0}
-    <li bind:this={tabelements[idx]} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} style:width={left ? widthleft : width} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={tab.icon} inline />{tab.title}</li>
+      {@const active = isActive(idx, $store.current)}
+      {@const left = idx % cols === 0}
+      <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
     {/each}
   </ul>
+  <div bind:this={activeelement} class="tabs-active"></div>
   <slot current={$store.current} />
 {:else}
   <div use:resize={{ store }} class="tabs-container">
@@ -70,6 +101,7 @@ $: active = $current;
 
 <style>
   .tabs-container {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     border-radius: var(--tabs-radius, 0.6em);
@@ -84,22 +116,38 @@ $: active = $current;
     list-style-type: none;
     display: flex;
     flex-wrap: wrap;
+    justify-content: flex-start;
+    font-size: 0.9em;
   }
   li, .tabs-container :global(.tabs-tab) {
-    padding: var(--tabs-padding, 0.7em 1em);
+    padding: var(--tabs-padding-vert, 0.7em) var(--tabs-padding-hori, 1em);
     cursor: pointer;
     word-break: break-word;
-  }
-  li {
-    border: var(--tabs-border, 1px solid #666666);
-    border-top-left-radius: var(--tabs-radius, 0.6em);
-    border-top-right-radius: var(--tabs-radius, 0.6em);
+    text-transform: uppercase;
+    font-weight: 500;
+    color: var(--tabs-text, #363534)
   }
   li:not(.left) {
     margin-left: -1px;
   }
+
   li:global(.tabs-tab[aria-selected="true"]), .tabs-container :global(.tabs-tab[aria-selected="true"]) {
-    color: var(--tabs-active-text, #ffffff);
-    background-color: var(--tabs-active-bg, #333333);
+    font-weight: 700;
+  }
+
+  .tabs-active {
+    background: var(--dg-tabs-active, var(--dg-button-bg, #501214));
+    height: 3px;
+    border-radius: 2px;
+    overflow: hidden;
+    width: 0px;
+    margin-top: calc(-1 * var(--tabs-padding-vert, 0.7em));
+    margin-bottom: var(--tabs-padding-vert, 0.7em);
+    transition: 0.2s transform;
+  }
+  @media (prefers-reduced-motion) {
+    .tabs-active {
+      transition: none;
+    }
   }
 </style>

package/Tabs.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import { TabStore } from './TabStore';
+import { TabStore, type TabDef } from './TabStore';
 declare const __propDef: {
     props: {
-        tabs: {
-            title: string;
-        }[];
+        tabs: TabDef[];
         active?: string | undefined;
         store?: TabStore;
     };
@@ -17,9 +15,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type TabsProps = typeof __propDef.props;
-export declare type TabsEvents = typeof __propDef.events;
-export declare type TabsSlots = typeof __propDef.slots;
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
 export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
 }
 export {};