@oicl/openbridge-webcomponents-svelte 2.0.0-next.15 → 2.0.0-next.151

package/dist/components/navigation-item-group/ObcNavigationItemGroup.svelte

@@ -1,29 +1,38 @@
 
   <script lang="ts">
     export type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
+export type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/navigation-item-group/navigation-item-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
+import type {TreeBranchType, TreeNavigationItemAlerts} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** The label text displayed for the navigation group. */
-label?: string;
-      /** Optional URL to navigate to when the group label is clicked.
-If set, clicking the group label will navigate to this URL. */
-href?: string | undefined;
-      /** Whether the group is currently checked/selected.
-Use to highlight the group as active. */
-checked?: boolean;
-      /** Visual variant of the navigation group.
-Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').
-Controls the styling and layout of the group and its flyout. */
-variant?: ObcNavigationMenuVariant;
-      /** If true, the flyout panel appears tightly anchored to the group label with compact styling. */
-hug?: boolean;
-     hasIcon?: boolean
+     /** The label text displayed for the navigation group. */
+     label?: string;
+     /** Optional URL to navigate to when the group label is clicked. If set, clicking the group label will navigate to this URL. */
+     href?: string | undefined;
+     /** Whether the group is currently checked/selected. Use to highlight the group as active. */
+     checked?: boolean;
+     /** Visual variant of the navigation group. Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact'). Controls the styling and layout of the group and its flyout. */
+     variant?: ObcNavigationMenuVariant;
+     /** If true, the flyout panel appears tightly anchored to the group label with compact styling. */
+     hug?: boolean;
+     hasIcon?: boolean;
+     /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
+     treeMode?: boolean;
+     /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+     treeBranches?: TreeBranchType[];
+     /** Terminal type for the group header in the Tree variant — one of `regular` (default), `aggregated-header`, or `group-header`. No effect in flat variants. */
+     terminalType?: string;
+      /** [object Object],[object Object],[object Object] */
+alerts?: TreeNavigationItemAlerts | undefined;
+     /** Whether the group starts expanded. Useful for trees that open by default. */
+     defaultOpen?: boolean
    }
       export interface Events {
     onOpen?: (event: CustomEvent<void>) => void
@@ -39,12 +48,10 @@ hug?: boolean;
     use:setProperties={props}
     class={className}
     style={style}
-    onopen={onOpen} >
+    use:forwardEvents={{'open': onOpen}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
 
       {#if children}

package/dist/components/navigation-item-group/ObcNavigationItemGroup.svelte.d.ts

@@ -1,24 +1,31 @@
 import '@oicl/openbridge-webcomponents/dist/components/navigation-item-group/navigation-item-group.js';
 import type { ObcNavigationMenuVariant } from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
+import type { TreeBranchType, TreeNavigationItemAlerts } from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
     /** The label text displayed for the navigation group. */
     label?: string;
-    /** Optional URL to navigate to when the group label is clicked.
-If set, clicking the group label will navigate to this URL. */
+    /** Optional URL to navigate to when the group label is clicked. If set, clicking the group label will navigate to this URL. */
     href?: string | undefined;
-    /** Whether the group is currently checked/selected.
-Use to highlight the group as active. */
+    /** Whether the group is currently checked/selected. Use to highlight the group as active. */
     checked?: boolean;
-    /** Visual variant of the navigation group.
-Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').
-Controls the styling and layout of the group and its flyout. */
+    /** Visual variant of the navigation group. Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact'). Controls the styling and layout of the group and its flyout. */
     variant?: ObcNavigationMenuVariant;
     /** If true, the flyout panel appears tightly anchored to the group label with compact styling. */
     hug?: boolean;
     hasIcon?: boolean;
+    /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
+    treeMode?: boolean;
+    /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
+    treeBranches?: TreeBranchType[];
+    /** Terminal type for the group header in the Tree variant — one of `regular` (default), `aggregated-header`, or `group-header`. No effect in flat variants. */
+    terminalType?: string;
+    /** [object Object],[object Object],[object Object] */
+    alerts?: TreeNavigationItemAlerts | undefined;
+    /** Whether the group starts expanded. Useful for trees that open by default. */
+    defaultOpen?: boolean;
 }
 export interface Events {
     onOpen?: (event: CustomEvent<void>) => void;
@@ -30,6 +37,8 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcNavigationItemGroup: import("svelte").Component<$$ComponentProps, {
     ObcNavigationMenuVariant: typeof ObcNavigationMenuVariant;
+    TreeBranchType: typeof TreeBranchType;
+    TreeNavigationItemAlerts: typeof TreeNavigationItemAlerts;
 }, "">;
 type ObcNavigationItemGroup = ReturnType<typeof ObcNavigationItemGroup>;
 export default ObcNavigationItemGroup;

package/dist/components/navigation-menu/ObcNavigationMenu.svelte

@@ -3,6 +3,7 @@
     export type {ObcNavigationMenuVariant, ObcNavigationMenuFlyoutVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcNavigationMenuVariant, ObcNavigationMenuFlyoutVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import type { Snippet } from 'svelte';
 
@@ -14,13 +15,17 @@
 - `full`: Standard menu with icons and labels (default).
 - `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).
 - `icon-only-large`: Icon-only menu supporting flyouts/groups.
-- `compact`: Minimal, space-saving menu. */
+- `compact`: Minimal, space-saving menu.
+- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth. */
 variant?: ObcNavigationMenuVariant;
-      /** Visual variant of the flyout.
-One of `Full` (default) or `Compact`. */
-flyoutVariant?: ObcNavigationMenuFlyoutVariant;
-      /** When `true`, adapts the layout for small screens (e.g., moves logo into the footer area and adjusts item layout). */
-smallScreen?: boolean
+     /**
+      * Visual variant of the flyout. One of `Full` (default) or `Compact`.
+      *
+      * Available when `variant==Full`.
+      */
+     flyoutVariant?: ObcNavigationMenuFlyoutVariant;
+     /** When `true`, adapts the layout for small screens (e.g., moves logo into the footer area and adjusts item layout). */
+     smallScreen?: boolean
    }
       export interface Events {
     
@@ -40,20 +45,14 @@ smallScreen?: boolean
      >
       
       {#if main}
-        <div slot="main">
-          {@render main()}
-        </div>
+        <NamedSlot name="main" content={main} />
       {/if}
 
       {#if footer}
-        <div slot="footer">
-          {@render footer()}
-        </div>
+        <NamedSlot name="footer" content={footer} />
       {/if}
 
       {#if logo}
-        <div slot="logo">
-          {@render logo()}
-        </div>
+        <NamedSlot name="logo" content={logo} />
       {/if}
     </obc-navigation-menu>

package/dist/components/navigation-menu/ObcNavigationMenu.svelte.d.ts

@@ -9,10 +9,14 @@ export interface Props {
 - `full`: Standard menu with icons and labels (default).
 - `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).
 - `icon-only-large`: Icon-only menu supporting flyouts/groups.
-- `compact`: Minimal, space-saving menu. */
+- `compact`: Minimal, space-saving menu.
+- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth. */
     variant?: ObcNavigationMenuVariant;
-    /** Visual variant of the flyout.
-One of `Full` (default) or `Compact`. */
+    /**
+     * Visual variant of the flyout. One of `Full` (default) or `Compact`.
+     *
+     * Available when `variant==Full`.
+     */
     flyoutVariant?: ObcNavigationMenuFlyoutVariant;
     /** When `true`, adapts the layout for small screens (e.g., moves logo into the footer area and adjusts item layout). */
     smallScreen?: boolean;

package/dist/components/notification-badge-button/ObcNotificationBadgeButton.svelte

@@ -2,48 +2,42 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/notification-badge-button/notification-badge-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Removes the right border for seamless grouping with adjacent buttons.
-Use when this button is not the last in a horizontal group. */
-openRight?: boolean;
-      /** Removes the left border for seamless grouping with adjacent buttons.
-Use when this button is not the first in a horizontal group. */
-openLeft?: boolean;
-      /** Applies rounded corners to the left side of the button.
-Use for the first button in a group or when aligning to a container's left edge. */
-cornerLeft?: boolean;
-      /** Applies rounded corners to the right side of the button.
-Use for the last button in a group or when aligning to a container's right edge. */
-cornerRight?: boolean;
-      /** Applies icon-specific styling for icon-only buttons.
-When true, supply an icon in the default slot. */
-icon?: boolean;
-      /** Disables the button, preventing user interaction and applying a muted style. */
-disabled?: boolean;
-      /** Applies an indented background style for emphasis or grouping.
-Useful for visually separating the button from others or indicating a secondary action. */
-indent?: boolean
+     /** Removes the right border for seamless grouping with adjacent buttons. Use when this button is not the last in a horizontal group. */
+     openRight?: boolean;
+     /** Removes the left border for seamless grouping with adjacent buttons. Use when this button is not the first in a horizontal group. */
+     openLeft?: boolean;
+     /** Applies rounded corners to the left side of the button. Use for the first button in a group or when aligning to a container's left edge. */
+     cornerLeft?: boolean;
+     /** Applies rounded corners to the right side of the button. Use for the last button in a group or when aligning to a container's right edge. */
+     cornerRight?: boolean;
+     /** Applies icon-specific styling for icon-only buttons. When true, supply an icon in the default slot. */
+     icon?: boolean;
+     /** Disables the button, preventing user interaction and applying a muted style. */
+     disabled?: boolean;
+     /** Applies an indented background style for emphasis or grouping. Useful for visually separating the button from others or indicating a secondary action. */
+     indent?: boolean
    }
       export interface Events {
-    
+    onClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onClick, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-notification-badge-button
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'click': onClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/notification-badge-button/ObcNotificationBadgeButton.svelte.d.ts

@@ -3,28 +3,23 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Removes the right border for seamless grouping with adjacent buttons.
-Use when this button is not the last in a horizontal group. */
+    /** Removes the right border for seamless grouping with adjacent buttons. Use when this button is not the last in a horizontal group. */
     openRight?: boolean;
-    /** Removes the left border for seamless grouping with adjacent buttons.
-Use when this button is not the first in a horizontal group. */
+    /** Removes the left border for seamless grouping with adjacent buttons. Use when this button is not the first in a horizontal group. */
     openLeft?: boolean;
-    /** Applies rounded corners to the left side of the button.
-Use for the first button in a group or when aligning to a container's left edge. */
+    /** Applies rounded corners to the left side of the button. Use for the first button in a group or when aligning to a container's left edge. */
     cornerLeft?: boolean;
-    /** Applies rounded corners to the right side of the button.
-Use for the last button in a group or when aligning to a container's right edge. */
+    /** Applies rounded corners to the right side of the button. Use for the last button in a group or when aligning to a container's right edge. */
     cornerRight?: boolean;
-    /** Applies icon-specific styling for icon-only buttons.
-When true, supply an icon in the default slot. */
+    /** Applies icon-specific styling for icon-only buttons. When true, supply an icon in the default slot. */
     icon?: boolean;
     /** Disables the button, preventing user interaction and applying a muted style. */
     disabled?: boolean;
-    /** Applies an indented background style for emphasis or grouping.
-Useful for visually separating the button from others or indicating a secondary action. */
+    /** Applies an indented background style for emphasis or grouping. Useful for visually separating the button from others or indicating a secondary action. */
     indent?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/notification-button/ObcNotificationButton.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import type { Snippet } from 'svelte';
 
@@ -58,11 +59,9 @@ ariaLabel?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onobc-click={onObcClick} >
+    use:forwardEvents={{'obc-click': onObcClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-notification-button>

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-floating-item/notification-floating-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import type { Snippet } from 'svelte';
 
@@ -19,19 +20,14 @@ type?: ObcFloatingItemType;
 - `vertical`: Content and actions are stacked.
 Default is `horizontal`. */
 direction?: ObcFloatingItemDirection;
-      /** If true, displays a timestamp label (e.g., "09:12:46") in the notification.
-Default is false. */
-hasTimestamp?: boolean;
-      /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification.
-Default is false. */
-hasDay?: boolean;
-      /** If true, displays a primary action button (e.g., "Close").
-Default is false. */
-action?: boolean;
-      /** If true, displays a secondary action button (e.g., "Undo").
-Only available if `action` is also true.
-Default is false. */
-action2?: boolean;
+     /** If true, displays a timestamp label (e.g., "09:12:46") in the notification. Default is false. */
+     hasTimestamp?: boolean;
+     /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification. Default is false. */
+     hasDay?: boolean;
+     /** If true, displays a primary action button (e.g., "Close"). Default is false. */
+     action?: boolean;
+     /** If true, displays a secondary action button (e.g., "Undo"). Only available if `action` is also true. Default is false. */
+     action2?: boolean;
       /** Sets the line type for the notification content.
 - `singleLine`: Compact, single-line layout.
 - `multiLine`: Supports longer, multi-line descriptions.
@@ -45,70 +41,47 @@ lineType?: ObcFloatingItemLineType
   }
       export interface Slots {
   primaryIcon?: Snippet;
-  secondaryIcon?: Snippet;
   title?: Snippet;
   description?: Snippet;
   time?: Snippet;
   day?: Snippet;
-  action?: Snippet;
-  action2?: Snippet
+  actionSnippet?: Snippet;
+  action2Snippet?: Snippet
 }
-      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, action, action2, ...props} = $props<Props & Events & Slots>();
+      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-notification-floating-item
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick}
-   onaction2-click={onAction2Click}
-   ondismiss-click={onDismissClick} >
+    use:forwardEvents={{'action-click': onActionClick, 'action2-click': onAction2Click, 'dismiss-click': onDismissClick}} >
       
       {#if primaryIcon}
-        <div slot="primary-icon">
-          {@render primaryIcon()}
-        </div>
-      {/if}
-
-      {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
+        <NamedSlot name="primary-icon" content={primaryIcon} />
       {/if}
 
       {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
+        <NamedSlot name="title" content={title} />
       {/if}
 
       {#if description}
-        <div slot="description">
-          {@render description()}
-        </div>
+        <NamedSlot name="description" content={description} />
       {/if}
 
       {#if time}
-        <div slot="time">
-          {@render time()}
-        </div>
+        <NamedSlot name="time" content={time} />
       {/if}
 
       {#if day}
-        <div slot="day">
-          {@render day()}
-        </div>
+        <NamedSlot name="day" content={day} />
       {/if}
 
-      {#if action}
-        <div slot="action">
-          {@render action()}
-        </div>
+      {#if actionSnippet}
+        <NamedSlot name="action" content={actionSnippet} />
       {/if}
 
-      {#if action2}
-        <div slot="action2">
-          {@render action2()}
-        </div>
+      {#if action2Snippet}
+        <NamedSlot name="action2" content={action2Snippet} />
       {/if}
     </obc-notification-floating-item>

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.svelte.d.ts

@@ -14,18 +14,13 @@ Default is `regular`. */
 - `vertical`: Content and actions are stacked.
 Default is `horizontal`. */
     direction?: ObcFloatingItemDirection;
-    /** If true, displays a timestamp label (e.g., "09:12:46") in the notification.
-Default is false. */
+    /** If true, displays a timestamp label (e.g., "09:12:46") in the notification. Default is false. */
     hasTimestamp?: boolean;
-    /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification.
-Default is false. */
+    /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification. Default is false. */
     hasDay?: boolean;
-    /** If true, displays a primary action button (e.g., "Close").
-Default is false. */
+    /** If true, displays a primary action button (e.g., "Close"). Default is false. */
     action?: boolean;
-    /** If true, displays a secondary action button (e.g., "Undo").
-Only available if `action` is also true.
-Default is false. */
+    /** If true, displays a secondary action button (e.g., "Undo"). Only available if `action` is also true. Default is false. */
     action2?: boolean;
     /** Sets the line type for the notification content.
 - `singleLine`: Compact, single-line layout.
@@ -40,13 +35,12 @@ export interface Events {
 }
 export interface Slots {
     primaryIcon?: Snippet;
-    secondaryIcon?: Snippet;
     title?: Snippet;
     description?: Snippet;
     time?: Snippet;
     day?: Snippet;
-    action?: Snippet;
-    action2?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcNotificationFloatingItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/notification-menu-item/ObcNotificationMenuItem.svelte

@@ -2,22 +2,23 @@
   <script lang="ts">
     export type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-menu-item/notification-menu-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** When true, renders the `icon` slot for a secondary icon. */
-hasIcon?: boolean;
+     /** When true, renders the `icon` slot for a secondary icon. */
+     hasIcon?: boolean;
      title?: string;
      description?: string;
      day?: string;
      time?: string;
      open?: boolean;
-      /** Layout size: `single-line` (default) or `double-line`. */
-size?: ObcMessageMenuItemSize;
+     /** Layout size: `single-line` (default) or `double-line`. */
+     size?: ObcMessageMenuItemSize;
      primaryActionLabel?: string;
      secondaryActionLabel?: string
    }
@@ -36,13 +37,9 @@ size?: ObcMessageMenuItemSize;
     use:setProperties={props}
     class={className}
     style={style}
-    onprimary-action-click={onPrimaryActionClick}
-   onsecondary-action-click={onSecondaryActionClick}
-   onitem-click={onItemClick} >
+    use:forwardEvents={{'primary-action-click': onPrimaryActionClick, 'secondary-action-click': onSecondaryActionClick, 'item-click': onItemClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-notification-menu-item>