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

package/dist/components/clock/ObcClock.svelte

@@ -9,33 +9,30 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** The ISO date/time string to display in the clock.
-Controls both the time (HH:MM) and the date (if `showDate` is true). */
-date?: string;
+     /** The ISO date/time string to display in the clock. Controls both the time (HH:MM) and the date (if `showDate` is true). */
+     date?: string;
      showSeconds?: boolean;
-      /** If true, displays the date (day and abbreviated month) after the time.
-Defaults to `false`. */
-showDate?: boolean;
-      /** If true, displays the timezone after the time.
-Defaults to `false`. */
-showTimezone?: boolean;
-      /** Timezone offset in hours, from UTC.
-Defaults to `0`. */
-timeZoneOffsetHours?: number;
+     /** If true, displays the date (day and abbreviated month) after the time. Defaults to `false`. */
+     showDate?: boolean;
+     /** If true, displays the timezone after the time. Defaults to `false`. */
+     showTimezone?: boolean;
+     /** Timezone offset in hours, from UTC. Defaults to `0`. */
+     timeZoneOffsetHours?: number;
      isClickable?: boolean;
+     /** Available when `showDate==true`. */
      showYear?: boolean;
+     /** Available when `showDate==true`. */
      showWeekday?: boolean;
+     /** Available when `showDate==true`. */
      locale?: string;
      hour12?: boolean;
      selected?: boolean;
      double?: boolean;
-      /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
-activated?: boolean;
+     /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
+     activated?: boolean;
      integrationBarMode?: boolean;
