@streamscloud/kit 0.34.0 → 0.35.0

package/dist/ui/grid-card/cmp.grid-card-media.svelte

@@ -118,9 +118,11 @@ The play glyph of a playable item is a `PlayIndicator` — size and shadow are t
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
+| `--sc-kit--grid-card--media--padding` | Inset between the media backdrop and the image / video | `0` |
 -->
 
 <style>.grid-card-media {
+  --_grid-card-media--padding: var(--sc-kit--grid-card--media--padding, 0);
   width: 100%;
   margin-bottom: 0.5rem;
 }
@@ -153,6 +155,7 @@ The play glyph of a playable item is a `PlayIndicator` — size and shadow are t
 .grid-card-media__slide {
   width: 100%;
   height: 100%;
+  padding: var(--_grid-card-media--padding);
   background-color: light-dark(#ffffff, #000000);
 }
 .grid-card-media__duration-anchor {

package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts

@@ -29,6 +29,7 @@ type Props = {
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
+ * | `--sc-kit--grid-card--media--padding` | Inset between the media backdrop and the image / video | `0` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,6 +1,7 @@
 <script lang="ts">import { IconSlot } from '../icon';
 const { label, icon, href, active = false, activeStyle = 'plain', disabled = false, badge, target, rel, on } = $props();
 const activeFilled = $derived(active && activeStyle === 'filled');
+const activePlain = $derived(active && activeStyle === 'plain');
 const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
 const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
 const handleClick = (event) => {
@@ -26,6 +27,7 @@ const handleClick = (event) => {
     class="nav-menu-item"
     class:nav-menu-item--active={active}
     class:nav-menu-item--active-filled={activeFilled}
+    class:nav-menu-item--active-plain={activePlain}
     href={href}
     target={target}
     rel={rel}
@@ -39,6 +41,7 @@ const handleClick = (event) => {
     class="nav-menu-item"
     class:nav-menu-item--active={active}
     class:nav-menu-item--active-filled={activeFilled}
+    class:nav-menu-item--active-plain={activePlain}
     class:nav-menu-item--disabled={disabled}
     disabled={disabled}
     aria-current={active ? 'page' : undefined}
@@ -54,8 +57,8 @@ the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string
 Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
 with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
 (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
-active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
-working on the active row, `'filled'` plates it and suppresses hover there.
+active row reads: `'plain'` (default) drops the plate, so color plus a heavier label weight carry the
+signal and hover keeps working on the active row; `'filled'` plates it and suppresses hover there.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -66,6 +69,7 @@ working on the active row, `'filled'` plates it and suppresses hover there.
 | `--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` |
 | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--nav-menu-item--font-weight--active` | Active label weight — `activeStyle="plain"` only | `--sc-kit--font-weight--semibold` |
 | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
 | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
 | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
@@ -78,6 +82,7 @@ working on the active row, `'filled'` plates it and suppresses hover there.
   --_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));
   --_nav-menu-item--color-disabled: var(--sc-kit--nav-menu-item--color--disabled, var(--sc-kit--color--text--muted));
+  --_nav-menu-item--font-weight-active: var(--sc-kit--nav-menu-item--font-weight--active, var(--sc-kit--font-weight--semibold));
   --_nav-menu-item--background-hover: var(--sc-kit--nav-menu-item--background--hover, var(--sc-kit--color--bg--hover));
   --_nav-menu-item--background-active: var(--sc-kit--nav-menu-item--background--active, var(--sc-kit--color--bg--menu-active));
   --_nav-menu-item--badge-background: var(--sc-kit--nav-menu-item--badge--background, var(--sc-kit--color--accent));
@@ -106,6 +111,9 @@ working on the active row, `'filled'` plates it and suppresses hover there.
 .nav-menu-item--active-filled {
   background: var(--_nav-menu-item--background-active);
 }
+.nav-menu-item--active-plain {
+  font-weight: var(--_nav-menu-item--font-weight-active);
+}
 .nav-menu-item--disabled, .nav-menu-item:disabled {
   color: var(--_nav-menu-item--color-disabled);
   cursor: default;

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

@@ -26,8 +26,8 @@ type Props = {
  * Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
  * with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
  * (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
- * active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
- * working on the active row, `'filled'` plates it and suppresses hover there.
+ * active row reads: `'plain'` (default) drops the plate, so color plus a heavier label weight carry the
+ * signal and hover keeps working on the active row; `'filled'` plates it and suppresses hover there.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -38,6 +38,7 @@ type Props = {
  * | `--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` |
  * | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--nav-menu-item--font-weight--active` | Active label weight — `activeStyle="plain"` only | `--sc-kit--font-weight--semibold` |
  * | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
  * | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
  * | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |

package/dist/ui/page-layout/cmp.panel-content.svelte

@@ -13,9 +13,9 @@ PanelContent — default padded wrapper for the body of a `PagePanel`.
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--panel-content--padding` | Body padding | `16px` |
+| `--sc-kit--panel-content--padding` | Body padding | `20px 24px` |
 -->
 <style>.panel-content {
-  --_panel-content--padding: var(--sc-kit--panel-content--padding, 1rem);
+  --_panel-content--padding: var(--sc-kit--panel-content--padding, var(--sc-kit--space--5) var(--sc-kit--space--6));
   padding: var(--_panel-content--padding);
 }</style>

package/dist/ui/page-layout/cmp.panel-content.svelte.d.ts

@@ -8,7 +8,7 @@ type Props = {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--panel-content--padding` | Body padding | `16px` |
+ * | `--sc-kit--panel-content--padding` | Body padding | `20px 24px` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -47,6 +47,9 @@ declare function $$render<T>(): {
          * Cascade between group.value and children:
          * - `'children-only'` (default) — picking a child adds only the child; group's own `value` stays independent.
          * - `'children-include-parent'` — picking any child auto-adds the group's `value` to the selection; unpicking the last child removes it. Tri-state group headers light up in this mode.
+         *
+         * Combining `'children-include-parent'` with `groupHeader='value'` is coherent but unusual: the cascade and the independent header both write the
+         * group's own `value`, so a child pick can re-add a parent the user just cleared from the header. Pair `groupHeader='value'` with `'children-only'`.
          * @default 'children-only'
          */
         selectionMode?: "children-only" | "children-include-parent";

package/dist/ui/table/_table-styles.scss

@@ -56,7 +56,7 @@
       background: var(--_table--card--background);
       border: 1px solid var(--_table--card--border-color);
       border-radius: var(--_table--card--border-radius);
-      overflow: hidden;
+      // No overflow here: the radius already clips via the base overflow-x, and `hidden` would kill both scroll axes.
     }
   }
 

package/dist/ui/table/cmp.table-draggable.svelte

@@ -243,7 +243,6 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
   background: var(--_table--card--background);
   border: 1px solid var(--_table--card--border-color);
   border-radius: var(--_table--card--border-radius);
-  overflow: hidden;
 }
 
 .table {

package/dist/ui/table/cmp.table.svelte

@@ -224,7 +224,6 @@ variant ships no dnd code).
   background: var(--_table--card--background);
   border: 1px solid var(--_table--card--border-color);
   border-radius: var(--_table--card--border-radius);
-  overflow: hidden;
 }
 
 .table {

package/package.json

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