@oicl/openbridge-webcomponents-svelte 2.0.0-next.1 → 2.0.0-next.100

package/dist/components/advice-floating-item/ObcAdviceFloatingItem.svelte.d.ts

@@ -40,13 +40,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 ObcAdviceFloatingItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/advice-message-item/ObcAdviceMessageItem.svelte

@@ -62,17 +62,9 @@ emptyText?: string
     onActionClick?: (event: CustomEvent<void>) => void
   }
       export interface Slots {
-  primaryIcon?: Snippet;
-  secondaryIcon?: Snippet;
-  title?: Snippet;
-  description?: Snippet;
-  time?: Snippet;
-  timeSecondary?: Snippet;
-  actionText?: Snippet;
-  actionIcon?: Snippet;
-  empty?: Snippet
+  secondaryIcon?: Snippet
 }
-      const {onMessageClick, onActionClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, timeSecondary, actionText, actionIcon, empty, ...props} = $props<Props & Events & Slots>();
+      const {onMessageClick, onActionClick, class: className, style, secondaryIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-advice-message-item
@@ -82,57 +74,9 @@ emptyText?: string
     onmessage-click={onMessageClick}
    onaction-click={onActionClick} >
       
-      {#if primaryIcon}
-        <div slot="primary-icon">
-          {@render primaryIcon()}
-        </div>
-      {/if}
-
       {#if secondaryIcon}
         <div slot="secondary-icon">
           {@render secondaryIcon()}
         </div>
       {/if}
-
-      {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
-      {/if}
-
-      {#if description}
-        <div slot="description">
-          {@render description()}
-        </div>
-      {/if}
-
-      {#if time}
-        <div slot="time">
-          {@render time()}
-        </div>
-      {/if}
-
-      {#if timeSecondary}
-        <div slot="time-secondary">
-          {@render timeSecondary()}
-        </div>
-      {/if}
-
-      {#if actionText}
-        <div slot="action-text">
-          {@render actionText()}
-        </div>
-      {/if}
-
-      {#if actionIcon}
-        <div slot="action-icon">
-          {@render actionIcon()}
-        </div>
-      {/if}
-
-      {#if empty}
-        <div slot="empty">
-          {@render empty()}
-        </div>
-      {/if}
     </obc-advice-message-item>

package/dist/components/advice-message-item/ObcAdviceMessageItem.svelte.d.ts

@@ -57,15 +57,7 @@ export interface Events {
     onActionClick?: (event: CustomEvent<void>) => void;
 }
 export interface Slots {
-    primaryIcon?: Snippet;
     secondaryIcon?: Snippet;
-    title?: Snippet;
-    description?: Snippet;
-    time?: Snippet;
-    timeSecondary?: Snippet;
-    actionText?: Snippet;
-    actionIcon?: Snippet;
-    empty?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcAdviceMessageItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/alert-floating-item/ObcAlertFloatingItem.svelte

@@ -18,21 +18,69 @@
      lineType?: ObcFloatingItemLineType
    }
       export interface Events {
-    
+    onActionClick?: (event: CustomEvent) => void;
+    onAction2Click?: (event: CustomEvent) => void;
+    onDismissClick?: (event: CustomEvent) => void
   }
       export interface Slots {
-  children?: Snippet
+  primaryIcon?: Snippet;
+  title?: Snippet;
+  description?: Snippet;
+  time?: Snippet;
+  day?: Snippet;
+  actionSnippet?: Snippet;
+  action2Snippet?: Snippet
 }
-      const { class: className, style, children, ...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-alert-floating-item
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    onaction-click={onActionClick}
+   onaction2-click={onAction2Click}
+   ondismiss-click={onDismissClick} >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if primaryIcon}
+        <div slot="primary-icon">
+          {@render primaryIcon()}
+        </div>
+      {/if}
+
+      {#if title}
+        <div slot="title">
+          {@render title()}
+        </div>
+      {/if}
+
+      {#if description}
+        <div slot="description">
+          {@render description()}
+        </div>
+      {/if}
+
+      {#if time}
+        <div slot="time">
+          {@render time()}
+        </div>
+      {/if}
+
+      {#if day}
+        <div slot="day">
+          {@render day()}
+        </div>
+      {/if}
+
+      {#if actionSnippet}
+        <div slot="action">
+          {@render actionSnippet()}
+        </div>
+      {/if}
+
+      {#if action2Snippet}
+        <div slot="action2">
+          {@render action2Snippet()}
+        </div>
+      {/if}
     </obc-alert-floating-item>

package/dist/components/alert-floating-item/ObcAlertFloatingItem.svelte.d.ts

@@ -13,9 +13,18 @@ export interface Props {
     lineType?: ObcFloatingItemLineType;
 }
 export interface Events {
+    onActionClick?: (event: CustomEvent) => void;
+    onAction2Click?: (event: CustomEvent) => void;
+    onDismissClick?: (event: CustomEvent) => void;
 }
 export interface Slots {
-    children?: Snippet;
+    primaryIcon?: Snippet;
+    title?: Snippet;
+    description?: Snippet;
+    time?: Snippet;
+    day?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcAlertFloatingItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/alert-frame/ObcAlertFrame.svelte

@@ -1,9 +1,11 @@
 
   <script lang="ts">
-    export type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus, AlertFrameTextSize} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+    export type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameMode, AlertFrameTextSize} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+export type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
       import '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
       import { setProperties } from "../../util.js";
-      import type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus, AlertFrameTextSize} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+      import type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameMode, AlertFrameTextSize} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -24,8 +26,20 @@ thickness?: ObcAlertFrameThickness;
       /** Status of the alert, controlling color scheme and icon.
 - `alarm`: Highest severity (default).
 - `warning`: Medium severity.
-- `caution`: Lower severity. */
-status?: ObcAlertFrameStatus;
+- `caution`: Lower severity.
+- `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents. */
+status?: AlertType;
+      /** Acknowledgement lifecycle state, controlling the frame's blinking/animation.
+- `acked-active`: Active and acknowledged (default); no blinking.
+- `unacked-active`: Active and not yet acknowledged; blinks.
+- `unacked-rectified`: Condition cleared but not yet acknowledged. */
+mode?: ObcAlertFrameMode;
+      /** When true, the frame wraps and sizes itself to its slotted content instead
+of overlaying a fixed region. Reflected to an attribute for CSS styling. */
+wrapContent?: boolean;
+      /** When true, the frame stretches to fill the full width of its container
+instead of hugging its content. Reflected to an attribute for CSS styling. */
+fullWidth?: boolean;
       /** If true, the top-left corner will be sharp (not rounded). */
 sharpEdgeTopLeft?: boolean;
       /** If true, the top-right corner will be sharp (not rounded). */

package/dist/components/alert-frame/ObcAlertFrame.svelte.d.ts

@@ -1,5 +1,6 @@
 import '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
-import type { ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus, AlertFrameTextSize } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type { ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameMode, AlertFrameTextSize } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type { AlertType } from '@oicl/openbridge-webcomponents/dist/types.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -19,8 +20,20 @@ Default: `small-side-flip` */
     /** Status of the alert, controlling color scheme and icon.
 - `alarm`: Highest severity (default).
 - `warning`: Medium severity.
-- `caution`: Lower severity. */
-    status?: ObcAlertFrameStatus;
+- `caution`: Lower severity.
+- `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents. */
+    status?: AlertType;
+    /** Acknowledgement lifecycle state, controlling the frame's blinking/animation.
+- `acked-active`: Active and acknowledged (default); no blinking.
+- `unacked-active`: Active and not yet acknowledged; blinks.
+- `unacked-rectified`: Condition cleared but not yet acknowledged. */
+    mode?: ObcAlertFrameMode;
+    /** When true, the frame wraps and sizes itself to its slotted content instead
+of overlaying a fixed region. Reflected to an attribute for CSS styling. */
+    wrapContent?: boolean;
+    /** When true, the frame stretches to fill the full width of its container
+instead of hugging its content. Reflected to an attribute for CSS styling. */
+    fullWidth?: boolean;
     /** If true, the top-left corner will be sharp (not rounded). */
     sharpEdgeTopLeft?: boolean;
     /** If true, the top-right corner will be sharp (not rounded). */
@@ -45,8 +58,9 @@ type $$ComponentProps = Props & Events & Slots;
 declare const ObcAlertFrame: import("svelte").Component<$$ComponentProps, {
     ObcAlertFrameType: typeof ObcAlertFrameType;
     ObcAlertFrameThickness: typeof ObcAlertFrameThickness;
-    ObcAlertFrameStatus: typeof ObcAlertFrameStatus;
+    ObcAlertFrameMode: typeof ObcAlertFrameMode;
     AlertFrameTextSize: typeof AlertFrameTextSize;
+    AlertType: typeof AlertType;
 }, "">;
 type ObcAlertFrame = ReturnType<typeof ObcAlertFrame>;
 export default ObcAlertFrame;

package/dist/components/alert-frame/ObiCriticalBadge.svelte

@@ -0,0 +1,32 @@
+
+  <script lang="ts">
+    
+      import '@oicl/openbridge-webcomponents/dist/components/alert-frame/critical-badge.js';
+      import { setProperties } from "../../util.js";
+      
+      import type { Snippet } from 'svelte';
+
+      export interface Props {
+     class?: string;
+     style?: string;
+     
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  children?: Snippet
+}
+      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <obi-critical-badge
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+    {#if children}
+      {@render children()}
+    {/if}
+    </obi-critical-badge>

package/dist/components/alert-frame/ObiCriticalBadge.svelte.d.ts

@@ -0,0 +1,15 @@
+import '@oicl/openbridge-webcomponents/dist/components/alert-frame/critical-badge.js';
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    style?: string;
+}
+export interface Events {
+}
+export interface Slots {
+    children?: Snippet;
+}
+type $$ComponentProps = Props & Events & Slots;
+declare const ObiCriticalBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type ObiCriticalBadge = ReturnType<typeof ObiCriticalBadge>;
+export default ObiCriticalBadge;

package/dist/components/alert-frame/ObiDiagnosticBadge.svelte

@@ -0,0 +1,32 @@
+
+  <script lang="ts">
+    
+      import '@oicl/openbridge-webcomponents/dist/components/alert-frame/diagnostic-badge.js';
+      import { setProperties } from "../../util.js";
+      
+      import type { Snippet } from 'svelte';
+
+      export interface Props {
+     class?: string;
+     style?: string;
+     
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  children?: Snippet
+}
+      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <obi-diagnostic-badge
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+    {#if children}
+      {@render children()}
+    {/if}
+    </obi-diagnostic-badge>

package/dist/components/alert-frame/ObiDiagnosticBadge.svelte.d.ts

@@ -0,0 +1,15 @@
+import '@oicl/openbridge-webcomponents/dist/components/alert-frame/diagnostic-badge.js';
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    style?: string;
+}
+export interface Events {
+}
+export interface Slots {
+    children?: Snippet;
+}
+type $$ComponentProps = Props & Events & Slots;
+declare const ObiDiagnosticBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type ObiDiagnosticBadge = ReturnType<typeof ObiDiagnosticBadge>;
+export default ObiDiagnosticBadge;

package/dist/components/alert-icon/ObcAlertIcon.svelte

@@ -9,10 +9,11 @@
       export interface Props {
      class?: string;
      style?: string;
-     type?: AlertType;
-     acknowledged?: boolean;
-     active?: boolean;
-     outline?: boolean
+     alertType?: AlertType;
+     type?: AlertType | undefined;
+     acknowledged?: boolean | undefined;
+     active?: boolean | undefined;
+     silenced?: boolean | undefined
    }
       export interface Events {
     

package/dist/components/alert-icon/ObcAlertIcon.svelte.d.ts

@@ -4,10 +4,11 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    type?: AlertType;
-    acknowledged?: boolean;
-    active?: boolean;
-    outline?: boolean;
+    alertType?: AlertType;
+    type?: AlertType | undefined;
+    acknowledged?: boolean | undefined;
+    active?: boolean | undefined;
+    silenced?: boolean | undefined;
 }
 export interface Events {
 }

package/dist/components/alert-menu/ObcAlertMenu.svelte

@@ -18,27 +18,30 @@ hasShelved?: boolean;
 Should be set to true only when there are unacknowledged alerts in view.
 
 Default: false. */
-canAckAll?: boolean
+canAckAll?: boolean;
+      /** If true, shows the "Silence" button in the action bar.
+When hidden, the "ACK visible" button expands to fill the freed space.
+
+Default: true. */
+showSilenceButton?: boolean;
+      /** If true, shows the "Alerts" navigation button in the action bar.
+When hidden, the "ACK visible" button expands to fill the freed space.
+
+Default: true. */
+showAlertListButton?: boolean
    }
       export interface Events {
     onAckAllVisibleClick?: (event: ObcAckAllVisibleClickEvent) => void;
-    onAlertListClick?: (event: CustomEvent) => void;
     onSilenceClick?: (event: CustomEvent) => void;
     onGoToAlertListClick?: (event: CustomEvent) => void
   }
       export interface Slots {
   children?: Snippet;
-  emptyUnackedTitle?: Snippet;
-  emptyUnackedDescription?: Snippet;
-  emptyUnackedIcon?: Snippet;
-  emptyAllTitle?: Snippet;
-  emptyAllDescription?: Snippet;
-  emptyAllIcon?: Snippet;
-  emptyShelvedTitle?: Snippet;
-  emptyShelvedDescription?: Snippet;
-  emptyShelvedIcon?: Snippet
+  emptyTitle?: Snippet<[any]>;
+  emptyDescription?: Snippet<[any]>;
+  emptyIcon?: Snippet<[any]>
 }
-      const {onAckAllVisibleClick, onAlertListClick, onSilenceClick, onGoToAlertListClick, class: className, style, children, emptyUnackedTitle, emptyUnackedDescription, emptyUnackedIcon, emptyAllTitle, emptyAllDescription, emptyAllIcon, emptyShelvedTitle, emptyShelvedDescription, emptyShelvedIcon, ...props} = $props<Props & Events & Slots>();
+      const {onAckAllVisibleClick, onSilenceClick, onGoToAlertListClick, class: className, style, children, emptyTitle, emptyDescription, emptyIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-alert-menu
@@ -46,7 +49,6 @@ canAckAll?: boolean
     class={className}
     style={style}
     onack-all-visible-click={onAckAllVisibleClick}
-   onalert-list-click={onAlertListClick}
    onsilence-click={onSilenceClick}
    ongo-to-alert-list-click={onGoToAlertListClick} >
       
@@ -54,57 +56,21 @@ canAckAll?: boolean
         {@render children()}
       {/if}
 
-      {#if emptyUnackedTitle}
-        <div slot="empty-unacked-title">
-          {@render emptyUnackedTitle()}
-        </div>
-      {/if}
-
-      {#if emptyUnackedDescription}
-        <div slot="empty-unacked-description">
-          {@render emptyUnackedDescription()}
-        </div>
-      {/if}
-
-      {#if emptyUnackedIcon}
-        <div slot="empty-unacked-icon">
-          {@render emptyUnackedIcon()}
-        </div>
-      {/if}
-
-      {#if emptyAllTitle}
-        <div slot="empty-all-title">
-          {@render emptyAllTitle()}
-        </div>
-      {/if}
-
-      {#if emptyAllDescription}
-        <div slot="empty-all-description">
-          {@render emptyAllDescription()}
-        </div>
-      {/if}
-
-      {#if emptyAllIcon}
-        <div slot="empty-all-icon">
-          {@render emptyAllIcon()}
-        </div>
-      {/if}
-
-      {#if emptyShelvedTitle}
-        <div slot="empty-shelved-title">
-          {@render emptyShelvedTitle()}
+      {#if emptyTitle}
+        <div slot="empty-<tab>-title">
+          {@render emptyTitle()}
         </div>
       {/if}
 
-      {#if emptyShelvedDescription}
-        <div slot="empty-shelved-description">
-          {@render emptyShelvedDescription()}
+      {#if emptyDescription}
+        <div slot="empty-<tab>-description">
+          {@render emptyDescription()}
         </div>
       {/if}
 
-      {#if emptyShelvedIcon}
-        <div slot="empty-shelved-icon">
-          {@render emptyShelvedIcon()}
+      {#if emptyIcon}
+        <div slot="empty-<tab>-icon">
+          {@render emptyIcon()}
         </div>
       {/if}
     </obc-alert-menu>

package/dist/components/alert-menu/ObcAlertMenu.svelte.d.ts

@@ -14,24 +14,27 @@ Should be set to true only when there are unacknowledged alerts in view.
 
 Default: false. */
     canAckAll?: boolean;
+    /** If true, shows the "Silence" button in the action bar.
+When hidden, the "ACK visible" button expands to fill the freed space.
+
+Default: true. */
+    showSilenceButton?: boolean;
+    /** If true, shows the "Alerts" navigation button in the action bar.
+When hidden, the "ACK visible" button expands to fill the freed space.
+
+Default: true. */
+    showAlertListButton?: boolean;
 }
 export interface Events {
     onAckAllVisibleClick?: (event: ObcAckAllVisibleClickEvent) => void;
-    onAlertListClick?: (event: CustomEvent) => void;
     onSilenceClick?: (event: CustomEvent) => void;
     onGoToAlertListClick?: (event: CustomEvent) => void;
 }
 export interface Slots {
     children?: Snippet;
-    emptyUnackedTitle?: Snippet;
-    emptyUnackedDescription?: Snippet;
-    emptyUnackedIcon?: Snippet;
-    emptyAllTitle?: Snippet;
-    emptyAllDescription?: Snippet;
-    emptyAllIcon?: Snippet;
-    emptyShelvedTitle?: Snippet;
-    emptyShelvedDescription?: Snippet;
-    emptyShelvedIcon?: Snippet;
+    emptyTitle?: Snippet<[any]>;
+    emptyDescription?: Snippet<[any]>;
+    emptyIcon?: Snippet<[any]>;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcAlertMenu: import("svelte").Component<$$ComponentProps, {

package/dist/components/alert-menu-item/ObcAlertMenuItem.svelte

@@ -1,10 +1,10 @@
 
   <script lang="ts">
-    export type {ObcAlertMenuItemStatus} from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
+    export type {ObcAlertMenuItemStatus, ObcAlertMenuItemActionState} from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
 export type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
       import { setProperties } from "../../util.js";
-      import type {ObcAlertMenuItemStatus} from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
+      import type {ObcAlertMenuItemStatus, ObcAlertMenuItemActionState} from '@oicl/openbridge-webcomponents/dist/components/alert-menu-item/alert-menu-item.js';
 import type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import type { Snippet } from 'svelte';
 
@@ -39,17 +39,30 @@ Possible values: 'single-line', 'multi-line'.
 Default is 'single-line'. */
 size?: ObcMessageMenuItemSize;
       /** Whether to animate the item's appearance (intro animation). */
-animateIntro?: boolean
+animateIntro?: boolean;
+      /** The label for the secondary action button.
+Unlike the primary (ACK) action, the secondary label is not derived from
+`status`; it must be provided explicitly. The secondary action is only
+shown when a non-empty label is set and `secondaryActionState` is not
+`none`. */
+secondaryActionLabel?: string;
+      /** [object Object],[object Object],[object Object] */
+primaryActionState?: ObcAlertMenuItemActionState;
+      /** [object Object],[object Object],[object Object] */
+secondaryActionState?: ObcAlertMenuItemActionState
    }
       export interface Events {
     onAckClick?: (event: CustomEvent<void>) => void;
+    onAckSecondaryClick?: (event: CustomEvent<void>) => void;
     onItemClick?: (event: CustomEvent<void>) => void
   }
       export interface Slots {
   alertIcon?: Snippet;
+  titleSnippet?: Snippet;
+  descriptionSnippet?: Snippet;
   icon?: Snippet
 }
-      const {onAckClick, onItemClick, class: className, style, alertIcon, icon, ...props} = $props<Props & Events & Slots>();
+      const {onAckClick, onAckSecondaryClick, onItemClick, class: className, style, alertIcon, titleSnippet, descriptionSnippet, icon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-alert-menu-item
@@ -57,6 +70,7 @@ animateIntro?: boolean
     class={className}
     style={style}
     onack-click={onAckClick}
+   onack-secondary-click={onAckSecondaryClick}
    onitem-click={onItemClick} >
       
       {#if alertIcon}
@@ -65,6 +79,18 @@ animateIntro?: boolean
         </div>
       {/if}
 
+      {#if titleSnippet}
+        <div slot="title">
+          {@render titleSnippet()}
+        </div>
+      {/if}
+
+      {#if descriptionSnippet}
+        <div slot="description">
+          {@render descriptionSnippet()}
+        </div>
+      {/if}
+
       {#if icon}
         <div slot="icon">
           {@render icon()}