-      /** The pixel width at which the component switches to blink-only mode.
-When the viewport width is less than or equal to this value, only the blinking colon is shown.
-Defaults to `0` (never switches to blink-only). */
-blinkOnlyBreakpointPx?: number
+     /** The pixel width at which the component switches to blink-only mode. When the viewport width is less than or equal to this value, only the blinking colon is shown. Defaults to `0` (never switches to blink-only). */
+     blinkOnlyBreakpointPx?: number
    }
       export interface Events {
     

package/dist/components/clock/ObcClock.svelte.d.ts

@@ -3,22 +3,21 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The ISO date/time string to display in the clock.
-Controls both the time (HH:MM) and the date (if `showDate` is true). */
+    /** The ISO date/time string to display in the clock. Controls both the time (HH:MM) and the date (if `showDate` is true). */
     date?: string;
     showSeconds?: boolean;
-    /** If true, displays the date (day and abbreviated month) after the time.
-Defaults to `false`. */
+    /** If true, displays the date (day and abbreviated month) after the time. Defaults to `false`. */
     showDate?: boolean;
-    /** If true, displays the timezone after the time.
-Defaults to `false`. */
+    /** If true, displays the timezone after the time. Defaults to `false`. */
     showTimezone?: boolean;
-    /** Timezone offset in hours, from UTC.
-Defaults to `0`. */
+    /** Timezone offset in hours, from UTC. Defaults to `0`. */
     timeZoneOffsetHours?: number;
     isClickable?: boolean;
+    /** Available when `showDate==true`. */
     showYear?: boolean;
+    /** Available when `showDate==true`. */
     showWeekday?: boolean;
+    /** Available when `showDate==true`. */
     locale?: string;
     hour12?: boolean;
     selected?: boolean;
@@ -26,9 +25,7 @@ Defaults to `0`. */
     /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
     activated?: boolean;
     integrationBarMode?: boolean;
-    /** The pixel width at which the component switches to blink-only mode.
-When the viewport width is less than or equal to this value, only the blinking colon is shown.
-Defaults to `0` (never switches to blink-only). */
+    /** The pixel width at which the component switches to blink-only mode. When the viewport width is less than or equal to this value, only the blinking colon is shown. Defaults to `0` (never switches to blink-only). */
     blinkOnlyBreakpointPx?: number;
 }
 export interface Events {

package/dist/components/command-button/ObcCommandButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/command-button/command-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -18,19 +18,19 @@ Default: `false` */
 inCommand?: 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-command-button
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'click': onClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/command-button/ObcCommandButton.svelte.d.ts

@@ -12,6 +12,7 @@ Default: `false` */
     inCommand?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/command-menu/ObcCommandMenu.svelte

@@ -2,19 +2,18 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/command-menu/command-menu.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether the menu is in the "in command" state.
-Controls the toggle and visual state. */
-inCommand?: boolean;
-      /** Whether to display the location slot.
-If false, the location is omitted from the menu. */
-showLocation?: boolean
+     /** Whether the menu is in the "in command" state. Controls the toggle and visual state. */
+     inCommand?: boolean;
+     /** Whether to display the location slot. If false, the location is omitted from the menu. */
+     showLocation?: boolean
    }
       export interface Events {
     onChange?: (event: CustomEvent<{inCommand: boolean}>) => void
@@ -37,59 +36,41 @@ showLocation?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if commandIcon}
-        <div slot="command-icon">
-          {@render commandIcon()}
-        </div>
+        <NamedSlot name="command-icon" content={commandIcon} />
       {/if}
 
       {#if commandStatus}
-        <div slot="command-status">
-          {@render commandStatus()}
-        </div>
+        <NamedSlot name="command-status" content={commandStatus} />
       {/if}
 
       {#if commandDescription}
-        <div slot="command-description">
-          {@render commandDescription()}
-        </div>
+        <NamedSlot name="command-description" content={commandDescription} />
       {/if}
 
       {#if commandLocation}
-        <div slot="command-location">
-          {@render commandLocation()}
-        </div>
+        <NamedSlot name="command-location" content={commandLocation} />
       {/if}
 
       {#if toogleActionToInCommandLabel}
-        <div slot="toogle-action-to-in-command-label">
-          {@render toogleActionToInCommandLabel()}
-        </div>
+        <NamedSlot name="toogle-action-to-in-command-label" content={toogleActionToInCommandLabel} />
       {/if}
 
       {#if toogleActionToNoCommandLabel}
-        <div slot="toogle-action-to-no-command-label">
-          {@render toogleActionToNoCommandLabel()}
-        </div>
+        <NamedSlot name="toogle-action-to-no-command-label" content={toogleActionToNoCommandLabel} />
       {/if}
 
       {#if toogleStateInCommandLabel}
-        <div slot="toogle-state-in-command-label">
-          {@render toogleStateInCommandLabel()}
-        </div>
+        <NamedSlot name="toogle-state-in-command-label" content={toogleStateInCommandLabel} />
       {/if}
 
       {#if toogleStateNoCommandLabel}
-        <div slot="toogle-state-no-command-label">
-          {@render toogleStateNoCommandLabel()}
-        </div>
+        <NamedSlot name="toogle-state-no-command-label" content={toogleStateNoCommandLabel} />
       {/if}
 
       {#if toogleStateInCommandIcon}
-        <div slot="toogle-state-in-command-icon">
-          {@render toogleStateInCommandIcon()}
-        </div>
+        <NamedSlot name="toogle-state-in-command-icon" content={toogleStateInCommandIcon} />
       {/if}
     </obc-command-menu>

package/dist/components/command-menu/ObcCommandMenu.svelte.d.ts

@@ -3,11 +3,9 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Whether the menu is in the "in command" state.
-Controls the toggle and visual state. */
+    /** Whether the menu is in the "in command" state. Controls the toggle and visual state. */
     inCommand?: boolean;
-    /** Whether to display the location slot.
-If false, the location is omitted from the menu. */
+    /** Whether to display the location slot. If false, the location is omitted from the menu. */
     showLocation?: boolean;
 }
 export interface Events {

package/dist/components/communication-table/ObcCommunicationTable.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcCommunicationTableRowClickEvent, ObcCommunicationTableRow} from '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
       import '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcCommunicationTableRowClickEvent, ObcCommunicationTableRow} from '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
       import type { Snippet } from 'svelte';
 
@@ -28,7 +28,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onrow-click={onRowClick} >
+    use:forwardEvents={{'row-click': onRowClick}} >
       
     {#if children}
       {@render children()}

package/dist/components/context-menu-input/ObcContextMenuInput.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcContextMenuInputChangeEvent, ObcContextMenuInputItemClickEvent, ContextMenuType, ContextMenuOption, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcContextMenuInputChangeEvent, ObcContextMenuInputItemClickEvent, ContextMenuType, ContextMenuOption, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import type { Snippet } from 'svelte';
 
@@ -35,8 +35,12 @@ selectedValues?: string[];
 
 If true, displays the `title` property and a close icon button. */
 hasTitleBar?: boolean;
-      /** Title text displayed in the title bar (if `hasTitleBar` is true). */
-title?: string;
+     /**
+      * Title text displayed in the title bar (if `hasTitleBar` is true).
+      *
+      * Available when `hasTitleBar==true`.
+      */
+     title?: string;
       /** Array of column groups for the `multi-with-subtitles` layout.
 
 Each group defines a `title`, `columns` (number of columns in the group), and `options` (array of options for that group). */
@@ -69,9 +73,7 @@ selectPerGroup?: boolean | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange}
-   onitem-click={onItemClick}
-   onclose={onClose} >
+    use:forwardEvents={{'change': onChange, 'item-click': onItemClick, 'close': onClose}} >
       
       {#if children}
         {@render children()}

package/dist/components/context-menu-input/ObcContextMenuInput.svelte.d.ts

@@ -30,7 +30,11 @@ For multi-select variants, can contain multiple values. For single-select, conta
 
 If true, displays the `title` property and a close icon button. */
     hasTitleBar?: boolean;
-    /** Title text displayed in the title bar (if `hasTitleBar` is true). */
+    /**
+     * Title text displayed in the title bar (if `hasTitleBar` is true).
+     *
+     * Available when `hasTitleBar==true`.
+     */
     title?: string;
     /** Array of column groups for the `multi-with-subtitles` layout.
 

package/dist/components/date-item/ObcDateItem.svelte

@@ -3,7 +3,7 @@
     export type {DateItemEvent} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
 export type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {DateItemEvent} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
 import type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
       import type { Snippet } from 'svelte';
@@ -15,21 +15,16 @@ import type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/
 - `small`: Compact, shows only the date and event dots.
 - `large`: Expands to show event titles and descriptions for up to two events. */
 size?: DateItemSize;
-      /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
-disabled?: boolean;
-      /** Array of events to display on this date.
-In small size, shows an event dot indicator.
-In large size, displays event details using obc-event-item components. */
-events?: DateItemEvent[];
-      /** Number of events to display from the events array. When 0, shows all events.
-In small size, always caps at 2 dots regardless of this value. */
-eventCount?: number;
-      /** Whether the date item represents today.
-When true, displays the "Today" label (in large size) and uses amplified styling. */
-isToday?: boolean;
-      /** Whether the date item is checked/selected.
-When true, uses selected styling (blue filled background). */
-checked?: boolean;
+     /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
+     disabled?: boolean;
+     /** Array of events to display on this date. In small size, shows an event dot indicator. In large size, displays event details using obc-event-item components. */
+     events?: DateItemEvent[];
+     /** Number of events to display from the events array. When 0, shows all events. In small size, always caps at 2 dots regardless of this value. */
+     eventCount?: number;
+     /** Whether the date item represents today. When true, displays the "Today" label (in large size) and uses amplified styling. */
+     isToday?: boolean;
+     /** Whether the date item is checked/selected. When true, uses selected styling (blue filled background). */
+     checked?: boolean;
       /** The numeric day of the month to display (1–31). Values outside this range are clamped. */
 date?: number
    }
@@ -46,7 +41,7 @@ date?: number
     use:setProperties={props}
     class={className}
     style={style}
-    ondate-click={onDateClick} >
+    use:forwardEvents={{'date-click': onDateClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/date-item/ObcDateItem.svelte.d.ts

@@ -11,18 +11,13 @@ export interface Props {
     size?: DateItemSize;
     /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
     disabled?: boolean;
-    /** Array of events to display on this date.
-In small size, shows an event dot indicator.
-In large size, displays event details using obc-event-item components. */
+    /** Array of events to display on this date. In small size, shows an event dot indicator. In large size, displays event details using obc-event-item components. */
     events?: DateItemEvent[];
-    /** Number of events to display from the events array. When 0, shows all events.
-In small size, always caps at 2 dots regardless of this value. */
+    /** Number of events to display from the events array. When 0, shows all events. In small size, always caps at 2 dots regardless of this value. */
     eventCount?: number;
-    /** Whether the date item represents today.
-When true, displays the "Today" label (in large size) and uses amplified styling. */
+    /** Whether the date item represents today. When true, displays the "Today" label (in large size) and uses amplified styling. */
     isToday?: boolean;
-    /** Whether the date item is checked/selected.
-When true, uses selected styling (blue filled background). */
+    /** Whether the date item is checked/selected. When true, uses selected styling (blue filled background). */
     checked?: boolean;
     /** The numeric day of the month to display (1–31). Values outside this range are clamped. */
     date?: number;

package/dist/components/dropdown-button/ObcDropdownButton.svelte

@@ -1,9 +1,10 @@
 
   <script lang="ts">
-    export type {ObcDropdownButtonChangeEvent, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+    export type {ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcDropdownButtonChangeEvent, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
+      import type {ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -16,21 +17,25 @@ Example:
   { value: 'volvo', label: 'Volvo' },
   { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-options?: { value: string; label: string; level?: number | undefined; }[];
-      /** The value of the currently selected option. If not set, defaults to the first option in the list. */
-value?: string | undefined;
+options?: DropdownButtonOption[];
+     /** The value of the currently selected option. If not set, defaults to the first option in the list unless `allowEmptySelection` is true. */
+     value?: string | undefined;
      disabled?: boolean;
-      /** If true, the select expands to fill the width of its container. Default is false. */
-fullWidth?: boolean;
+     /** If true, the select expands to fill the width of its container. Default is false. */
+     fullWidth?: boolean;
+     /** If true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false. */
+     allowEmptySelection?: boolean;
+     /** Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string. */
+     placeholder?: string;
       /** Controls the button's display type.
 - `label`: Text label only (default)
 - `icon`: Icon only, no label
 - `label-icon`: Icon before the label */
 type?: DropdownButtonType;
-      /** If true, the dropdown menu opens above the button. */
-openTop?: boolean;
-      /** If true, the select is integration style. Default is false, only for integration bar. */
-integration?: boolean;
+     /** If true, the dropdown menu opens above the button. */
+     openTop?: boolean;
+     /** If true, the select is integration style. Default is false, only for integration bar. */
+     integration?: boolean;
      flat?: boolean
    }
       export interface Events {
@@ -48,16 +53,13 @@ integration?: boolean;
     use:setProperties={props}
     class={className}
     style={style}
-    ondropdown-change={onDropdownChange}
-   onchange={onChange} >
+    use:forwardEvents={{'dropdown-change': onDropdownChange, 'change': onChange}} >
       
       {#if children}
         {@render children()}
       {/if}
 
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-dropdown-button>

package/dist/components/dropdown-button/ObcDropdownButton.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
-import type { ObcDropdownButtonChangeEvent, DropdownButtonType } from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+import type { ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType } from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -11,16 +11,16 @@ Example:
 { value: 'volvo', label: 'Volvo' },
 { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-    options?: {
-        value: string;
-        label: string;
-        level?: number | undefined;
-    }[];
-    /** The value of the currently selected option. If not set, defaults to the first option in the list. */
+    options?: DropdownButtonOption[];
+    /** The value of the currently selected option. If not set, defaults to the first option in the list unless `allowEmptySelection` is true. */
     value?: string | undefined;
     disabled?: boolean;
     /** If true, the select expands to fill the width of its container. Default is false. */
     fullWidth?: boolean;
+    /** If true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false. */
+    allowEmptySelection?: boolean;
+    /** Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string. */
+    placeholder?: string;
     /** Controls the button's display type.
 - `label`: Text label only (default)
 - `icon`: Icon only, no label
@@ -43,6 +43,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcDropdownButton: import("svelte").Component<$$ComponentProps, {
     ObcDropdownButtonChangeEvent: typeof ObcDropdownButtonChangeEvent;
+    DropdownButtonOption: typeof DropdownButtonOption;
     DropdownButtonType: typeof DropdownButtonType;
 }, "">;
 type ObcDropdownButton = ReturnType<typeof ObcDropdownButton>;

package/dist/components/elevated-card/ObcElevatedCard.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {ObcElevatedCardPosition, ObcElevatedCardSize, ObcElevatedCardTag} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcElevatedCardPosition, ObcElevatedCardSize, ObcElevatedCardTag} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import type { Snippet } from 'svelte';
 
@@ -28,42 +29,38 @@ size?: ObcElevatedCardSize;
 - `div`: Renders as a <div> (generic container).
 If not set, the tag is determined automatically based on `href` and `isClickable`. */
 overrideTag?: ObcElevatedCardTag | undefined;
-      /** If true, the card is rendered as a static (non-clickable) element.
-When set, the card uses `<article>` as its tag unless overridden.
-Useful for informational or status cards that should not be interactive. */
-isClickable?: boolean;
-      /** Applies an informational style to the card.
-When true, the card uses the "info" visual style. */
-info?: boolean;
-      /** If true, adds a border below the graphic area (when present).
-Used to visually separate the graphic from the card content. */
-graphicBorder?: boolean;
-      /** If true, adds a border to the card (top or bottom, depending on position).
-Useful for visually separating cards in a stack. */
-border?: boolean;
-      /** If true, displays an action button in the card.
-The button's content is provided via the `action` slot.
-When set, the card is rendered as static (`isClickable` is forced false). */
-hasAction?: boolean;
-      /** If true, displays a leading icon before the label.
-The icon is provided via the `leading-icon` slot. */
-hasLeadingIcon?: boolean;
-      /** If true, displays a trailing icon after the content.
-The icon is provided via the `trailing-icon` slot. */
-hasTrailingIcon?: boolean;
-      /** If true, displays a prominent graphic at the top of the card.
-The graphic is provided via the `graphic` slot. */
-hasGraphic?: boolean;
-      /** If true, displays a status indicator in the card.
-The status content is provided via the `status` slot. */
-hasStatus?: boolean;
+     /** If false, the card is rendered as a static (non-clickable) element and uses `<article>` as its tag unless `overrideTag` is set. Useful for informational or status cards that should not be interactive. */
+     isClickable?: boolean;
+     /** Applies an informational style to the card. When true, the card uses the "info" visual style. */
+     info?: boolean;
+     /**
+      * If true, adds a border below the graphic area (when present). Used to visually separate the graphic from the card content.
+      *
+      * Available when `hasGraphic==true`.
+      */
+     graphicBorder?: boolean;
+     /**
+      * If true, adds a border to the card (top or bottom, depending on position). Useful for visually separating cards in a stack.
+      *
+      * Available when `position!=regular`.
+      */
+     border?: boolean;
+     /** If true, displays an action button in the card. The button's content is provided via the `action` slot. When set, the card is rendered as static (`isClickable` is forced false). */
+     hasAction?: boolean;
+     /** If true, displays a leading icon before the label. The icon is provided via the `leading-icon` slot. */
+     hasLeadingIcon?: boolean;
+     /** If true, displays a trailing icon after the content. The icon is provided via the `trailing-icon` slot. */
+     hasTrailingIcon?: boolean;
+     /** If true, displays a prominent graphic at the top of the card. The graphic is provided via the `graphic` slot. */
+     hasGraphic?: boolean;
+     /** If true, displays a status indicator in the card. The status content is provided via the `status` slot. */
+     hasStatus?: boolean;
      compact?: boolean;
      directAction?: boolean;
-      /** If set, the card is rendered as a link (`<a>`) with this URL as the `href`.
-When present, the card is clickable and navigates to the specified URL. */
-href?: string | undefined;
-      /** Specifies the target for the link when `href` is set (e.g., `_blank`). */
-target?: string | undefined
+     /** URL the card links to. It applies whenever the rendered tag is `<a>` — the default for a clickable card with an `href`, or `overrideTag="a"`; `isClickable=false`, `hasAction` or another `overrideTag` render a tag on which the URL has no effect. */
+     href?: string | undefined;
+     /** Specifies the target for the link when `href` is set (e.g., `_blank`). */
+     target?: string | undefined
    }
       export interface Events {
     onActionClick?: (event: CustomEvent<unknown>) => void
@@ -84,47 +81,33 @@ target?: string | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick} >
+    use:forwardEvents={{'action-click': onActionClick}} >
       
       {#if graphic}
-        <div slot="graphic">
-          {@render graphic()}
-        </div>
+        <NamedSlot name="graphic" content={graphic} />
       {/if}
 
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if label}
-        <div slot="label">
-          {@render label()}
-        </div>
+        <NamedSlot name="label" content={label} />
       {/if}
 
       {#if description}
-        <div slot="description">
-          {@render description()}
-        </div>
+        <NamedSlot name="description" content={description} />
       {/if}
 
       {#if status}
-        <div slot="status">
-          {@render status()}
-        </div>
+        <NamedSlot name="status" content={status} />
       {/if}
 
       {#if action}
-        <div slot="action">
-          {@render action()}
-        </div>
+        <NamedSlot name="action" content={action} />
       {/if}
 
       {#if trailingIcon}
-        <div slot="trailing-icon">
-          {@render trailingIcon()}
-        </div>
+        <NamedSlot name="trailing-icon" content={trailingIcon} />
       {/if}
     </obc-elevated-card>