@oicl/openbridge-webcomponents-svelte 2.0.0-next.159 → 2.0.0-next.160

package/dist/components/tab-row/ObcTabRow.svelte.d.ts

@@ -4,42 +4,18 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `subtitle`, `showSubtitle`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
-
-- `id` (string): Unique identifier for the tab.
-- `title` (string): Display label for the tab.
-- `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
-- `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
-- `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
-- `badges` (TabItemBadge[]): One or more badges to display on the tab. Takes precedence over the deprecated single-badge fields below.
-- `hasBadge` (boolean, deprecated): Whether to show a badge on the tab.
-- `badgeCount` (number, deprecated): Number to display in the badge.
-- `badgeType` (BadgeType, deprecated): Visual style of the badge (e.g., notification, alarm, enhance).
-- `badgeSize` (BadgeSize, deprecated): Size of the badge (e.g., regular, large).
-- `badgeShowNumber` (boolean, deprecated): If true, shows the badge number.
-- `showLeadingBadgeIcon` (boolean, deprecated): If true, shows a badge icon.
-- `disabled` (boolean): If true, disables the tab. */
+    /** Tabs to display. Each carries a unique `id`, a `title`, an optional `subtitle` with a per-tab `showSubtitle` override, `hasLeadingIcon`, `disabled`, and a `badges` array that takes precedence over the deprecated single-badge fields (`hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`). */
     tabs?: TabData[];
-    /** The `id` of the currently selected tab. Only one tab can be selected at a time.
-
-Changing this property updates the selected tab visually and emits the `tab-selected` event when changed by user interaction. */
+    /** The `id` of the currently selected tab. Only one tab can be selected at a time. Changing this property updates the selected tab visually and emits the `tab-selected` event when changed by user interaction. */
     selectedTabId?: string;
-    /** Whether to display a close button on each tab. When enabled, users can remove tabs individually.
-
-Default: `false`. */
+    /** Whether to display a close button on each tab. When enabled, users can remove tabs individually. */
     hasClose?: boolean;
     centerContent?: boolean;
-    /** Enables "hug" mode for a more compact tab layout with reduced padding.
-
-Default: `false`. */
+    /** Enables "hug" mode for a more compact tab layout with reduced padding. */
     hug?: boolean;
-    /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`.
-
-Default: `false`. */
+    /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`. */
     showSubtitle?: boolean;
-    /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event.
-
-Default: `false`. */
+    /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event. */
     hasAddNewTab?: boolean;
 }
 export interface Events {

package/dist/components/toggle-button-group/ObcToggleButtonGroup.svelte

@@ -9,60 +9,24 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** The currently selected option's value.
-
-Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.
-
-If set to a value that does not match any enabled option, the first enabled option is selected by default. */
-value?: string;
-      /** The value of the option that is activated.
-
-When the group is controlled by an external source, this property is used to set the value of the option that is activated.
-This is a visual indication that the option is clicked but not yet stored. */
-activated?: string | undefined;
-      /** The visual type of the toggle button options.
-
-- `text` (default): Options display text only.
-- `icon`: Options display only an icon.
-- `iconText`: Options display an icon and text side-by-side.
-- `iconTextUnder`: Options display an icon above the text.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
-type?: ObcToggleButtonOptionType;
-      /** The visual variant of the toggle button group.
-
-- `regular` (default): Standard appearance with background and border.
-- `flat`: Minimal style with no background or border.
-- `normal`: Alternative style variant.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
-variant?: ObcToggleButtonOptionVariant;
-      /** If true, the group shrinks to fit its content ("hug" the text) instead of stretching to fill the container.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
-hugText?: boolean;
-      /** If true, the group is controlled by an external source.
-
-When true, the group will not update its selection when the `value` property changes.
-
-Defaults to false. */
-externalControl?: boolean;
-      /** If true, a `value` that does not match any enabled option leaves the group with no option selected
-instead of defaulting to the first enabled option.
-
-This also applies when the currently selected option becomes disabled: the group clears its selection
-rather than falling back to another option.
-
-Defaults to false (the first enabled option is selected when the value does not match). */
-allowEmptySelection?: boolean;
-      /** Disables the entire toggle button group and all contained options when true.
-
-When disabled, no option can be selected or interacted with. */
-disabled?: boolean;
-      /** If true, the group and all contained options use a larger size.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
-large?: boolean
+     /** The currently selected option's value. Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired. If set to a value that does not match any enabled option, the first enabled option is selected by default. */
+     value?: string;
+     /** The value of the option that is activated. When the group is controlled by an external source, this property is used to set the value of the option that is activated. This is a visual indication that the option is clicked but not yet stored. */
+     activated?: string | undefined;
+     /** Visual type of the options, propagated to every child `<obc-toggle-button-option>`: `text` (default) is text only, `icon` an icon only, `iconText` an icon beside the text, `iconTextUnder` an icon above it. */
+     type?: ObcToggleButtonOptionType;
+     /** Visual variant, propagated to every child `<obc-toggle-button-option>`: `regular` (default) has a background and border, `flat` has neither, and `normal` is the alternative style. */
+     variant?: ObcToggleButtonOptionVariant;
+     /** If true, the group shrinks to fit its content ("hug" the text) instead of stretching to fill the container. This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+     hugText?: boolean;
+     /** Makes a click emit `selected` without moving the selection, so the parent decides by setting `value`. Setting `value` programmatically always updates the selection, with or without this flag. When true, the group will not update its selection when the `value` property changes. Defaults to false. */
+     externalControl?: boolean;
+     /** Lets the group hold no selection: a `value` matching no enabled option, or a selected option that becomes disabled, clears the selection instead of falling back to the first enabled option. */
+     allowEmptySelection?: boolean;
+     /** Disables the entire toggle button group and all contained options when true. When disabled, no option can be selected or interacted with. */
+     disabled?: boolean;
+     /** If true, the group and all contained options use a larger size. This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+     large?: boolean
    }
       export interface Events {
     onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void;

package/dist/components/toggle-button-group/ObcToggleButtonGroup.svelte.d.ts

@@ -4,59 +4,23 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The currently selected option's value.
-
-Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.
-
-If set to a value that does not match any enabled option, the first enabled option is selected by default. */
+    /** The currently selected option's value. Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired. If set to a value that does not match any enabled option, the first enabled option is selected by default. */
     value?: string;
-    /** The value of the option that is activated.
-
-When the group is controlled by an external source, this property is used to set the value of the option that is activated.
-This is a visual indication that the option is clicked but not yet stored. */
+    /** The value of the option that is activated. When the group is controlled by an external source, this property is used to set the value of the option that is activated. This is a visual indication that the option is clicked but not yet stored. */
     activated?: string | undefined;
-    /** The visual type of the toggle button options.
-
-- `text` (default): Options display text only.
-- `icon`: Options display only an icon.
-- `iconText`: Options display an icon and text side-by-side.
-- `iconTextUnder`: Options display an icon above the text.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+    /** Visual type of the options, propagated to every child `<obc-toggle-button-option>`: `text` (default) is text only, `icon` an icon only, `iconText` an icon beside the text, `iconTextUnder` an icon above it. */
     type?: ObcToggleButtonOptionType;
-    /** The visual variant of the toggle button group.
-
-- `regular` (default): Standard appearance with background and border.
-- `flat`: Minimal style with no background or border.
-- `normal`: Alternative style variant.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+    /** Visual variant, propagated to every child `<obc-toggle-button-option>`: `regular` (default) has a background and border, `flat` has neither, and `normal` is the alternative style. */
     variant?: ObcToggleButtonOptionVariant;
-    /** If true, the group shrinks to fit its content ("hug" the text) instead of stretching to fill the container.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+    /** If true, the group shrinks to fit its content ("hug" the text) instead of stretching to fill the container. This setting is propagated to all child `<obc-toggle-button-option>` elements. */
     hugText?: boolean;
-    /** If true, the group is controlled by an external source.
-
-When true, the group will not update its selection when the `value` property changes.
-
-Defaults to false. */
+    /** Makes a click emit `selected` without moving the selection, so the parent decides by setting `value`. Setting `value` programmatically always updates the selection, with or without this flag. When true, the group will not update its selection when the `value` property changes. Defaults to false. */
     externalControl?: boolean;
-    /** If true, a `value` that does not match any enabled option leaves the group with no option selected
-instead of defaulting to the first enabled option.
-
-This also applies when the currently selected option becomes disabled: the group clears its selection
-rather than falling back to another option.
-
-Defaults to false (the first enabled option is selected when the value does not match). */
+    /** Lets the group hold no selection: a `value` matching no enabled option, or a selected option that becomes disabled, clears the selection instead of falling back to the first enabled option. */
     allowEmptySelection?: boolean;
-    /** Disables the entire toggle button group and all contained options when true.
-
-When disabled, no option can be selected or interacted with. */
+    /** Disables the entire toggle button group and all contained options when true. When disabled, no option can be selected or interacted with. */
     disabled?: boolean;
-    /** If true, the group and all contained options use a larger size.
-
-This setting is propagated to all child `<obc-toggle-button-option>` elements. */
+    /** If true, the group and all contained options use a larger size. This setting is propagated to all child `<obc-toggle-button-option>` elements. */
     large?: boolean;
 }
 export interface Events {

package/dist/components/toggle-button-vertical-group/ObcToggleButtonVerticalGroup.svelte

@@ -9,32 +9,16 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** The value of the currently selected option.
-
-Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option. */
-value?: string;
-      /** Visual style for all options in the group.
-
-One of: "flat", "regular", "normal". */
-type?: ObcToggleButtonVerticalOptionType;
-      /** If true, the group shrinks to fit its content width instead of stretching to fill its container.
-
-Defaults to false. */
-hugWidth?: boolean;
-      /** If true, a `value` that does not match any enabled option leaves the group with no option selected
-instead of defaulting to the first enabled option.
-
-This also applies when the currently selected option becomes disabled: the group clears its selection
-rather than falling back to another option.
-
-Defaults to false (the first enabled option is selected when the value does not match). */
-allowEmptySelection?: boolean;
-      /** Disables the entire group and all contained options.
-
-When set to true, all options become non-interactive, regardless of their individual disabled state.
-
-Defaults to false. */
-disabled?: boolean
+     /** The value of the currently selected option. Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option. */
+     value?: string;
+     /** Visual style for all options in the group. One of: "flat", "regular", "normal". */
+     type?: ObcToggleButtonVerticalOptionType;
+     /** If true, the group shrinks to fit its content width instead of stretching to fill its container. Defaults to false. */
+     hugWidth?: boolean;
+     /** Lets the group hold no selection: a `value` matching no enabled option, or a selected option that becomes disabled, clears the selection instead of falling back to the first enabled option. */
+     allowEmptySelection?: boolean;
+     /** Disables the entire group and all contained options. When set to true, all options become non-interactive, regardless of their individual disabled state. Defaults to false. */
+     disabled?: boolean
    }
       export interface Events {
     onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void;

package/dist/components/toggle-button-vertical-group/ObcToggleButtonVerticalGroup.svelte.d.ts

@@ -4,31 +4,15 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The value of the currently selected option.
-
-Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option. */
+    /** The value of the currently selected option. Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option. */
     value?: string;
-    /** Visual style for all options in the group.
-
-One of: "flat", "regular", "normal". */
+    /** Visual style for all options in the group. One of: "flat", "regular", "normal". */
     type?: ObcToggleButtonVerticalOptionType;
-    /** If true, the group shrinks to fit its content width instead of stretching to fill its container.
-
-Defaults to false. */
+    /** If true, the group shrinks to fit its content width instead of stretching to fill its container. Defaults to false. */
     hugWidth?: boolean;
-    /** If true, a `value` that does not match any enabled option leaves the group with no option selected
-instead of defaulting to the first enabled option.
-
-This also applies when the currently selected option becomes disabled: the group clears its selection
-rather than falling back to another option.
-
-Defaults to false (the first enabled option is selected when the value does not match). */
+    /** Lets the group hold no selection: a `value` matching no enabled option, or a selected option that becomes disabled, clears the selection instead of falling back to the first enabled option. */
     allowEmptySelection?: boolean;
-    /** Disables the entire group and all contained options.
-
-When set to true, all options become non-interactive, regardless of their individual disabled state.
-
-Defaults to false. */
+    /** Disables the entire group and all contained options. When set to true, all options become non-interactive, regardless of their individual disabled state. Defaults to false. */
     disabled?: boolean;
 }
 export interface Events {

package/dist/components/toggle-button-vertical-option/ObcToggleButtonVerticalOption.svelte

@@ -24,10 +24,8 @@
      label?: string;
      /** If true, the option is disabled and cannot be interacted with. */
      disabled?: boolean;
-      /** Controls the layout of icon and label.
-- `inline`: Icon and label displayed side-by-side.
-- `under`: Label displayed below the icon. */
-labelPlacement?: ObcToggleButtonLabelPlacement
+     /** Layout of icon and label: `inline` puts them side-by-side, `under` puts the label below the icon. */
+     labelPlacement?: ObcToggleButtonLabelPlacement
    }
       export interface Events {
     onSelected?: (event: CustomEvent<{value: string}>) => void

package/dist/components/toggle-button-vertical-option/ObcToggleButtonVerticalOption.svelte.d.ts

@@ -18,9 +18,7 @@ export interface Props {
     label?: string;
     /** If true, the option is disabled and cannot be interacted with. */
     disabled?: boolean;
-    /** Controls the layout of icon and label.
-- `inline`: Icon and label displayed side-by-side.
-- `under`: Label displayed below the icon. */
+    /** Layout of icon and label: `inline` puts them side-by-side, `under` puts the label below the icon. */
     labelPlacement?: ObcToggleButtonLabelPlacement;
 }
 export interface Events {

package/dist/components/toggletip/ObcToggletip.svelte

@@ -10,16 +10,8 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** Visual style and semantic meaning of the toggletip.
-
-- `normal` (default): Standard informational toggletip.
-- `raised`: Elevated importance with dark header.
-- `enhanced`: Used for enhanced or primary information.
-- `eco-feedback`: Environmental or positive feedback messaging.
-- `caution`: Indicates caution or minor issues.
-- `warning`: Highlights warnings or potential problems.
-- `alarm`: Signals critical or urgent conditions. */
-variant?: ToggletipVariant;
+     /** Visual style and meaning: `normal` (default) is informational, `raised` carries a dark header for higher importance, `enhanced` marks primary information, `eco-feedback` positive environmental feedback, and `caution`, `warning` and `alarm` the three alert severities. */
+     variant?: ToggletipVariant;
      /** Title text displayed in the header. */
      title?: string;
      /** Description text shown in the content area. */

package/dist/components/toggletip/ObcToggletip.svelte.d.ts

@@ -4,15 +4,7 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Visual style and semantic meaning of the toggletip.
-
-- `normal` (default): Standard informational toggletip.
-- `raised`: Elevated importance with dark header.
-- `enhanced`: Used for enhanced or primary information.
-- `eco-feedback`: Environmental or positive feedback messaging.
-- `caution`: Indicates caution or minor issues.
-- `warning`: Highlights warnings or potential problems.
-- `alarm`: Signals critical or urgent conditions. */
+    /** Visual style and meaning: `normal` (default) is informational, `raised` carries a dark header for higher importance, `enhanced` marks primary information, `eco-feedback` positive environmental feedback, and `caution`, `warning` and `alarm` the three alert severities. */
     variant?: ToggletipVariant;
     /** Title text displayed in the header. */
     title?: string;

package/dist/components/tooltip/ObcTooltip.svelte

@@ -10,34 +10,22 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** Type of tooltip display.
-
-- `icon`: Shows only an icon.
-- `label`: Shows text with optional leading icon.
-
-Default: `label` */
-type?: TooltipType;
-      /** Visual style and semantic meaning of the tooltip.
-
-- `normal` (default): Standard informational tooltip.
-- `enhanced`: Highlighted/important notification (blue).
-- `eco`: Environmental/positive state (green).
-- `raised`: Elevated/raised visual style.
-- `caution`: Indicates caution or minor issues (yellow).
-- `warning`: Highlights warnings or potential problems (orange).
-- `alarm`: Signals critical or urgent conditions (red).
-
-Default: `normal` */
-variant?: TooltipVariant;
-      /** Text content displayed in the tooltip (only used when `type="label"`).
-
-Default: `'Label'` */
-label?: string;
-      /** Whether to show the leading icon when `type="label"`.
-Has no effect when `type="icon"`.
-
-Default: `false` */
-showIcon?: boolean
+     /** Display type: `label` (default) shows text with an optional leading icon, `icon` shows the icon alone. */
+     type?: TooltipType;
+     /** Visual style and meaning: `normal` (default) is informational, `enhanced` is a highlighted blue notification, `eco` a green positive state, `raised` the elevated style, and `caution`, `warning` and `alarm` the yellow, orange and red alert severities. */
+     variant?: TooltipVariant;
+     /**
+      * Text content displayed in the tooltip (only used when `type="label"`).
+      *
+      * Available when `type==label`.
+      */
+     label?: string;
+     /**
+      * Whether to show the leading icon when `type="label"`. Has no effect when `type="icon"`.
+      *
+      * Available when `type==label`.
+      */
+     showIcon?: boolean
    }
       export interface Events {
     

package/dist/components/tooltip/ObcTooltip.svelte.d.ts

@@ -4,33 +4,21 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Type of tooltip display.
-
-- `icon`: Shows only an icon.
-- `label`: Shows text with optional leading icon.
-
-Default: `label` */
+    /** Display type: `label` (default) shows text with an optional leading icon, `icon` shows the icon alone. */
     type?: TooltipType;
-    /** Visual style and semantic meaning of the tooltip.
-
-- `normal` (default): Standard informational tooltip.
-- `enhanced`: Highlighted/important notification (blue).
-- `eco`: Environmental/positive state (green).
-- `raised`: Elevated/raised visual style.
-- `caution`: Indicates caution or minor issues (yellow).
-- `warning`: Highlights warnings or potential problems (orange).
-- `alarm`: Signals critical or urgent conditions (red).
-
-Default: `normal` */
+    /** Visual style and meaning: `normal` (default) is informational, `enhanced` is a highlighted blue notification, `eco` a green positive state, `raised` the elevated style, and `caution`, `warning` and `alarm` the yellow, orange and red alert severities. */
     variant?: TooltipVariant;
-    /** Text content displayed in the tooltip (only used when `type="label"`).
-
-Default: `'Label'` */
+    /**
+     * Text content displayed in the tooltip (only used when `type="label"`).
+     *
+     * Available when `type==label`.
+     */
     label?: string;
-    /** Whether to show the leading icon when `type="label"`.
-Has no effect when `type="icon"`.
-
-Default: `false` */
+    /**
+     * Whether to show the leading icon when `type="label"`. Has no effect when `type="icon"`.
+     *
+     * Available when `type==label`.
+     */
     showIcon?: boolean;
 }
 export interface Events {

package/dist/components/top-bar/ObcTopBar.svelte

@@ -12,56 +12,92 @@ import type {ObcTopBarMenuButtonIcon} from '@oicl/openbridge-webcomponents/dist/
       export interface Props {
      class?: string;
      style?: string;
-      /** Sets the main application title displayed in the top bar. */
-appTitle?: string;
-      /** Sets the current page or section name displayed in the top bar. */
-pageName?: string;
+     /** Sets the main application title displayed in the top bar. */
+     appTitle?: string;
+     /**
+      * Sets the current page or section name displayed in the top bar.
+      *
+      * Available when `settings==false`.
+      */
+     pageName?: string;
      /** Available when `settings==false && inactive==false`. */
      menuButtonIcon?: ObcTopBarMenuButtonIcon;
-      /** Highlights the menu button as active. */
-menuButtonActivated?: boolean;
-      /** Highlights the dimming (day/night) button as active. */
-dimmingButtonActivated?: boolean;
-      /** Highlights the apps button as active. */
-appsButtonActivated?: boolean;
-      /** Highlights the left more button as active. */
-leftMoreButtonActivated?: boolean;
-      /** Highlights the user/profile button as active. */
-userButtonActivated?: boolean;
-      /** Disables the user/profile button. */
-userButtonDisabled?: boolean;
-      /** Increases the height of the top bar for larger touch targets. */
-tall?: boolean;
-      /** Expands the menu button for wide-rail layouts. */
-wideMenuButton?: boolean;
-      /** Shows or hides the apps button. */
-showAppsButton?: boolean;
-      /** Shows or hides the dimming (day/night) button. */
-showDimmingButton?: boolean;
-      /** Shows or hides the user/profile button. */
-showUserButton?: boolean;
-      /** Shows or hides the clock. */
-showClock?: boolean;
-      /** Shows or hides the date in the clock display. */
-showDate?: boolean;
-      /** Shows or hides the app icon slot. */
-showAppIcon?: boolean;
-      /** Disables interaction and visually de-emphasizes the bar. */
-inactive?: boolean;
-      /** Controls the breakpoint (in px) for showing/hiding the apps button. */
-appButtonBreakpointPx?: number;
-      /** Controls the breakpoint (in px) for showing/hiding the dimming button. */
-dimmingButtonBreakpointPx?: number;
-      /** Controls the breakpoint (in px) for showing/hiding the app title. */
-appTitleBreakpointPx?: number;
-      /** Controls the breakpoint (in px) for showing/hiding the user button. */
-userButtonBreakpointPx?: number;
-      /** Controls the breakpoint (in px) for showing/hiding the app icon. */
-appIconBreakpointPx?: number;
-      /** Enables settings mode, displaying close, back buttons, breadcrumbs, and app title. */
-settings?: boolean;
-      /** Array of breadcrumb items for navigation (used in settings mode). */
-breadcrumbItems?: BreadcrumbItem[]
+     /**
+      * Highlights the menu button as active.
+      *
+      * Available when `settings==false && inactive==false`.
+      */
+     menuButtonActivated?: boolean;
+     /**
+      * Highlights the dimming (day/night) button as active.
+      *
+      * Available when `showDimmingButton==true && inactive==false`.
+      */
+     dimmingButtonActivated?: boolean;
+     /**
+      * Highlights the apps button as active.
+      *
+      * Available when `showAppsButton==true && inactive==false`.
+      */
+     appsButtonActivated?: boolean;
+     /**
+      * Highlights the left more button as active.
+      *
+      * Available when `inactive==false`.
+      */
+     leftMoreButtonActivated?: boolean;
+     /**
+      * Highlights the user/profile button as active.
+      *
+      * Available when `showUserButton==true && inactive==false`.
+      */
+     userButtonActivated?: boolean;
+     /**
+      * Disables the user/profile button.
+      *
+      * Available when `showUserButton==true && inactive==false`.
+      */
+     userButtonDisabled?: boolean;
+     /** Increases the height of the top bar for larger touch targets. */
+     tall?: boolean;
+     /**
+      * Expands the menu button for wide-rail layouts.
+      *
+      * Available when `settings==false && inactive==false`.
+      */
+     wideMenuButton?: boolean;
+     /** Shows or hides the apps button. */
+     showAppsButton?: boolean;
+     /** Shows or hides the dimming (day/night) button. */
+     showDimmingButton?: boolean;
+     /** Shows or hides the user/profile button. */
+     showUserButton?: boolean;
+     /** Shows or hides the clock. */
+     showClock?: boolean;
+     /** Shows or hides the date in the clock display. */
+     showDate?: boolean;
+     /** Shows or hides the app icon slot. */
+     showAppIcon?: boolean;
+     /** Disables interaction and visually de-emphasizes the bar. */
+     inactive?: boolean;
+     /** Controls the breakpoint (in px) for showing/hiding the apps button. */
+     appButtonBreakpointPx?: number;
+     /** Controls the breakpoint (in px) for showing/hiding the dimming button. */
+     dimmingButtonBreakpointPx?: number;
+     /** Controls the breakpoint (in px) for showing/hiding the app title. */
+     appTitleBreakpointPx?: number;
+     /** Controls the breakpoint (in px) for showing/hiding the user button. */
+     userButtonBreakpointPx?: number;
+     /** Controls the breakpoint (in px) for showing/hiding the app icon. */
+     appIconBreakpointPx?: number;
+     /** Enables settings mode, displaying close, back buttons, breadcrumbs, and app title. */
+     settings?: boolean;
+     /**
+      * Array of breadcrumb items for navigation (used in settings mode).
+      *
+      * Available when `settings==true`.
+      */
+     breadcrumbItems?: BreadcrumbItem[]
    }
       export interface Events {
     onMenuButtonClicked?: (event: CustomEvent<unknown>) => void;