tera-system-ui 0.1.76 → 0.2.1

package/dist/components/switch/Switch.recipe.d.ts

@@ -0,0 +1,81 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Switch recipe — the canonical styled layer for the toggle switch.
+ *
+ * Built on the bits-ui Switch primitive: a pill `root` track holding two
+ * decorative state indicators (a line for on, a ring for off) and a sliding
+ * `thumb`. Each part is a slot, so an app can restyle one part without forking
+ * the markup. The primary customization surface is `tv({ extend: switchRecipe })`
+ * in typed code; see docs/ARCHITECTURE.md for the worked example (kept out of
+ * this JSDoc so the llms doc generator doesn't grep its tokens).
+ *
+ * Restyle-internals: the per-component CSS var --tera-switch-radius lets a
+ * theme/app retune the track + thumb corner radius (e.g. a squared-off switch)
+ * with no code change; it defaults to a full pill in tera-ui-base.css.
+ */
+export declare const switchRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            lineIndicator?: import("tailwind-merge").ClassNameValue;
+            dotIndicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            lineIndicator?: import("tailwind-merge").ClassNameValue;
+            dotIndicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    lineIndicator: string;
+    dotIndicator: string;
+    thumb: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+            lineIndicator?: import("tailwind-merge").ClassNameValue;
+            dotIndicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    lineIndicator: string;
+    dotIndicator: string;
+    thumb: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string[];
+    lineIndicator: string;
+    dotIndicator: string;
+    thumb: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchRecipeProps = VariantProps<typeof switchRecipe>;
+export interface SwitchProps extends SwitchRecipeProps {
+    /** Additional CSS classes for the root element. */
+    class?: string;
+    /** Whether the switch is on. Bindable. */
+    checked?: boolean;
+    /** Prevents all interaction and dims the control. */
+    disabled?: boolean;
+    /** Whether the switch is required for form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Value sent with the form when the switch is checked. */
+    value?: string;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Replace the default thumb markup (structural seam). */
+    thumb?: Snippet;
+    /** Bindable reference to the root button element. */
+    ref?: HTMLButtonElement | null;
+    [key: string]: unknown;
+}

package/dist/components/switch/Switch.recipe.js

@@ -0,0 +1,38 @@
+import { tv } from "tailwind-variants";
+/**
+ * Switch recipe — the canonical styled layer for the toggle switch.
+ *
+ * Built on the bits-ui Switch primitive: a pill `root` track holding two
+ * decorative state indicators (a line for on, a ring for off) and a sliding
+ * `thumb`. Each part is a slot, so an app can restyle one part without forking
+ * the markup. The primary customization surface is `tv({ extend: switchRecipe })`
+ * in typed code; see docs/ARCHITECTURE.md for the worked example (kept out of
+ * this JSDoc so the llms doc generator doesn't grep its tokens).
+ *
+ * Restyle-internals: the per-component CSS var --tera-switch-radius lets a
+ * theme/app retune the track + thumb corner radius (e.g. a squared-off switch)
+ * with no code change; it defaults to a full pill in tera-ui-base.css.
+ */
+export const switchRecipe = tv({
+    slots: {
+        root: [
+            "relative group peer h-6 w-[46px] shrink-0 cursor-pointer items-center rounded-[var(--tera-switch-radius,9999px)] transition-[background-color,border-color,box-shadow] ease-ui duration-[var(--tera-duration-base)]",
+            "focus-visible:outline-none focus-visible:shadow-focus",
+            "border border-border-strong",
+            "shadow-[inset_0_1px_3px_rgba(15,23,42,0.18)]",
+            "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive",
+            "data-[state=checked]:shadow-[inset_0_1px_2px_rgba(15,23,42,0.28)]",
+            "data-[state=unchecked]:bg-surface-sunken hover:data-[state=unchecked]:border-border-strong hover:data-[state=unchecked]:bg-neutral-token-3",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "overflow-hidden",
+        ],
+        lineIndicator: "h-[11px] w-[2px] rounded-full bg-interactive-on absolute top-[6px] left-[10px] transition-all ease-ui duration-[var(--tera-duration-base)] group-data-[state=unchecked]:opacity-0 group-data-[state=checked]:opacity-100",
+        dotIndicator: "size-[7px] border-[1.5px] border-border-strong absolute top-[7px] right-[10px] rounded-full transition-all ease-ui duration-[var(--tera-duration-base)] group-data-[state=unchecked]:opacity-100 group-data-[state=checked]:opacity-0",
+        thumb: [
+            "pointer-events-none block size-5 rounded-[var(--tera-switch-radius,9999px)] bg-surface-raised transition-transform ease-spring duration-[var(--tera-duration-base)]",
+            "shadow-[0_1px_2px_rgba(15,23,42,0.4),inset_0_1px_0_rgba(255,255,255,0.6)]",
+            "group-active:scale-90",
+            "data-[state=checked]:translate-x-[24px] data-[state=unchecked]:translate-x-[2px]",
+        ],
+    },
+});

package/dist/components/switch/Switch.svelte

@@ -1,37 +1,28 @@
 <script lang="ts">import { Switch as SwitchPrimitive } from "bits-ui";
-import { cn } from "../../utils/index.js";
-let { ref = $bindable(null), class: className, checked = $bindable(false), disabled, required, name, value, onCheckedChange, ...restProps } = $props();
-</script>
-
-<SwitchPrimitive.Root
-        {...restProps}
-        bind:checked
-        bind:ref
-        {disabled}
-        {required}
-        {name}
-        {value}
-        {onCheckedChange}
-        class={cn(
-		"relative group peer h-[22px] w-11 shrink-0 cursor-pointer items-center rounded-full transition-[background-color,box-shadow] ease-ui duration-200",
-		"focus-visible:outline-none focus-visible:shadow-focus",
-		"data-[state=checked]:bg-interactive",
-		"data-[state=unchecked]:bg-border-default",
-		"disabled:cursor-not-allowed disabled:opacity-50",
-		"overflow-hidden",
-		className
-	)}
->
-    <!-- Internal line indicator (like Ant Design) -->
-    <div class="h-[10px] w-[1px] bg-neutral-1 absolute top-[6px] left-[9px] transition-all duration-200 group-data-[state=unchecked]:opacity-0 group-data-[state=checked]:opacity-100"></div>
-    <div class="size-[6px] border border-neutral-1/30 absolute top-2 right-[9px] rounded-full transition-all duration-200 group-data-[state=unchecked]:opacity-100 group-data-[state=checked]:opacity-0"></div>
-
-    <SwitchPrimitive.Thumb
-            class={cn(
-			"pointer-events-none block size-[18px] rounded-full bg-neutral-1 transition-transform ease-spring duration-[250ms]",
-			"shadow-[0_2px_4px_rgba(0,0,0,0.2)]",
-			"data-[state=checked]:translate-x-[23px] data-[state=unchecked]:translate-x-[2px]"
-		)}
-    />
-</SwitchPrimitive.Root>
-
+import { switchRecipe } from './Switch.recipe';
+let { ref = $bindable(null), class: className, checked = $bindable(false), disabled, required, name, value, onCheckedChange, thumb, ...restProps } = $props();
+const r = switchRecipe();
+</script>
+
+<SwitchPrimitive.Root
+        {...restProps}
+        bind:checked
+        bind:ref
+        {disabled}
+        {required}
+        {name}
+        {value}
+        {onCheckedChange}
+        class={r.root({ class: className })}
+>
+    <!-- Internal line indicator (like Ant Design) -->
+    <div class={r.lineIndicator()}></div>
+    <div class={r.dotIndicator()}></div>
+
+    {#if thumb}
+        {@render thumb()}
+    {:else}
+        <SwitchPrimitive.Thumb class={r.thumb()} />
+    {/if}
+</SwitchPrimitive.Root>
+

package/dist/components/switch/Switch.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SwitchProps } from './Switch.js';
+import { type SwitchProps } from './Switch.recipe';
 declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,2 +1,3 @@
 export { default as Switch } from './Switch.svelte';
-export type { SwitchProps } from './Switch';
+export { switchRecipe } from './Switch.recipe';
+export type { SwitchProps, SwitchRecipeProps } from './Switch.recipe';

package/dist/components/switch/index.js

@@ -1 +1,2 @@
 export { default as Switch } from './Switch.svelte';
+export { switchRecipe } from './Switch.recipe';

package/dist/components/table/Table.recipe.d.ts

@@ -0,0 +1,134 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Table recipe — the canonical styled layer for the base design language.
+ *
+ * Custom multi-part component (no bits-ui): the recipe is slotted by role —
+ * root / table / thead / headerCell / row / cell / loadingCell / empty — so an
+ * app can restyle any part independently. The striped zebra background and the
+ * sticky header are toggled through slot-scoped variants; the per-row stripe and
+ * clickable affordance are driven by booleans computed in markup.
+ *
+ * Primary customization surface: extend with `tv({ extend: tableRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-table-radius)
+ * lets a theme retune the wrapper corner radius with no code change; it defaults
+ * to a global axis token via the inline fallback. See docs/ARCHITECTURE.md for
+ * worked examples (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its tokens).
+ */
+export declare const tableRecipe: import("tailwind-variants").TVReturnType<{
+    stickyHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    stripedRow: {
+        true: {
+            row: string;
+        };
+        false: {
+            row: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+        };
+    };
+}, {
+    root: string;
+    table: string;
+    thead: string;
+    headerCell: string;
+    row: string;
+    cell: string;
+    loadingCell: string;
+    empty: string;
+}, undefined, {
+    stickyHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    stripedRow: {
+        true: {
+            row: string;
+        };
+        false: {
+            row: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+        };
+    };
+}, {
+    root: string;
+    table: string;
+    thead: string;
+    headerCell: string;
+    row: string;
+    cell: string;
+    loadingCell: string;
+    empty: string;
+}, import("tailwind-variants").TVReturnType<{
+    stickyHeader: {
+        true: {
+            thead: string;
+        };
+    };
+    stripedRow: {
+        true: {
+            row: string;
+        };
+        false: {
+            row: string;
+        };
+    };
+    clickable: {
+        true: {
+            row: string;
+        };
+    };
+}, {
+    root: string;
+    table: string;
+    thead: string;
+    headerCell: string;
+    row: string;
+    cell: string;
+    loadingCell: string;
+    empty: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableRecipeProps = VariantProps<typeof tableRecipe>;
+export interface TableColumn<R = Record<string, unknown>> {
+    /** Unique key — used for the column id and to read the cell value from the row. */
+    key: string;
+    /** Column heading text. */
+    label: string;
+    /** Optional fixed width (any CSS length), applied to the header cell. */
+    width?: string;
+    /** Horizontal alignment for the header and body cells. */
+    align?: 'left' | 'center' | 'right';
+    /** Custom cell renderer — receives the row; overrides the default value read. */
+    render?: Snippet<[R]>;
+}
+export interface TableProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** Column definitions in display order. */
+    columns: TableColumn<T>[];
+    /** Row data. */
+    data: T[];
+    /** Show skeleton placeholder rows instead of data. */
+    loading?: boolean;
+    /** Custom content rendered when there are no rows. Defaults to "No data". */
+    empty?: Snippet;
+    /** Zebra-stripe alternating rows. */
+    striped?: boolean;
+    /** Keep the header visible while the body scrolls. */
+    stickyHeader?: boolean;
+    /** Called when a row is clicked — also adds a pointer affordance. */
+    onRowClick?: (row: T) => void;
+    /** Additional CSS classes for the scroll wrapper. */
+    class?: string;
+}

package/dist/components/table/Table.recipe.js

@@ -0,0 +1,44 @@
+import { tv } from "tailwind-variants";
+/**
+ * Table recipe — the canonical styled layer for the base design language.
+ *
+ * Custom multi-part component (no bits-ui): the recipe is slotted by role —
+ * root / table / thead / headerCell / row / cell / loadingCell / empty — so an
+ * app can restyle any part independently. The striped zebra background and the
+ * sticky header are toggled through slot-scoped variants; the per-row stripe and
+ * clickable affordance are driven by booleans computed in markup.
+ *
+ * Primary customization surface: extend with `tv({ extend: tableRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-table-radius)
+ * lets a theme retune the wrapper corner radius with no code change; it defaults
+ * to a global axis token via the inline fallback. See docs/ARCHITECTURE.md for
+ * worked examples (kept out of this JSDoc so the llms doc generator doesn't grep
+ * its tokens).
+ */
+export const tableRecipe = tv({
+    slots: {
+        root: 'w-full overflow-auto rounded-[var(--tera-table-radius,var(--border-radius-container))] border border-border-default',
+        table: 'w-full text-sm text-left border-collapse',
+        thead: 'bg-surface-sunken',
+        headerCell: 'px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-text-tertiary whitespace-nowrap border-b border-border-default',
+        row: 'border-b border-border-default last:border-0 transition-colors ease-ui duration-[var(--tera-duration-micro)] hover:bg-surface-hover',
+        cell: 'px-4 py-3 text-text-primary',
+        loadingCell: 'px-4 py-3 border-b border-border-default',
+        empty: 'px-4 py-10 text-center text-text-tertiary',
+    },
+    variants: {
+        stickyHeader: {
+            true: { thead: 'sticky top-0 z-10' },
+        },
+        stripedRow: {
+            true: { row: 'bg-surface-sunken' },
+            false: { row: 'bg-transparent' },
+        },
+        clickable: {
+            true: { row: 'cursor-pointer' },
+        },
+    },
+    defaultVariants: {
+        stripedRow: false,
+    },
+});

package/dist/components/table/Table.svelte

@@ -1,14 +1,16 @@
 <script lang="ts" generics="T extends Record<string, unknown>">import { Skeleton } from '../skeleton/index.js';
+import { tableRecipe } from './Table.recipe';
 let { columns, data, loading, empty, striped, stickyHeader, onRowClick, class: className = '', } = $props();
+const r = $derived(tableRecipe({ stickyHeader, clickable: !!onRowClick }));
 </script>
 
-<div class="w-full overflow-auto {className}">
-    <table class="w-full text-sm text-left border-collapse">
-        <thead class="bg-surface-sunken {stickyHeader ? 'sticky top-0 z-10' : ''}">
+<div class={r.root({class: className})}>
+    <table class={r.table()}>
+        <thead class={r.thead()}>
             <tr>
                 {#each columns as col (col.key)}
                     <th
-                        class="px-4 py-3 font-medium text-text-secondary whitespace-nowrap border-b border-border-default"
+                        class={r.headerCell()}
                         style={col.width ? `width:${col.width}` : ''}
                         class:text-center={col.align === 'center'}
                         class:text-right={col.align === 'right'}
@@ -23,7 +25,7 @@ let { columns, data, loading, empty, striped, stickyHeader, onRowClick, class: c
                 {#each Array(4) as _, i (i)}
                     <tr>
                         {#each columns as col (col.key)}
-                            <td class="px-4 py-3 border-b border-border-default">
+                            <td class={r.loadingCell()}>
                                 <Skeleton variant="line" />
                             </td>
                         {/each}
@@ -31,7 +33,7 @@ let { columns, data, loading, empty, striped, stickyHeader, onRowClick, class: c
                 {/each}
             {:else if data.length === 0}
                 <tr>
-                    <td colspan={columns.length} class="px-4 py-10 text-center text-text-tertiary">
+                    <td colspan={columns.length} class={r.empty()}>
                         {#if empty}
                             {@render empty()}
                         {:else}
@@ -42,14 +44,12 @@ let { columns, data, loading, empty, striped, stickyHeader, onRowClick, class: c
             {:else}
                 {#each data as row, i (i)}
                     <tr
-                        class="border-b border-border-default transition-colors ease-ui duration-100
-                            {striped && i % 2 === 1 ? 'bg-surface-sunken' : 'bg-transparent'}
-                            {onRowClick ? 'cursor-pointer hover:bg-surface-hover' : 'hover:bg-surface-hover'}"
+                        class={tableRecipe({clickable: !!onRowClick, stripedRow: !!striped && i % 2 === 1}).row()}
                         onclick={() => onRowClick?.(row)}
                     >
                         {#each columns as col (col.key)}
                             <td
-                                class="px-4 py-3 text-text-primary"
+                                class={r.cell()}
                                 class:text-center={col.align === 'center'}
                                 class:text-right={col.align === 'right'}
                             >

package/dist/components/table/Table.svelte.d.ts

@@ -1,21 +1,6 @@
-import type { Snippet } from 'svelte';
+import { type TableProps } from './Table.recipe';
 declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        columns: {
-            key: string;
-            label: string;
-            width?: string;
-            align?: "left" | "center" | "right";
-            render?: Snippet<[T]> | undefined;
-        }[];
-        data: T[];
-        loading?: boolean;
-        empty?: Snippet;
-        striped?: boolean;
-        stickyHeader?: boolean;
-        onRowClick?: (row: T) => void;
-        class?: string;
-    };
+    props: TableProps<T>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1 +1,3 @@
 export { default as Table } from './Table.svelte';
+export { tableRecipe } from './Table.recipe';
+export type { TableProps, TableColumn, TableRecipeProps } from './Table.recipe';

package/dist/components/table/index.js

@@ -1 +1,2 @@
 export { default as Table } from './Table.svelte';
+export { tableRecipe } from './Table.recipe';

package/dist/components/tabs/Tabs.recipe.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Tabs recipe — the canonical styled layer for the base design language.
+ *
+ * Tabbed content panels built on the BitsUI Tabs primitive (root / list /
+ * trigger / content). The tabs are a multi-part component, so the recipe is
+ * SLOTTED: each visible part gets a named slot (root, list, trigger, content,
+ * indicator) that an app can target independently when extending with
+ * `tv({ extend: tabsRecipe, ... })` in typed code.
+ *
+ * Two visual styles are expressed as a `variant` variant — `line` (underline /
+ * accent-bar indicator) and `ios` (segmented control with a sliding pill). The
+ * `line` style also adapts to `orientation` (the indicator moves to the right
+ * edge when vertical). All of these were previously if/else branches in the
+ * markup; no class is lost.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-tabs-radius) lets a theme/app retune the iOS segmented container's
+ * corner radius with no code change; it defaults to the global axis token via
+ * an inline fallback. See docs/ARCHITECTURE.md for the worked extend example
+ * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+export type TabsVariant = 'line' | 'ios';
+export declare const tabsRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: {
+            trigger: string;
+            indicator: string;
+        };
+        ios: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    content: string;
+    indicator: string;
+}, undefined, {
+    variant: {
+        line: {
+            trigger: string;
+            indicator: string;
+        };
+        ios: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    content: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: {
+            trigger: string;
+            indicator: string;
+        };
+        ios: {
+            list: string;
+            trigger: string;
+            indicator: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string;
+    content: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TabsRecipeProps = VariantProps<typeof tabsRecipe>;
+export interface TabsProps {
+    children?: Snippet;
+    /** Currently active tab value. Bindable. */
+    value?: string;
+    /** Called when the active tab changes. */
+    onchange?: (newTab: string) => void;
+    /** Additional CSS classes for the root element. */
+    class?: string;
+    /** Visual style of the tab list. */
+    variant?: TabsVariant;
+    /**
+     * How tabs activate on keyboard focus.
+     * - 'automatic': tab content switches immediately when a tab receives focus.
+     * - 'manual': the user must press Enter or Space to activate a focused tab.
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * Orientation of the tab list.
+     * 'vertical' renders the list as a column alongside the content.
+     * Only supported with the 'line' variant.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether keyboard navigation wraps from the last tab back to the first. */
+    loop?: boolean;
+    /** Bindable reference to the root element. */
+    ref?: HTMLDivElement | null;
+    [key: string]: unknown;
+}
+export interface TabsListProps {
+    children?: Snippet;
+    /** Additional CSS classes for the tab list container. */
+    class?: string;
+    /** Additional CSS classes for the moving active-tab indicator. */
+    indicatorClass?: string;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+}
+export interface TabsItemProps {
+    children?: Snippet;
+    /** The value this tab represents — must match a TabsContent value. */
+    value: string;
+    /** Prevents the user from activating this tab. */
+    disabled?: boolean;
+    /** Additional CSS classes for the tab trigger. */
+    class?: string;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+}
+export interface TabsContentProps {
+    children?: Snippet;
+    /** The value this content panel corresponds to — must match a TabsItem value. */
+    value: string;
+    /** Additional CSS classes for the content panel. */
+    class?: string;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+}