@loidolt/theme-svelte 0.9.1 → 0.10.0

package/dist/components/Tabs.svelte

@@ -2,7 +2,7 @@
   import { Tabs as TabsPrimitive } from 'bits-ui';
   import type { TabsRootProps } from 'bits-ui';
   import type { Snippet } from 'svelte';
-  import type { NavItem, Orientation } from '../types.js';
+  import type { Orientation, TabItem } from '../types.js';
   import { cx } from '../utils.js';
 
   interface Props extends Omit<
@@ -11,14 +11,27 @@
   > {
     /** Defaults to the first tab, so a panel is always rendered. */
     value?: T;
-    tabs: NavItem<T>[];
+    tabs: TabItem<T>[];
     /** Accessible name of the tab list. */
     label?: string;
     orientation?: Orientation;
+    /**
+     * `line` underlines the selected tab. `rail` is an icon rail for a settings sidebar: short
+     * labels under icons, the list fixed beside (or above) panels that scroll on their own.
+     */
+    variant?: 'line' | 'rail';
+    /**
+     * Every panel stays mounted, hidden while unselected, so a panel keeps its state and its
+     * controls can be found while another one shows.
+     */
     children: Snippet<[{ value: T }]>;
+    /** Shared content above the panels, such as a filter or search; pinned while the rail's panels scroll. */
+    panelHeader?: Snippet;
     class?: string;
     listClass?: string;
     contentClass?: string;
+    /** The element around the panels, present in the rail variant or with a `panelHeader`. */
+    panelsClass?: string;
     onValueChange?: (value: T) => void;
     ref?: HTMLElement | null;
   }
@@ -30,10 +43,13 @@
     value = $bindable(tabs[0]?.value),
     label,
     orientation = 'horizontal',
+    variant = 'line',
     children,
+    panelHeader,
     class: className,
     listClass,
     contentClass,
+    panelsClass,
     onValueChange,
     ref = $bindable(null),
     ...rest
@@ -54,8 +70,17 @@
       onValueChange?.(active);
     }
   });
+
+  const wrapped = $derived(variant === 'rail' || panelHeader !== undefined);
 </script>
 
+{#snippet panels()}
+  {#each tabs as tab (tab.value)}<TabsPrimitive.Content
+      class={cx('ldt-tabs__content', contentClass)}
+      value={tab.value}>{@render children({ value: tab.value })}</TabsPrimitive.Content
+    >{/each}
+{/snippet}
+
 <TabsPrimitive.Root
   bind:ref
   value={active}
@@ -64,18 +89,27 @@
     onValueChange?.(next as T);
   }}
   {orientation}
