@streamscloud/kit 0.9.9 → 0.9.11

package/dist/ui/listing-card/cmp.listing-card.svelte

@@ -103,11 +103,6 @@ card a click target without nesting `<button>` elements with the action snippet.
   overflow: hidden;
   pointer-events: none;
 }
-.listing-card__preview :global(img),
-.listing-card__preview :global(svg) {
-  max-width: 100%;
-  max-height: 100%;
-}
 .listing-card__body {
   position: relative;
   z-index: 1;

package/dist/ui/listing-card/cmp.listing-card.svelte.d.ts

@@ -8,7 +8,7 @@ type Props = {
         label: string;
         tone?: StatusTone;
     };
-    /** Top preview area — image, illustration, screenshot, gradient. Omit to skip the preview. */
+    /** Top preview area — image, illustration, screenshot, gradient. Consumer sizes its own content (e.g. `width:100%`). Omit to skip the preview. */
     preview?: Snippet;
     /** Action slot, typically a kit `<Button size="sm" variant="outline">`. */
     action?: Snippet;

package/dist/ui/navigation/cmp.nav-menu-header.svelte

@@ -1,17 +1,56 @@
-<script lang="ts">const { label } = $props();
+<script lang="ts">const { label, fontFamily = 'mono', divider = false } = $props();
+export {};
 </script>
 
-<div class="nav-menu-header">{label}</div>
+<div
+  class="nav-menu-header"
+  class:nav-menu-header--mono={fontFamily === 'mono'}
+  class:nav-menu-header--sans={fontFamily === 'sans'}
+  class:nav-menu-header--display={fontFamily === 'display'}
+  class:nav-menu-header--divided={divider}>
+  {label}
+</div>
 
 <!--
 @component
-NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Semibold, 14px. Use one per
-`NavMenuGroup`.
+NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Monospace 400 by default;
+non-mono families default to weight 500. Use one per `NavMenuGroup`. Pass `divider` to draw a bottom
+separator (same style as `NavMenuDivider`), so the header itself groups the items below it without a
+standalone divider and wider spacing.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--nav-menu-header--font-family` | Label font family | `var(--sc-kit--font--mono)` |
+| `--sc-kit--nav-menu-header--font-weight` | Label font weight | `400` (mono) / `500` (other families) |
 -->
 <style>.nav-menu-header {
+  --_nav-menu-header--font-family: var(--sc-kit--nav-menu-header--font-family, var(--_nav-menu-header--font-family-default));
+  --_nav-menu-header--font-weight: var(--sc-kit--nav-menu-header--font-weight, var(--_nav-menu-header--font-weight-default));
   padding: var(--sc-kit--space--2) var(--sc-kit--space--5);
+  font-family: var(--_nav-menu-header--font-family), sans-serif;
   font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--semibold);
+  font-weight: var(--_nav-menu-header--font-weight);
   line-height: var(--sc-kit--leading--tight);
   color: var(--sc-kit--color--text--secondary);
+}
+.nav-menu-header--mono {
+  --_nav-menu-header--font-family-default: var(--sc-kit--font--mono);
+  --_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--regular);
+}
+.nav-menu-header--sans {
+  --_nav-menu-header--font-family-default: var(--sc-kit--font--sans);
+  --_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--medium);
+}
+.nav-menu-header--display {
+  --_nav-menu-header--font-family-default: var(--sc-kit--font--display);
+  --_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--medium);
+}
+.nav-menu-header--divided::after {
+  content: "";
+  display: block;
+  height: 1px;
+  margin-block-start: var(--sc-kit--space--2);
+  margin-inline: calc(var(--sc-kit--space--4) - var(--sc-kit--space--5));
+  background: var(--sc-kit--color--border);
 }</style>

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

@@ -1,9 +1,22 @@
+import type { KitFontFamily } from '../../fonts';
 type Props = {
     label: string;
+    /** Label font family; each family carries its own default weight (mono → 400, others → 500). Overridable via `--sc-kit--nav-menu-header--font-family`. @default 'mono' */
+    fontFamily?: KitFontFamily;
+    /** Draw a bottom separator (same style as `NavMenuDivider`) under the label. @default false */
+    divider?: boolean;
 };
 /**
- * NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Semibold, 14px. Use one per
- * `NavMenuGroup`.
+ * NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Monospace 400 by default;
+ * non-mono families default to weight 500. Use one per `NavMenuGroup`. Pass `divider` to draw a bottom
+ * separator (same style as `NavMenuDivider`), so the header itself groups the items below it without a
+ * standalone divider and wider spacing.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--nav-menu-header--font-family` | Label font family | `var(--sc-kit--font--mono)` |
+ * | `--sc-kit--nav-menu-header--font-weight` | Label font weight | `400` (mono) / `500` (other families) |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -57,7 +57,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--nav-menu-item--gap` | Gap between icon and label | `18px` |
-| `--sc-kit--nav-menu-item--icon-size` | Icon box size | `20px` |
+| `--sc-kit--nav-menu-item--icon-size` | Icon size (box + glyph) | `18px` |
 | `--sc-kit--nav-menu-item--radius` | Row radius | `--sc-kit--radius--sm` |
 | `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
 | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
@@ -69,7 +69,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
 -->
 <style>.nav-menu-item {
   --_nav-menu-item--gap: var(--sc-kit--nav-menu-item--gap, 1.125rem);
-  --_nav-menu-item--icon-size: var(--sc-kit--nav-menu-item--icon-size, 1.25rem);
+  --_nav-menu-item--icon-size: var(--sc-kit--nav-menu-item--icon-size, 1.125rem);
   --_nav-menu-item--radius: var(--sc-kit--nav-menu-item--radius, var(--sc-kit--radius--sm));
   --_nav-menu-item--color: var(--sc-kit--nav-menu-item--color, var(--sc-kit--color--text--secondary));
   --_nav-menu-item--color-active: var(--sc-kit--nav-menu-item--color--active, var(--sc-kit--color--text--primary));
@@ -112,6 +112,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
 }
 
 .nav-menu-item__icon {
+  --sc-kit--icon--size: var(--_nav-menu-item--icon-size);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -121,11 +122,6 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
   height: var(--_nav-menu-item--icon-size);
   line-height: 0;
 }
-.nav-menu-item__icon :global(svg) {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
 
 .nav-menu-item__badge {
   position: absolute;

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

@@ -28,7 +28,7 @@ type Props = {
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--nav-menu-item--gap` | Gap between icon and label | `18px` |
- * | `--sc-kit--nav-menu-item--icon-size` | Icon box size | `20px` |
+ * | `--sc-kit--nav-menu-item--icon-size` | Icon size (box + glyph) | `18px` |
  * | `--sc-kit--nav-menu-item--radius` | Row radius | `--sc-kit--radius--sm` |
  * | `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
  * | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |

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

@@ -50,7 +50,7 @@ CSS variables (settable on the parent rail or any ancestor).
 | 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-icon-size` | Icon size (box + glyph) | `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` |
@@ -98,6 +98,7 @@ CSS variables (settable on the parent rail or any ancestor).
 }
 
 .nav-rail-item__icon {
+  --sc-kit--icon--size: var(--_nav-rail--item-icon-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -105,11 +106,6 @@ CSS variables (settable on the parent rail or any ancestor).
   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);

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

@@ -26,7 +26,7 @@ type Props = {
  * | 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-icon-size` | Icon size (box + glyph) | `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` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",