@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/navigation/cmp.nav-rail-item.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">import { IconSlot } from '../icon';
+const { label, icon, href, active = false, disabled = false, target, rel, on } = $props();
+const handleClick = () => {
+    if (disabled) {
+        return;
+    }
+    on?.click?.();
+};
+</script>
+
+{#snippet tile()}
+  <span class="nav-rail-item__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+  <span class="nav-rail-item__label">{label}</span>
+{/snippet}
+
+{#if href}
+  <a
+    class="nav-rail-item"
+    class:nav-rail-item--active={active}
+    class:nav-rail-item--disabled={disabled}
+    href={href}
+    target={target}
+    rel={rel}
+    aria-current={active ? 'page' : undefined}
+    aria-disabled={disabled || undefined}
+    tabindex={disabled ? -1 : undefined}>
+    {@render tile()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class="nav-rail-item"
+    class:nav-rail-item--active={active}
+    class:nav-rail-item--disabled={disabled}
+    disabled={disabled}
+    aria-current={active ? 'page' : undefined}
+    onclick={handleClick}>
+    {@render tile()}
+  </button>
+{/if}
+
+<!--
+@component
+NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set,
+`<button>` otherwise. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
+source string or a snippet. Tile dimensions are controlled via the `--sc-kit--nav-rail--item-*`
+CSS variables (settable on the parent rail or any ancestor).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-rail--item-width` | Tile width | `58px` |
+| `--sc-kit--nav-rail--item-icon-size` | Icon box size | `24px` |
+| `--sc-kit--nav-rail--item-label-size` | Label font size | `10px` |
+| `--sc-kit--nav-rail--item-radius` | Tile radius | `--sc-kit--radius--sm` |
+| `--sc-kit--nav-rail--item-color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--nav-rail--item-color--active` | Active text/icon color | `--sc-kit--color--text--primary` |
+| `--sc-kit--nav-rail--item-background--active` | Active tile background | `--sc-kit--color--bg--menu-active` |
+-->
+<style>.nav-rail-item {
+  --_nav-rail--item-width: var(--sc-kit--nav-rail--item-width, 3.625rem);
+  --_nav-rail--item-icon-size: var(--sc-kit--nav-rail--item-icon-size, 1.5rem);
+  --_nav-rail--item-label-size: var(--sc-kit--nav-rail--item-label-size, 0.625rem);
+  --_nav-rail--item-radius: var(--sc-kit--nav-rail--item-radius, var(--sc-kit--radius--sm));
+  --_nav-rail--item-color: var(--sc-kit--nav-rail--item-color, var(--sc-kit--color--text--secondary));
+  --_nav-rail--item-color-active: var(--sc-kit--nav-rail--item-color--active, var(--sc-kit--color--text--primary));
+  --_nav-rail--item-background-active: var(--sc-kit--nav-rail--item-background--active, var(--sc-kit--color--bg--menu-active));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: var(--_nav-rail--item-width);
+  padding-block: 0.375rem;
+  color: var(--_nav-rail--item-color);
+  background: none;
+  border: none;
+  border-radius: var(--_nav-rail--item-radius);
+  cursor: pointer;
+  flex-shrink: 0;
+  text-decoration: none;
+  font-family: inherit;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.nav-rail-item--active {
+  color: var(--_nav-rail--item-color-active);
+  background: var(--_nav-rail--item-background-active);
+}
+.nav-rail-item:hover:not(.nav-rail-item--disabled):not(:disabled) {
+  color: var(--_nav-rail--item-color-active);
+}
+.nav-rail-item--disabled, .nav-rail-item:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.nav-rail-item:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+
+.nav-rail-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_nav-rail--item-icon-size);
+  height: var(--_nav-rail--item-icon-size);
+  line-height: 0;
+}
+.nav-rail-item__icon :global(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.nav-rail-item__label {
+  font-size: var(--_nav-rail--item-label-size);
+  line-height: var(--sc-kit--leading--tight);
+  white-space: nowrap;
+}</style>

package/dist/ui/navigation/cmp.nav-rail-item.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type IconProp } from '../icon';
+type Props = {
+    label: string;
+    /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon: IconProp;
+    /** Render as `<a href>`. Mutually exclusive with `on.click`. */
+    href?: string;
+    /** Highlight as the current section. Consumer-controlled. @default false */
+    active?: boolean;
+    disabled?: boolean;
+    /** Anchor target — only relevant when `href` is set. */
+    target?: string;
+    /** Anchor rel — only relevant when `href` is set. */
+    rel?: string;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set,
+ * `<button>` otherwise. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
+ * source string or a snippet. Tile dimensions are controlled via the `--sc-kit--nav-rail--item-*`
+ * CSS variables (settable on the parent rail or any ancestor).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-rail--item-width` | Tile width | `58px` |
+ * | `--sc-kit--nav-rail--item-icon-size` | Icon box size | `24px` |
+ * | `--sc-kit--nav-rail--item-label-size` | Label font size | `10px` |
+ * | `--sc-kit--nav-rail--item-radius` | Tile radius | `--sc-kit--radius--sm` |
+ * | `--sc-kit--nav-rail--item-color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--nav-rail--item-color--active` | Active text/icon color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--nav-rail--item-background--active` | Active tile background | `--sc-kit--color--bg--menu-active` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/cmp.nav-rail.svelte

@@ -0,0 +1,216 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Icon } from '../icon';
+import { NavRailLocalization } from './nav-rail-localization';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
+const { brand, children, footerToggles } = $props();
+const localization = new NavRailLocalization();
+const SCROLL_STEP = 120;
+let listNode = $state(null);
+let canScrollUp = $state(false);
+let canScrollDown = $state(false);
+const updateScrollState = (node) => {
+    const { scrollTop, scrollHeight, clientHeight } = node;
+    canScrollUp = scrollTop > 0;
+    canScrollDown = scrollTop < scrollHeight - clientHeight - 1;
+};
+const listMounted = (node) => {
+    listNode = node;
+    const observer = new ResizeObserver(() => updateScrollState(node));
+    observer.observe(node);
+    updateScrollState(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+const scrollUp = () => {
+    listNode?.scrollBy({ top: -SCROLL_STEP, behavior: 'smooth' });
+};
+const scrollDown = () => {
+    listNode?.scrollBy({ top: SCROLL_STEP, behavior: 'smooth' });
+};
+</script>
+
+<div class="nav-rail" role="navigation">
+  {#if brand}
+    <div class="nav-rail__brand">
+      {@render brand()}
+    </div>
+  {/if}
+  <div class="nav-rail__scroll-area">
+    {#if canScrollUp}
+      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--up" onclick={scrollUp} aria-label={localization.scrollUp}>
+        <Icon src={IconChevronUp} size="sm" />
+      </button>
+    {/if}
+    <div
+      class="nav-rail__list"
+      class:nav-rail__list--mask-top={canScrollUp && !canScrollDown}
+      class:nav-rail__list--mask-bottom={canScrollDown && !canScrollUp}
+      class:nav-rail__list--mask-both={canScrollUp && canScrollDown}
+      use:listMounted
+      onscroll={(e) => updateScrollState(e.currentTarget)}>
+      {@render children()}
+    </div>
+    {#if canScrollDown}
+      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--down" onclick={scrollDown} aria-label={localization.scrollDown}>
+        <Icon src={IconChevronDown} size="sm" />
+      </button>
+    {/if}
+  </div>
+  {#if footerToggles && footerToggles.length > 0}
+    <div class="nav-rail__footer">
+      {#each footerToggles as toggle, i (i)}
+        <button type="button" class="nav-rail__footer-btn" onclick={toggle.callback} aria-label={toggle.aria}>
+          <Icon src={toggle.icon} />
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+NavRail — first-level icon-and-label navigation column for app shells. 70px wide by default;
+brand / body / footer slots. Scroll buttons and edge-fade masks appear automatically when the
+body overflows. Pass `footerToggles` to render a stack of icon-only buttons at the bottom (e.g. an
+expand toggle). Compose with `NavRailItem` for each tile. Consumer owns active-state, routing, and
+feature gating — the rail is purely presentational.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-rail--width` | Rail width | `70px` |
+| `--sc-kit--nav-rail--item-gap` | Vertical gap between tiles | `26px` |
+| `--sc-kit--nav-rail--background` | Rail background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--nav-rail--border-color` | Right border color | `--sc-kit--color--border` |
+| `--sc-kit--nav-rail--item-width` | Tile width (read by `NavRailItem`) | `58px` |
+| `--sc-kit--nav-rail--item-icon-size` | Tile icon size (read by `NavRailItem`) | `24px` |
+| `--sc-kit--nav-rail--item-label-size` | Tile label font size (read by `NavRailItem`) | `10px` |
+| `--sc-kit--nav-rail--footer-btn--color` | Footer toggle idle color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--nav-rail--footer-btn--color--hover` | Footer toggle hover color | `--sc-kit--color--text--primary` |
+| `--sc-kit--nav-rail--footer-btn--background--hover` | Footer toggle hover background | `--sc-kit--color--bg--menu-active` |
+-->
+<style>.nav-rail {
+  --_nav-rail--width: var(--sc-kit--nav-rail--width, 4.375rem);
+  --_nav-rail--item-gap: var(--sc-kit--nav-rail--item-gap, 1.625rem);
+  --_nav-rail--background: var(--sc-kit--nav-rail--background, var(--sc-kit--color--bg--panel));
+  --_nav-rail--border-color: var(--sc-kit--nav-rail--border-color, var(--sc-kit--color--border));
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: var(--_nav-rail--width);
+  flex-shrink: 0;
+  height: 100%;
+  background: var(--_nav-rail--background);
+  border-right: 1px solid var(--_nav-rail--border-color);
+  padding: 0.25rem 0.25rem 0;
+}
+
+.nav-rail__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 1.5rem 0;
+}
+
+.nav-rail__scroll-area {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  padding-top: 0.5rem;
+}
+.nav-rail__scroll-area:hover {
+  --_scroll-btn-opacity: 1;
+}
+
+.nav-rail__list {
+  --_mask-size: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--_nav-rail--item-gap);
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding-bottom: 1.5rem;
+}
+.nav-rail__list::-webkit-scrollbar {
+  display: none;
+}
+.nav-rail__list--mask-top {
+  mask-image: linear-gradient(to bottom, transparent 0%, black var(--_mask-size), black 100%);
+}
+.nav-rail__list--mask-bottom {
+  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.nav-rail__list--mask-both {
+  mask-image: linear-gradient(to bottom, transparent 0%, black var(--_mask-size), black calc(100% - var(--_mask-size)), transparent 100%);
+}
+
+.nav-rail__scroll-btn {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: transparent;
+  backdrop-filter: blur(2px);
+  border: none;
+  cursor: pointer;
+  color: var(--sc-kit--color--text--secondary);
+  opacity: var(--_scroll-btn-opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.nav-rail__scroll-btn:hover {
+  color: var(--sc-kit--color--text--primary);
+}
+.nav-rail__scroll-btn--up {
+  top: 0;
+  padding-bottom: 0.625rem;
+}
+.nav-rail__scroll-btn--down {
+  bottom: 0;
+  padding-top: 0.625rem;
+}
+
+.nav-rail__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding: 0.75rem 0;
+}
+
+.nav-rail__footer-btn {
+  --_nav-rail--footer-btn-color: var(--sc-kit--nav-rail--footer-btn--color, var(--sc-kit--color--text--secondary));
+  --_nav-rail--footer-btn-color-hover: var(--sc-kit--nav-rail--footer-btn--color--hover, var(--sc-kit--color--text--primary));
+  --_nav-rail--footer-btn-background-hover: var(--sc-kit--nav-rail--footer-btn--background--hover, var(--sc-kit--color--bg--menu-active));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  cursor: pointer;
+  color: var(--_nav-rail--footer-btn-color);
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.nav-rail__footer-btn:hover {
+  background: var(--_nav-rail--footer-btn-background-hover);
+  color: var(--_nav-rail--footer-btn-color-hover);
+}
+.nav-rail__footer-btn:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

package/dist/ui/navigation/cmp.nav-rail.svelte.d.ts

@@ -0,0 +1,40 @@
+export type NavRailFooterToggle = {
+    /** Raw SVG source string (e.g. a fluent-icon `?raw` import). */
+    icon: string;
+    /** Accessible label for the icon-only button. */
+    aria: string;
+    callback: () => void;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Optional brand block at the top (logo / home link). */
+    brand?: Snippet;
+    /** Rail body — typically a stack of `NavRailItem`s. */
+    children: Snippet;
+    /** Icon-only toggle buttons stacked at the bottom of the rail (e.g. expand panel, account). */
+    footerToggles?: NavRailFooterToggle[];
+};
+/**
+ * NavRail — first-level icon-and-label navigation column for app shells. 70px wide by default;
+ * brand / body / footer slots. Scroll buttons and edge-fade masks appear automatically when the
+ * body overflows. Pass `footerToggles` to render a stack of icon-only buttons at the bottom (e.g. an
+ * expand toggle). Compose with `NavRailItem` for each tile. Consumer owns active-state, routing, and
+ * feature gating — the rail is purely presentational.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-rail--width` | Rail width | `70px` |
+ * | `--sc-kit--nav-rail--item-gap` | Vertical gap between tiles | `26px` |
+ * | `--sc-kit--nav-rail--background` | Rail background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--nav-rail--border-color` | Right border color | `--sc-kit--color--border` |
+ * | `--sc-kit--nav-rail--item-width` | Tile width (read by `NavRailItem`) | `58px` |
+ * | `--sc-kit--nav-rail--item-icon-size` | Tile icon size (read by `NavRailItem`) | `24px` |
+ * | `--sc-kit--nav-rail--item-label-size` | Tile label font size (read by `NavRailItem`) | `10px` |
+ * | `--sc-kit--nav-rail--footer-btn--color` | Footer toggle idle color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--nav-rail--footer-btn--color--hover` | Footer toggle hover color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--nav-rail--footer-btn--background--hover` | Footer toggle hover background | `--sc-kit--color--bg--menu-active` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/navigation/index.d.ts

@@ -0,0 +1,8 @@
+export { default as NavMenu } from './cmp.nav-menu.svelte';
+export { default as NavMenuAccountRow } from './cmp.nav-menu-account-row.svelte';
+export { default as NavMenuDivider } from './cmp.nav-menu-divider.svelte';
+export { default as NavMenuGroup } from './cmp.nav-menu-group.svelte';
+export { default as NavMenuHeader } from './cmp.nav-menu-header.svelte';
+export { default as NavMenuItem } from './cmp.nav-menu-item.svelte';
+export { default as NavRail, type NavRailFooterToggle } from './cmp.nav-rail.svelte';
+export { default as NavRailItem } from './cmp.nav-rail-item.svelte';

package/dist/ui/navigation/index.js

@@ -0,0 +1,8 @@
+export { default as NavMenu } from './cmp.nav-menu.svelte';
+export { default as NavMenuAccountRow } from './cmp.nav-menu-account-row.svelte';
+export { default as NavMenuDivider } from './cmp.nav-menu-divider.svelte';
+export { default as NavMenuGroup } from './cmp.nav-menu-group.svelte';
+export { default as NavMenuHeader } from './cmp.nav-menu-header.svelte';
+export { default as NavMenuItem } from './cmp.nav-menu-item.svelte';
+export { default as NavRail } from './cmp.nav-rail.svelte';
+export { default as NavRailItem } from './cmp.nav-rail-item.svelte';

package/dist/ui/navigation/nav-rail-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class NavRailLocalization {
+    get scrollUp(): string;
+    get scrollDown(): string;
+}

package/dist/ui/navigation/nav-rail-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    scrollUp: {
+        en: 'Scroll up',
+        no: 'Rull opp'
+    },
+    scrollDown: {
+        en: 'Scroll down',
+        no: 'Rull ned'
+    }
+};
+export class NavRailLocalization {
+    get scrollUp() {
+        return loc.scrollUp[AppLocale.current];
+    }
+    get scrollDown() {
+        return loc.scrollDown[AppLocale.current];
+    }
+}