-  class={cx('ldt-tabs', className)}
+  data-variant={variant}
+  class={cx('ldt-tabs', variant === 'rail' && 'ldt-tabs--rail', className)}
   {...rest}
 >
   <TabsPrimitive.List class={cx('ldt-tabs__list', listClass)} aria-label={label}
     >{#each tabs as tab (tab.value)}<TabsPrimitive.Trigger
         class="ldt-tabs__trigger"
         value={tab.value}
-        disabled={tab.disabled}>{tab.label}</TabsPrimitive.Trigger
+        disabled={tab.disabled}
+        title={tab.description}
+        >{#if tab.icon}<span class="ldt-tabs__icon" aria-hidden="true">{@render tab.icon()}</span
+          ><span class="ldt-tabs__label">{tab.label}</span
+          >{:else}{tab.label}{/if}</TabsPrimitive.Trigger
       >{/each}</TabsPrimitive.List
   >
-  {#each tabs as tab (tab.value)}<TabsPrimitive.Content
-      class={cx('ldt-tabs__content', contentClass)}
-      value={tab.value}>{@render children({ value: tab.value })}</TabsPrimitive.Content
-    >{/each}
+  {#if wrapped}
+    <div class={cx('ldt-tabs__panels', panelsClass)}>
+      {#if panelHeader}<div class="ldt-tabs__panel-header">{@render panelHeader()}</div>{/if}
+      {@render panels()}
+    </div>
+  {:else}
+    {@render panels()}
+  {/if}
 </TabsPrimitive.Root>

package/dist/components/Tabs.svelte.d.ts

@@ -1,20 +1,33 @@
 import { Tabs as TabsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
-import type { NavItem, Orientation } from '../types.js';
+import type { Orientation, TabItem } from '../types.js';
 declare function $$render<T extends string = string>(): {
     props: Omit<TabsPrimitive.RootProps, "orientation" | "value" | "children" | "class" | "onValueChange" | "ref" | "child"> & {
         /** Defaults to the first tab, so a panel is always rendered. */
         value?: T;
-        tabs: NavItem<T>[];
+        tabs: TabItem<T>[];
         /** Accessible name of the tab list. */
         label?: string;
         orientation?: Orientation;
+        /**
+         * `line` underlines the selected tab. `rail` is an icon rail for a settings sidebar: short
+         * labels under icons, the list fixed beside (or above) panels that scroll on their own.
+         */
+        variant?: "line" | "rail";
+        /**
+         * Every panel stays mounted, hidden while unselected, so a panel keeps its state and its
+         * controls can be found while another one shows.
+         */
         children: Snippet<[{
             value: T;
         }]>;
+        /** Shared content above the panels, such as a filter or search; pinned while the rail's panels scroll. */
+        panelHeader?: Snippet;
         class?: string;
         listClass?: string;
         contentClass?: string;
+        /** The element around the panels, present in the rail variant or with a `panelHeader`. */
+        panelsClass?: string;
         onValueChange?: (value: T) => void;
         ref?: HTMLElement | null;
     };

package/dist/index.d.ts

@@ -116,4 +116,4 @@ export { createTheme, themeScript } from './theme.svelte.js';
 export type { ColorScheme, Theme, ThemeOptions, ThemePreference, ThemeScriptOptions, } from './theme.svelte.js';
 export { breakpointQuery, createMediaQuery } from './media.svelte.js';
 export type { BreakpointName, MediaQuery, MediaQueryOptions } from './media.svelte.js';
-export type { ActionVariant, Alignment, BadgeSize, BadgeVariant, ChoiceOption, ColumnAlign, Crumb, Disclosure, ControlSize, DialogSize, HeadingLevel, MenuCheckboxItem, MenuEntry, MenuGroup, MenuItem, MenuRadioGroup, MenuSub, NavItem, Option, OptionGroup, Orientation, Placement, SortDirection, StatusVariant, TriggerChildProps, } from './types.js';
+export type { ActionVariant, Alignment, BadgeSize, BadgeVariant, ChoiceOption, ColumnAlign, Crumb, Disclosure, ControlSize, DialogSize, HeadingLevel, MenuCheckboxItem, MenuEntry, MenuGroup, MenuItem, MenuRadioGroup, MenuSub, NavItem, Option, OptionGroup, Orientation, Placement, SortDirection, StatusVariant, TabItem, TriggerChildProps, } from './types.js';

package/dist/types.d.ts

@@ -42,6 +42,14 @@ export interface ChoiceOption<T extends string = string> extends Option<T> {
 }
 /** `Option` is the single vocabulary for choice lists; `NavItem` is kept as a readable alias. */
 export type NavItem<T extends string = string> = Option<T>;
+/**
+ * One `Tabs` tab. The icon leads the label, and sits above it in the `rail` variant, where the
+ * label is short; `description` says more on hover and to assistive technology.
+ */
+export interface TabItem<T extends string = string> extends Option<T> {
+    icon?: Snippet;
+    description?: string;
+}
 /** One step in a breadcrumb trail. The final crumb is the current page and takes no `href`. */
 export interface Crumb {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-svelte",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Accessible Svelte 5 components for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -31,8 +31,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@loidolt/theme-styles": "^0.9.1",
-    "@loidolt/theme-tokens": "^0.9.1",
+    "@loidolt/theme-styles": "^0.10.0",
+    "@loidolt/theme-tokens": "^0.10.0",
     "bits-ui": "^2.19.0"
   },
   "peerDependencies": {