tera-system-ui 0.1.64 → 0.1.67

package/dist/components/select/Select.svelte

@@ -1,28 +1,157 @@
-<script lang="ts">
-    import './select.scss'
-
-    import {type SelectProps, styles} from "./Select";
-
-    let {
-        children,
-        variant = 'outlined',
-        disabled,
-        size = 'md',
-        status,
-        class: className,
-        value = $bindable(),
-        ref = $bindable(),
-        ...props
-    }: SelectProps = $props();
-
-</script>
-
-<select
-    bind:this={ref}
-    bind:value
-    class={styles({ variant, disabled, size, status, className })}
-    {disabled}
-    {...props}
->
-    {@render children?.()}
-</select>
+<script lang="ts">import { Select as SelectPrimitive } from 'bits-ui';
+import { triggerStyles } from './Select.js';
+import { IconCheck, IconChevronDown } from '../icons/index.js';
+import IconChevronsUp from '@tabler/icons-svelte/icons/chevrons-up';
+import IconChevronsDown from '@tabler/icons-svelte/icons/chevrons-down';
+let { type = 'single', options = [], groups, value = $bindable(), placeholder = 'Select…', variant, size, disabled, status, loop, allowDeselect, required, name, class: className, onchange, } = $props();
+// All options flat — used for label lookup in multiple mode
+const allOptions = $derived(groups ? groups.flatMap(g => g.options) : options);
+// Single mode: selected label
+const selectedLabel = $derived.by(() => {
+    const v = value;
+    if (typeof v !== 'string' || !v)
+        return '';
+    return allOptions.find(o => o.value === v)?.label ?? v;
+});
+// Multiple mode: selected chips
+const selectedChips = $derived(Array.isArray(value)
+    ? value.map(v => ({ value: v, label: allOptions.find(o => o.value === v)?.label ?? v }))
+    : []);
+const triggerClass = $derived(triggerStyles({ variant, size, disabled, status, className }));
+const minHeight = "21rem";
+</script>
+
+{#snippet itemList()}
+    <SelectPrimitive.Viewport class="p-2 flex-1 min-h-0 overflow-y-auto">
+        {#if groups && groups.length > 0}
+            {#each groups as group (group.label)}
+                <SelectPrimitive.Group>
+                    <SelectPrimitive.GroupHeading
+                        class="px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wide"
+                    >
+                        {group.label}
+                    </SelectPrimitive.GroupHeading>
+                    {#each group.options as option (option.value)}
+                        {@render renderItem(option)}
+                    {/each}
+                </SelectPrimitive.Group>
+            {/each}
+        {:else}
+            {#each options as option (option.value)}
+                {@render renderItem(option)}
+            {/each}
+        {/if}
+    </SelectPrimitive.Viewport>
+{/snippet}
+
+{#if type === 'multiple'}
+    <SelectPrimitive.Root
+        type="multiple"
+        bind:value={value as string[] | undefined}
+        onValueChange={(v) => onchange?.(v)}
+        {disabled}
+        {loop}
+        {required}
+        {name}
+    >
+        <!--
+            Multiple-mode trigger: chip tags displayed in the button, individual × spans
+            are non-interactive (no onclick) to avoid button-in-button nesting.
+            Managing selection is done exclusively through the dropdown items.
+        -->
+        <SelectPrimitive.Trigger class={triggerStyles({ variant, size, disabled, status, className: `h-auto min-h-9 flex-wrap py-1.5 ${className ?? ''}` })}>
+            {#if selectedChips.length > 0}
+                {#each selectedChips as chip (chip.value)}
+                    <!-- Plain span tag — no interactive elements inside <button> -->
+                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border">
+                        {chip.label}
+                        <!-- Use span with role for the remove hint; actual removal happens via re-clicking in dropdown -->
+<!--                        <span class="flex items-center opacity-60" aria-hidden="true"><IconX class="size-3" /></span>-->
+                    </span>
+                {/each}
+            {:else}
+                <span class="text-text-tertiary flex-1">{placeholder}</span>
+            {/if}
+            <IconChevronDown class="size-4 shrink-0 text-text-tertiary ml-auto transition-transform ease-ui duration-150 data-[state=open]:rotate-180" />
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                sideOffset={4}
+                class="z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden
+                bg-surface rounded-container border border-border-default shadow-lg
+                animate-in fade-in zoom-in-95 duration-150
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95"
+                style="max-height: min({minHeight}, var(--bits-select-content-available-height))"
+            >
+                <SelectPrimitive.ScrollUpButton class="flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
+                    <IconChevronsUp class="size-3.5" />
+                </SelectPrimitive.ScrollUpButton>
+                {@render itemList()}
+                <SelectPrimitive.ScrollDownButton class="flex w-full items-center justify-center pb-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
+                    <IconChevronsDown class="size-3.5" />
+                </SelectPrimitive.ScrollDownButton>
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+
+{:else}
+    <SelectPrimitive.Root
+        type="single"
+        bind:value={value as string | undefined}
+        onValueChange={(v) => onchange?.(v)}
+        {disabled}
+        {loop}
+        {allowDeselect}
+        {required}
+        {name}
+    >
+        <SelectPrimitive.Trigger class={triggerClass}>
+            <span class={!value ? 'text-text-tertiary' : 'text-text-primary'}>
+                {value ? selectedLabel : placeholder}
+            </span>
+            <IconChevronDown
+                class="size-4 shrink-0 text-text-tertiary transition-transform ease-ui duration-150 data-[state=open]:rotate-180"
+            />
+        </SelectPrimitive.Trigger>
+
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                sideOffset={6}
+                class="z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden
+                bg-surface rounded-container border border-border-default shadow-lg
+                animate-in fade-in zoom-in-95 duration-150
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95"
+                style="max-height: min({minHeight}, var(--bits-select-content-available-height))"
+            >
+                <SelectPrimitive.ScrollUpButton class="flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
+                    <IconChevronsUp class="size-3.5" />
+                </SelectPrimitive.ScrollUpButton>
+                {@render itemList()}
+                <SelectPrimitive.ScrollDownButton class="flex w-full items-center justify-center pb-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
+                    <IconChevronsDown class="size-3.5" />
+                </SelectPrimitive.ScrollDownButton>
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+{/if}
+
+{#snippet renderItem(option: { value: string; label: string; disabled?: boolean })}
+    <SelectPrimitive.Item
+        value={option.value}
+        label={option.label}
+        disabled={option.disabled}
+        class="relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
+        transition-colors ease-ui duration-100
+        data-[highlighted]:bg-surface-hover
+        data-[selected]:font-medium data-[selected]:text-interactive
+        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    >
+        {#snippet children({selected})}
+            <span class="flex-1">{option.label}</span>
+            {#if selected}
+                <IconCheck class="size-4 text-interactive shrink-0"/>
+            {/if}
+        {/snippet}
+    </SelectPrimitive.Item>
+{/snippet}

package/dist/components/select/Select.svelte.d.ts

@@ -1,5 +1,4 @@
-import './select.scss';
-import { type SelectProps } from "./Select";
-declare const Select: import("svelte").Component<SelectProps, {}, "value" | "ref">;
+import { type SelectProps } from './Select.js';
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Select } from './Select.svelte';
-export type { SelectProps } from './Select';
+export type { SelectProps, SelectOption } from './Select.js';

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,98 +1,75 @@
-<script lang="ts">
-    import {
-        SCREEN_BREAK_POINTS,
-        mainLayout,
-        setSideNavState,
-        type SideNavigationProps,
-        toggleSideNavigation, getSideNavState, type SideNavigationItem
-    } from "./SideNavigation";
-    import {clickOutside} from "../../actions/clickOutside"
-    import {Button} from "../button";
-    import {IconCoinConvert, IconHamburger} from "../icons";
-    import {BrandLogo} from "../brand-logo";
-    import SideNavItem from "./SideNavigationItem.svelte";
-    import IconBook from "../icons/IconBook.svelte";
-    import IconTransform from "../icons/IconTransform.svelte";
-    import IconCalculator from "../icons/IconCalculator.svelte";
-    import {m} from '../../paraglide/messages.js'
-
-    import {getGlobalContext} from "../tera-ui-context/global-context";
-    import {
-        SupportedLanguage as CalculatorSupportedLanguage
-    } from "../../tera-i18n/projects/tera-calculator/supported-language";
-    import {
-        SupportedLanguage as ConverterSupportedLanguage
-    } from "../../tera-i18n/projects/tera-converter/supported-language";
-
-    let {children, sideNavHref, language, items, bottomChildren, ...props}: SideNavigationProps = $props();
-
-
-    function handleClickOutside() {
-        let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        if (screenWidth < SCREEN_BREAK_POINTS.md) {
-            setSideNavState(undefined)
-        } else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
-            setSideNavState(undefined)
-        } else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
-
-        }
-    }
-
-    function handleHover(isHover: boolean) {
-        let temporaryExpand = isHover ? true : undefined
-
-        if (temporaryExpand) {
-            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand.toString())
-        } else {
-            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
-        }
-    }
-
-    let globalContext = getGlobalContext()
-
-    sideNavHref = sideNavHref || globalContext?.sideNavHref
-    language = language || globalContext?.language
-
-    let langPath = (language === 'en' || !language) ? '' : `/${language}`
-
-    let langForCalculator = (language && CalculatorSupportedLanguage.includes(language)) ? language : 'en'
-    let langPathForCalculator = (langForCalculator === 'en' || !langForCalculator) ? '' : `/${langForCalculator}`
-
-    let langForConverter = (language && ConverterSupportedLanguage.includes(language)) ? language : 'en'
-    let langPathForConverter = (langForConverter === 'en' || !langForConverter) ? '' : `/${langForConverter}`
-
-    const NAV_ITEM: SideNavigationItem[] = items ?? [
-        {
-            href: `/calculator${langPathForCalculator}`,
-            exactHref: '/calculator',
-            icon: IconCalculator,
-            title: m.text_calces_scientific_calculator(),
-        },
-        {
-            href: `/convert${langPathForConverter}`,
-            exactHref: '/convert',
-            icon: IconTransform,
-            title: m.text_unit_converter(),
-        },
-        {
-            href: `/convert${langPathForConverter}/currency`,
-            exactHref: '/convert/currency',
-            icon: IconCoinConvert,
-            title: m.text_currency_converter(),
-        },
-        {
-            href: '/docs/calculator-usages/calces',
-            icon: IconBook,
-            title: m.text_calces_documentation(),
-        },
-    ]
-
-    let selectedIndex = (() => {
-        return NAV_ITEM.findIndex((item, index) => {
-            return (item.exactHref ?? item.href) === sideNavHref;
-        })
-    })();
-
+<script lang="ts">import { SCREEN_BREAK_POINTS, mainLayout, setSideNavState, toggleSideNavigation, getSideNavState } from "./SideNavigation";
+import { clickOutside } from "../../actions/clickOutside";
+import { Button } from "../button";
+import { IconCoinConvert, IconHamburger } from "../icons";
+import { BrandLogo } from "../brand-logo";
+import SideNavItem from "./SideNavigationItem.svelte";
+import IconBook from "../icons/IconBook.svelte";
+import IconTransform from "../icons/IconTransform.svelte";
+import IconCalculator from "../icons/IconCalculator.svelte";
+import { m } from '../../paraglide/messages.js';
+import { getGlobalContext } from "../tera-ui-context/global-context";
+import { SupportedLanguage as CalculatorSupportedLanguage } from "../../tera-i18n/projects/tera-calculator/supported-language";
+import { SupportedLanguage as ConverterSupportedLanguage } from "../../tera-i18n/projects/tera-converter/supported-language";
+let { children, sideNavHref, language, items, bottomChildren, ...props } = $props();
+function handleClickOutside() {
+    let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    if (screenWidth < SCREEN_BREAK_POINTS.md) {
+        setSideNavState(undefined);
+    }
+    else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
+        setSideNavState(undefined);
+    }
+    else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
+    }
+}
+function handleHover(isHover) {
+    let temporaryExpand = isHover ? true : undefined;
+    if (temporaryExpand) {
+        mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand.toString());
+    }
+    else {
+        mainLayout()?.removeAttribute('data-side-nav-temporary-expand');
+    }
+}
+let globalContext = getGlobalContext();
+const resolvedSideNavHref = $derived(sideNavHref || globalContext?.sideNavHref);
+const resolvedLanguage = $derived(language || globalContext?.language || 'en');
+const langPath = $derived((resolvedLanguage === 'en') ? '' : `/${resolvedLanguage}`);
+const langForCalculator = $derived((resolvedLanguage && CalculatorSupportedLanguage.includes(resolvedLanguage)) ? resolvedLanguage : 'en');
+const langPathForCalculator = $derived((langForCalculator === 'en') ? '' : `/${langForCalculator}`);
+const langForConverter = $derived((resolvedLanguage && ConverterSupportedLanguage.includes(resolvedLanguage)) ? resolvedLanguage : 'en');
+const langPathForConverter = $derived((langForConverter === 'en') ? '' : `/${langForConverter}`);
+const NAV_ITEM = $derived(items ?? [
+    {
+        href: `/calculator${langPathForCalculator}`,
+        exactHref: '/calculator',
+        icon: IconCalculator,
+        title: m.text_calces_scientific_calculator(),
+    },
+    {
+        href: `/convert${langPathForConverter}`,
+        exactHref: '/convert',
+        icon: IconTransform,
+        title: m.text_unit_converter(),
+    },
+    {
+        href: `/convert${langPathForConverter}/currency`,
+        exactHref: '/convert/currency',
+        icon: IconCoinConvert,
+        title: m.text_currency_converter(),
+    },
+    {
+        href: '/docs/calculator-usages/calces',
+        icon: IconBook,
+        title: m.text_calces_documentation(),
+    },
+]);
+let selectedIndex = (() => {
+    return NAV_ITEM.findIndex((item) => {
+        return (item.exactHref ?? item.href) === resolvedSideNavHref;
+    });
+})();
 </script>
 
 <nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
@@ -118,7 +95,7 @@
                 handleHover(false)
              }}
     >
-        {#each NAV_ITEM as item, index}
+        {#each NAV_ITEM as item, index (item.href)}
             <SideNavItem href={item.href} class={selectedIndex === index ? 'selected' : ''}>
                 {#snippet icon()}
                     <item.icon/>

package/dist/components/side-navigation/SideNavigationItem.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-    const {class: className, href, children, icon} = $props()
+<script lang="ts">"use strict";
+const { class: className, href, children, icon } = $props();
 </script>
 
 <li class="{className + ' side-nav_item'}">

package/dist/components/side-navigation/SideNavigationLayout.svelte

@@ -1,8 +1,6 @@
-<script lang="ts">
-    import {SideNavigation} from "./";
-    import './sidenav.scss'
-
-    let {children, language, items, bottomChildren} = $props()
+<script lang="ts">import { SideNavigation } from "./";
+import './sidenav.scss';
+let { children, language, items, bottomChildren } = $props();
 </script>
 
 <main

package/dist/components/side-navigation/sidenav.scss

@@ -85,7 +85,7 @@
     }
 }
 
-@media (min-width: theme(--breakpoint-md)) {
+@media (min-width: 48rem) {
     :root {
         --sidebar-main-margin-left: 3rem;
         --sidebar-border-width: 1px;
@@ -93,7 +93,7 @@
     }
 }
 
-@media (min-width: theme(--breakpoint-xl)) {
+@media (min-width: 80rem) {
     :root {
         --sidebar-main-margin-left: var(--sidebar-width);
         --sidebar-width: 16.5rem;
@@ -121,6 +121,8 @@
 
 .side-nav_item {
     color: var(--color-neutral-token-13);
+    position: relative;
+    transition: background-color 150ms var(--ease-ui);
 
     a {
         display: flex;
@@ -139,23 +141,25 @@
         }
     }
 
-    &.selected a {
-        color: var(--color-neutral-token-1);
-    }
-
+    /* Active item: 3px left accent bar */
     &.selected {
-        a::after {
+        a {
+            color: var(--color-text-primary);
+        }
+
+        &::before {
             content: '';
             position: absolute;
-            inset-inline: 0.25rem;
-            inset-block: 0.2rem;
-            background: var(--color-neutral-token-11);
-            border-radius: var(--radius-sm);
-            z-index: 0;
+            left: 0;
+            top: 0.25rem;
+            bottom: 0.25rem;
+            width: 3px;
+            background: var(--color-interactive);
+            border-radius: 0 2px 2px 0;
         }
     }
 
     &:hover {
-        background-color: var(--color-neutral-token-3);
+        background-color: var(--color-surface-hover);
     }
 }

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">"use strict";
+let { variant = 'line', width, height, lines = 1, animate = true, class: className = '', } = $props();
+</script>
+
+<div
+    aria-label="Loading..."
+    aria-busy="true"
+    class={className}
+>
+    {#if variant === 'circle'}
+        <div
+            class="rounded-full {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+            style="width:{width ?? '48px'};height:{height ?? width ?? '48px'}"
+        ></div>
+    {:else if variant === 'rect'}
+        <div
+            class="rounded {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+            style="width:{width ?? '100%'};height:{height ?? '120px'}"
+        ></div>
+    {:else}
+        <div class="flex flex-col gap-2" style="width:{width ?? '100%'}">
+            {#each Array(lines) as _, i (i)}
+                <div
+                    class="h-3 rounded-full {animate ? 'skeleton-shimmer' : 'bg-surface-hover'}"
+                    style={i === lines - 1 && lines > 1 ? 'width:70%' : 'width:100%'}
+                ></div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .skeleton-shimmer {
+        background: linear-gradient(
+            90deg,
+            var(--color-surface-hover) 25%,
+            var(--color-surface-sunken) 50%,
+            var(--color-surface-hover) 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+    }
+
+    @keyframes shimmer {
+        0%   { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+</style>

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,12 @@
+type SkeletonVariant = 'line' | 'circle' | 'rect';
+type $$ComponentProps = {
+    variant?: SkeletonVariant;
+    width?: string;
+    height?: string;
+    lines?: number;
+    animate?: boolean;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.svelte';

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.svelte';

package/dist/components/slider/Slider.d.ts

@@ -1,18 +1,28 @@
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type SliderVariants = VariantProps<typeof styles>;
-export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, SliderVariants {
-    children?: Snippet;
+export interface SliderProps {
+    /** Additional CSS classes for the root element. */
     class?: string;
-    min: number;
-    max: number;
-    step: number;
-    value: number;
-    showTicks?: boolean;
+    /** Minimum value of the slider range. */
+    min?: number;
+    /** Maximum value of the slider range. */
+    max?: number;
+    /** Step interval between selectable values. */
+    step?: number;
+    /** Current value. Bindable. */
+    value?: number;
+    /** Prevents all interaction and dims the control. */
+    disabled?: boolean;
+    /**
+     * Layout orientation of the slider track and thumb.
+     * When 'vertical', the parent must have an explicit height.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Fires continuously as the thumb moves during drag. */
     onchange?: (value: number) => void;
-    ref?: HTMLDivElement | null;
+    /**
+     * Fires once when the user finishes dragging and releases the thumb.
+     * Prefer this over `onchange` when the handler triggers expensive work.
+     */
+    onValueCommit?: (value: number) => void;
+    /** Bindable reference to the root span element. */
+    ref?: HTMLElement | null;
 }
-export type SliderContextProps = {};
-export {};

package/dist/components/slider/Slider.js

@@ -1,7 +1 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
+export {};