@oicl/openbridge-webcomponents 2.1.0 → 2.2.0-next.2

package/custom-elements.json

@@ -71776,6 +71776,26 @@
               "description": "Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.",
               "attribute": "aria-label"
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus lands on the button inside, not on the host."
+            },
             {
               "kind": "field",
               "name": "progressSpinner",
@@ -82949,12 +82969,16 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-split-button>` – A composite button component combining a primary action and a dropdown menu for additional actions or selections. Also known as a split button, segmented button, or action menu button.\n\nProvides a main button for a default/primary action and a secondary dropdown button that reveals a context menu with configurable options. This pattern allows users to quickly trigger a common action or select from a list of related actions or filters, improving workflow efficiency and reducing UI clutter.\n\n### Features\n- **Dual-action layout:** Combines a primary button (for the main action) and a dropdown button (for menu access) in a single horizontal control.\n- **Configurable dropdown menu:** Supports multiple menu types via `menuType` (regular, checkboxes, flyout, multi-column, etc.) for different selection and grouping needs.\n- **Multi-select and group selection:** Allows single or multiple selections in the dropdown, with optional grouping and per-group selection logic.\n- **Customizable menu content:** Accepts an array of options or column groups, supports icons, subtitles, and multi-column layouts for complex menus.\n- **Optional icon in primary button:** Add a leading icon to the main button using the `hasIcon` property and `icon` slot.\n- **Title bar and menu title:** Optionally display a title bar with close button and custom title text in the dropdown.\n- **Full width mode:** Can stretch to fill its container using the `fullWidth` property.\n- **Disabled state:** Disables both the primary and dropdown buttons when `disabled` is true.\n- **Dropdown positioning:** Menu can open above or below the button (`openTop`).\n- **Selection persistence:** Optionally keeps the selected state visually persistent in the menu.\n- **Keyboard and pointer accessibility:** Follows standard button and menu accessibility patterns.\n\n### Variants (Menu Types)\n- **Regular:** Standard single-selection dropdown menu.\n- **Checkboxes:** Menu with checkboxes for multi-selection.\n- **Flyout:** Hierarchical/flyout menu for nested actions.\n- **Multi:** Multi-column menu for large sets of options.\n- **MultiWithSubtitles:** Multi-column menu with grouped options and subtitles.\n- See `ContextMenuType` enum for all supported menu types.\n\n### Usage Guidelines\nUse `obc-split-button` when you want to provide a primary action alongside a set of related secondary actions or filters, without overwhelming the main UI. Ideal for toolbars, filter bars, or any context where a default action is common but alternatives should be easily accessible. For example, use it for \"Save\" (primary) with \"Save As...\" and \"Export\" (dropdown), or for filter controls with quick presets.\n\n- Prefer this component over a standalone dropdown when a default action is expected to be used frequently.\n- For menus with many options, use multi-column or grouped variants for better organization.\n- If only a single action is needed, use a standard `<obc-button>` instead.\n- For persistent or always-visible lists of actions, consider a toolbar or action list.\n- **TODO(designer):** Confirm best practices for when to use multi-select vs. single-select, and any recommended limits on number of options or columns.\n\n### Slots\n| Slot Name   | Renders When...      | Purpose                                             |\n|-------------|---------------------|-----------------------------------------------------|\n| `icon`      | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |\n\n### Events\n- `click` – Fired when either the primary or dropdown button is clicked. The event detail includes `{action: 'primary' | 'dropdown'}` to distinguish which part was activated.\n- `change` – Fired when the menu selection changes. The event detail includes `{selectedValues, selectedOptions}`.\n\n### Best Practices & Constraints\n- Only use multi-select when the menu type and use case require it; otherwise, prefer single selection for clarity.\n- Keep the primary action clear and distinct from dropdown actions.\n- For accessibility, ensure all menu options have clear labels and, if using icons, provide appropriate alt text or aria-labels.\n- Avoid overloading the dropdown with too many options; group or paginate if necessary.\n- The dropdown menu closes automatically when an option is selected (unless it is a group/flyout parent).\n- The component manages focus and pointer events to ensure proper menu closing when clicking outside.\n- **TODO(designer):** Specify recommended icon usage, menu title conventions, and any animation/timing guidelines for menu opening/closing.\n\n### Example:\n```html\n<obc-split-button\n  label=\"Save\"\n  .options=${[\n    {value: 'save-as', label: 'Save As...'},\n    {value: 'export', label: 'Export'},\n  ]}\n  hasIcon\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n</obc-split-button>\n```\nIn this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.",
+          "description": "`<obc-split-button>` – A composite button component combining a primary action and a dropdown menu for additional actions or selections. Also known as a split button, segmented button, or action menu button.\n\nProvides a main button for a default/primary action and a secondary dropdown button that reveals a context menu with configurable options. This pattern allows users to quickly trigger a common action or select from a list of related actions or filters, improving workflow efficiency and reducing UI clutter.\n\n### Features\n- **Dual-action layout:** Combines a primary button (for the main action) and a dropdown button (for menu access) in a single horizontal control.\n- **Configurable dropdown menu:** Supports multiple menu types via `menuType` (regular, checkboxes, flyout, multi-column, etc.) for different selection and grouping needs.\n- **Multi-select and group selection:** Allows single or multiple selections in the dropdown, with optional grouping and per-group selection logic.\n- **Customizable menu content:** Accepts an array of options or column groups, supports icons, subtitles, and multi-column layouts for complex menus.\n- **Optional icon in primary button:** Add a leading icon to the main button using the `hasIcon` property and `icon` slot.\n- **Replaceable dropdown icon:** The dropdown button shows a chevron; fill the `dropdown-icon` slot to show another symbol, for example one that says what the menu holds.\n- **Title bar and menu title:** Optionally display a title bar with close button and custom title text in the dropdown.\n- **Full width mode:** Can stretch to fill its container using the `fullWidth` property.\n- **Disabled state:** `disabled` disables both halves; `primaryDisabled` and `dropdownDisabled` disable one half each, so the primary action can be unavailable while the menu stays in use.\n- **Dropdown positioning:** The menu opens below the button and extends to the right. `openTop` opens it above and `openLeft` extends it to the left, for a button near the bottom or the right edge of its container.\n- **Selection persistence:** Optionally keeps the selected state visually persistent in the menu.\n- **Keyboard and pointer accessibility:** Follows standard button and menu accessibility patterns.\n\n### Variants (Menu Types)\n- **Regular:** Standard single-selection dropdown menu.\n- **Checkboxes:** Menu with checkboxes for multi-selection.\n- **Flyout:** Hierarchical/flyout menu for nested actions.\n- **Multi:** Multi-column menu for large sets of options.\n- **MultiWithSubtitles:** Multi-column menu with grouped options and subtitles.\n- See `ContextMenuType` enum for all supported menu types.\n\n### Usage Guidelines\nUse `obc-split-button` when you want to provide a primary action alongside a set of related secondary actions or filters, without overwhelming the main UI. Ideal for toolbars, filter bars, or any context where a default action is common but alternatives should be easily accessible. For example, use it for \"Save\" (primary) with \"Save As...\" and \"Export\" (dropdown), or for filter controls with quick presets.\n\n- Prefer this component over a standalone dropdown when a default action is expected to be used frequently.\n- For menus with many options, use multi-column or grouped variants for better organization.\n- If only a single action is needed, use a standard `<obc-button>` instead.\n- For persistent or always-visible lists of actions, consider a toolbar or action list.\n- **TODO(designer):** Confirm best practices for when to use multi-select vs. single-select, and any recommended limits on number of options or columns.\n\n### Slots\n| Slot Name       | Renders When...      | Purpose                                             |\n|-----------------|---------------------|-----------------------------------------------------|\n| `icon`          | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |\n| `dropdown-icon` | Always              | Icon of the dropdown button; the chevron when empty |\n\n### Events\n- `click` – Fired when either the primary or dropdown button is clicked. The event detail includes `{action: 'primary' | 'dropdown'}` to distinguish which part was activated.\n- `change` – Fired when the menu selection changes. The event detail includes `{selectedValues, selectedOptions}`.\n\n### Keyboard\nThe primary half is a plain button. The dropdown half follows the\n[APG Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/):\n`Enter` and `Space` open the menu, `ArrowDown` and `Home` open it on the\nfirst item, `ArrowUp` and `End` on the last, and `Escape` closes it and\nreturns focus to the dropdown half. The menu is `obc-context-menu-input`.\n\nLeft out: `Enter` and `Space` land on the selected item rather than the\nfirst, so a reopened selection menu starts where the user left it.\n\n### Best Practices & Constraints\n- Only use multi-select when the menu type and use case require it; otherwise, prefer single selection for clarity.\n- Keep the primary action clear and distinct from dropdown actions.\n- For accessibility, ensure all menu options have clear labels and, if using icons, provide appropriate alt text or aria-labels.\n- Avoid overloading the dropdown with too many options; group or paginate if necessary.\n- The dropdown menu closes automatically when an option is selected (unless it is a group/flyout parent).\n- The component manages focus and pointer events to ensure proper menu closing when clicking outside.\n- **TODO(designer):** Specify recommended icon usage, menu title conventions, and any animation/timing guidelines for menu opening/closing.\n\n### Example:\n```html\n<obc-split-button\n  label=\"Save\"\n  .options=${[\n    {value: 'save-as', label: 'Save As...'},\n    {value: 'export', label: 'Export'},\n  ]}\n  hasIcon\n>\n  <obi-placeholder slot=\"icon\"></obi-placeholder>\n</obc-split-button>\n```\nIn this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.",
           "name": "ObcSplitButton",
           "slots": [
             {
               "description": "Leading icon for the primary button (shown when `hasIcon` is true)",
               "name": "icon"
+            },
+            {
+              "description": "Icon of the dropdown button; the chevron when empty.",
+              "name": "dropdown-icon"
             }
           ],
           "members": [
@@ -83091,6 +83115,36 @@
               "description": "Whether both parts of the button are disabled. When true, disables both the primary and dropdown buttons.",
               "attribute": "disabled"
             },
+            {
+              "kind": "field",
+              "name": "primaryDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the primary button alone, for an action the user cannot take right now while the menu stays in use, for example to ask for the access the action needs.\n\nAvailable when `disabled==false`.",
+              "attribute": "primaryDisabled",
+              "availableWhen": "disabled==false",
+              "availableWhenIf": {
+                "arg": "disabled",
+                "truthy": false
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dropdownDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the dropdown button alone, leaving the primary action.\n\nAvailable when `disabled==false`.",
+              "attribute": "dropdownDisabled",
+              "availableWhen": "disabled==false",
+              "availableWhenIf": {
+                "arg": "disabled",
+                "truthy": false
+              }
+            },
             {
               "kind": "field",
               "name": "openTop",
@@ -83101,6 +83155,16 @@
               "description": "Open context menu dropdown above (`true`) or below (`false`) the button. Useful for placement near the bottom of the viewport.",
               "attribute": "openTop"
             },
+            {
+              "kind": "field",
+              "name": "openLeft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Extend the menu to the left of the dropdown button (`true`), its right edge on the button's right edge, instead of to the right. For a button near the right edge of its container; combines with `openTop`.",
+              "attribute": "openLeft"
+            },
             {
               "kind": "field",
               "name": "columnGroups",
@@ -83159,6 +83223,24 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isPrimaryDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isDropdownDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "handlePrimaryClick",
@@ -83348,6 +83430,24 @@
               "description": "Whether both parts of the button are disabled. When true, disables both the primary and dropdown buttons.",
               "fieldName": "disabled"
             },
+            {
+              "name": "primaryDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the primary button alone, for an action the user cannot take right now while the menu stays in use, for example to ask for the access the action needs.\n\nAvailable when `disabled==false`.",
+              "fieldName": "primaryDisabled"
+            },
+            {
+              "name": "dropdownDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the dropdown button alone, leaving the primary action.\n\nAvailable when `disabled==false`.",
+              "fieldName": "dropdownDisabled"
+            },
             {
               "name": "openTop",
               "type": {
@@ -83357,6 +83457,15 @@
               "description": "Open context menu dropdown above (`true`) or below (`false`) the button. Useful for placement near the bottom of the viewport.",
               "fieldName": "openTop"
             },
+            {
+              "name": "openLeft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Extend the menu to the left of the dropdown button (`true`), its right edge on the button's right edge, instead of to the right. For a button near the right edge of its container; combines with `openTop`.",
+              "fieldName": "openLeft"
+            },
             {
               "name": "columnGroups",
               "type": {
@@ -91209,8 +91318,18 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n\nProvides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n\nAppears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n\n## Features\n- **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n- **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n- **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n- **App Title & Page Name:** Displays the current application and page context.\n- **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n- **Command Button Slot:** Slot for inserting a primary command/action button.\n- **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n- **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n- **User/Profile Button:** Optional user icon for profile/account actions.\n- **Apps Button:** Optional button for accessing additional applications or modules.\n- **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n- **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n- **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n- **Tall Variant:** Optional increased height for touch or accessibility needs.\n- **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n\n## Variants\n- **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n- **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n- **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n- **Tall:** Increases the height of the bar for improved touch targets.\n\n## Usage Guidelines\nUse `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n\n- Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n- Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n- Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n- Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n- Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n\n**TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n\n## Slots\n\n| Slot Name        | Renders When...                 | Purpose                                                        |\n|------------------|---------------------------------|----------------------------------------------------------------|\n| `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n| `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n| `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n| `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n\n## Events\n- `menu-button-clicked` – Fired when the menu button is clicked.\n- `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n- `apps-button-clicked` – Fired when the apps button is clicked.\n- `left-more-button-clicked` – Fired when the left more button is clicked.\n- `user-button-clicked` – Fired when the user/profile button is clicked.\n- `close` – Fired in settings mode when the close button is clicked.\n- `back` – Fired in settings mode when the back button is clicked.\n- `forward` – Fired in settings mode when the forward button is clicked.\n- `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n- `emergency-brightness-stop` – Fired when the menu button is released.\n\n## Keyboard\nEvery control in the bar is its own tab stop and activates on `Enter` and\n`Space`. The bar is a navigation landmark, not an APG toolbar: its controls\nare separate components and slotted consumer content, so a roving tabindex\nacross them is deliberately not implemented. The emergency-brightness hold\nis a pointer gesture only; from the keyboard the menu button opens the menu.\n\n## Best Practices and Constraints\n- Only show interactive elements relevant to the current context to avoid clutter.\n- Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n- For accessibility, give all interactive elements labels and focus handling.\n- Adjust breakpoint properties to optimize the layout for different device sizes.\n- In settings mode, use breadcrumbs to provide clear navigation context.\n\n## Example\n\n```html\n<obc-top-bar\n  appTitle=\"My App\"\n  pageName=\"Dashboard\"\n  showAppsButton\n  showDimmingButton\n  showClock\n  showUserButton\n  showAppIcon\n>\n  <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n  <obc-command-button slot=\"command-button\"></obc-command-button>\n  <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n  <obc-clock slot=\"clock\"></obc-clock>\n</obc-top-bar>\n```",
+          "description": "`<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n\nProvides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n\nAppears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n\n## Features\n- **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n- **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n- **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n- **App Title & Page Name:** Displays the current application and page context.\n- **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n- **Command Button Slot:** Slot for inserting a primary command/action button.\n- **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n- **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n- **User/Profile Button:** Optional user icon for profile/account actions.\n- **Apps Button:** Optional button for accessing additional applications or modules.\n- **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n- **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n- **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n- **Tall Variant:** Optional increased height for touch or accessibility needs.\n- **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n\n## Variants\n- **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n- **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n- **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n- **Tall:** Increases the height of the bar for improved touch targets.\n\n## Usage Guidelines\nUse `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n\n- Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n- Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n- Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n- Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n- Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n\n**TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n\n## Slots\n\n| Slot Name        | Renders When...                 | Purpose                                                        |\n|------------------|---------------------------------|----------------------------------------------------------------|\n| `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n| `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n| `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n| `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n\n## Events\n- `menu-button-clicked` – Fired when the menu button is clicked.\n- `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n- `apps-button-clicked` – Fired when the apps button is clicked.\n- `more-button-clicked` – Fired when the more button is clicked.\n- `left-more-button-clicked` – Deprecated alias of `more-button-clicked`, fired with it; removed in 4.0.0.\n- `user-button-clicked` – Fired when the user/profile button is clicked.\n- `close` – Fired in settings mode when the close button is clicked.\n- `back` – Fired in settings mode when the back button is clicked.\n- `forward` – Fired in settings mode when the forward button is clicked.\n- `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n- `emergency-brightness-stop` – Fired when the menu button is released.\n\n## Keyboard\nEvery control in the bar is its own tab stop and activates on `Enter` and\n`Space`. The bar is a navigation landmark, not an APG toolbar: its controls\nare separate components and slotted consumer content, so a roving tabindex\nacross them is deliberately not implemented. The emergency-brightness hold\nis a pointer gesture only; from the keyboard the menu button opens the menu.\n\n## Best Practices and Constraints\n- Only show interactive elements relevant to the current context to avoid clutter.\n- Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n- For accessibility, give all interactive elements labels and focus handling.\n- Adjust breakpoint properties to optimize the layout for different device sizes.\n- In settings mode, use breadcrumbs to provide clear navigation context.\n\n## Example\n\n```html\n<obc-top-bar\n  appTitle=\"My App\"\n  pageName=\"Dashboard\"\n  showAppsButton\n  showDimmingButton\n  showClock\n  showUserButton\n  showAppIcon\n>\n  <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n  <obc-command-button slot=\"command-button\"></obc-command-button>\n  <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n  <obc-clock slot=\"clock\"></obc-clock>\n</obc-top-bar>\n```",
           "name": "ObcTopBar",
+          "cssParts": [
+            {
+              "description": "The more button shown below the breakpoints.",
+              "name": "more-button"
+            },
+            {
+              "description": "Deprecated alias of the `more-button` part; removed in 4.0.0.",
+              "name": "left-more-button"
+            }
+          ],
           "slots": [
             {
               "description": "Custom icon representing the application or brand (shown when `showAppIcon` is true)",
@@ -91297,19 +91416,28 @@
             },
             {
               "kind": "field",
-              "name": "leftMoreButtonActivated",
+              "name": "moreButtonActivated",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Highlights the left more button as active.\n\nAvailable when `inactive==false`.",
-              "attribute": "leftMoreButtonActivated",
+              "description": "Highlights the more button as active.\n\nAvailable when `inactive==false`.",
+              "attribute": "moreButtonActivated",
               "availableWhen": "inactive==false",
               "availableWhenIf": {
                 "arg": "inactive",
                 "truthy": false
               }
             },
+            {
+              "kind": "field",
+              "name": "leftMoreButtonActivated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "deprecated": "Use `moreButtonActivated`. Removed in 4.0.0.",
+              "attribute": "leftMoreButtonActivated"
+            },
             {
               "kind": "field",
               "name": "userButtonActivated",
@@ -91510,7 +91638,7 @@
             },
             {
               "kind": "method",
-              "name": "leftMoreButtonClicked",
+              "name": "moreButtonClicked",
               "privacy": "private"
             },
             {
@@ -91614,12 +91742,19 @@
               },
               "description": "Fired when the apps button is clicked"
             },
+            {
+              "name": "more-button-clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the more button is clicked"
+            },
             {
               "name": "left-more-button-clicked",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the left more button is clicked"
+              "description": "Deprecated: listen to `more-button-clicked` instead. Fired together with it; removed in 4.0.0."
             },
             {
               "name": "user-button-clicked",
@@ -91723,12 +91858,20 @@
               "fieldName": "appsButtonActivated"
             },
             {
-              "name": "leftMoreButtonActivated",
+              "name": "moreButtonActivated",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Highlights the left more button as active.\n\nAvailable when `inactive==false`.",
+              "description": "Highlights the more button as active.\n\nAvailable when `inactive==false`.",
+              "fieldName": "moreButtonActivated"
+            },
+            {
+              "name": "leftMoreButtonActivated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "deprecated": "Use `moreButtonActivated`. Removed in 4.0.0.",
               "fieldName": "leftMoreButtonActivated"
             },
             {

package/dist/components/icon-button/icon-button.d.ts

@@ -124,6 +124,8 @@ export declare class ObcIconButton extends LitElement {
     focusable: boolean;
     /** Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary. */
     ariaLabel: string | null;
+    /** Focus lands on the button inside, not on the host. */
+    focus(options?: FocusOptions): void;
     get progressSpinner(): import('lit-html').TemplateResult<1> | typeof nothing;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAQzD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,qBACa,aAAc,SAAQ,UAAU;IACjB,OAAO,EAAE,iBAAiB,CACzB;IAEA,SAAS,UAAS;IAElB,UAAU,UAAS;IAEnB,WAAW,UAAS;IAEpB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAEb,QAAQ,UAAS;IAElB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAExC,QAAQ,EAAE,OAAO,CAAS;IAER,WAAW,UAAQ;IAEnB,SAAS,UAAQ;IAIrD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAqCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAQzD;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,qBACa,aAAc,SAAQ,UAAU;IACjB,OAAO,EAAE,iBAAiB,CACzB;IAEA,SAAS,UAAS;IAElB,UAAU,UAAS;IAEnB,WAAW,UAAS;IAEpB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAEb,QAAQ,UAAS;IAElB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAExC,QAAQ,EAAE,OAAO,CAAS;IAER,WAAW,UAAQ;IAEnB,SAAS,UAAQ;IAIrD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,yDAAyD;IACzC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAqCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/icon-button/icon-button.js

@@ -37,6 +37,10 @@ var ObcIconButton = class ObcIconButton extends LitElement {
 		this.focusable = true;
 		this.ariaLabel = null;
 	}
+	/** Focus lands on the button inside, not on the host. */
+	focus(options) {
+		this.shadowRoot?.querySelector("button")?.focus(options);
+	}
 	get progressSpinner() {
 		if (this.progress === void 0) return nothing;
 		if (this.progress === 100) return html`<div class="progress-spinner">

package/dist/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for flush placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.\n * @property focusable - Whether the button is in the tab sequence. Turn it off for a button inside a\n *   composite widget that owns the tab stop, and give the widget a key for the action.\n * @property variant - Visual style: `normal` (default) is the standard appearance, `raised` adds\n *   a shadow, `flat` drops the background.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  @property({type: Boolean, attribute: false}) focusable = true;\n\n  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel: string | null = null;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n        tabindex=${ifDefined(this.focusable ? undefined : -1)}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${\n          this.hasLabel\n            ? html`<div class=\"label\" part=\"label\">\n                <slot name=\"label\"></slot>\n              </div>`\n            : nothing\n        }\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport {degToRad} from '../../svghelpers/math.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n * - `integration`: For use in Integration Bar components\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n *   - `integration`: For use in Integration Bar components\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for flush placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @property activated - Whether the button is in an activated (selected/toggled) state.\n *   Visually highlights the button to indicate selection.\n * @property cornerLeft - If true, aligns the button to the left edge and removes left border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property cornerRight - If true, aligns the button to the right edge and removes right border radius.\n *   Useful for grouping or edge-aligned layouts.\n * @property activeColor - Applies an accent color to the button for emphasis.\n *   Used to visually distinguish active or important actions.\n * @property wide - Increases the button's width for larger touch targets or visual balance.\n * @property disabled - Disables the button, preventing user interaction and dimming its appearance.\n * @property progress - Shows a circular progress indicator overlay when set (0–100).\n *   Use to indicate ongoing actions or loading states.\n *   If undefined, no progress indicator is shown.\n * @property hasLabel - If true, displays a label below the icon using the `label` slot.\n * @property showDivider - If false, and cornerLeft or cornerRight is true, the divider is not shown.\n * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.\n * @property focusable - Whether the button is in the tab sequence. Turn it off for a button inside a\n *   composite widget that owns the tab stop, and give the widget a key for the action.\n * @property variant - Visual style: `normal` (default) is the standard appearance, `raised` adds\n *   a shadow, `flat` drops the background.\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n * @stable\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  @property({type: Boolean}) activated = false;\n\n  @property({type: Boolean}) cornerLeft = false;\n\n  @property({type: Boolean}) cornerRight = false;\n\n  @property({type: Boolean}) activeColor = false;\n\n  @property({type: Boolean}) wide = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  @property({type: Boolean, attribute: false}) focusable = true;\n\n  // Reactive so a consumer swapping the name (Play → Pause) re-renders the shadow button.\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel: string | null = null;\n\n  /** Focus lands on the button inside, not on the host. */\n  public override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = degToRad(this.progress * 0.95 * 3.6);\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n        tabindex=${ifDefined(this.focusable ? undefined : -1)}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${\n          this.hasLabel\n            ? html`<div class=\"label\" part=\"label\">\n                <slot name=\"label\"></slot>\n              </div>`\n            : nothing\n        }\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"mappings":"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"}

package/dist/components/split-button/split-button.css.js

@@ -45,6 +45,11 @@ var split_button_default = css`* {
     top: unset;
   }
 
+.wrapper.open-left .positioned-menu {
+    right: anchor(right);
+    left: unset;
+  }
+
 .dropdown-button::part(visible-wrapper) {
   box-sizing: border-box;
 }

package/dist/components/split-button/split-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.css.js","names":[],"sources":["../../../src/components/split-button/split-button.css?inline"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  width: fit-content;\n\n  anchor-name: --split-button-anchor;\n\n  &.full-width {\n    width: 100%;\n  }\n}\n\n.primary-button {\n  flex: 1;\n}\n\n.primary-button::part(visible-wrapper) {\n  border-right: none;\n  flex: 1;\n}\n\n.primary-button::part(wrapper) {\n  padding-left: var(--split-button-padding-left, 8px);\n  display: flex;\n  flex-grow: 1;\n}\n\n/* Context menu positioning */\n.positioned-menu {\n  position: fixed;\n  position-anchor: --split-button-anchor;\n  left: calc(anchor(right) - var(--ui-components-button-touch-target-size));\n  top: anchor(bottom);\n}\n\n.wrapper.open-top {\n  .positioned-menu {\n    bottom: anchor(top);\n    top: unset;\n  }\n}\n\n.dropdown-button::part(visible-wrapper) {\n  box-sizing: border-box;\n}\n"],"mappings":""}
+{"version":3,"file":"split-button.css.js","names":[],"sources":["../../../src/components/split-button/split-button.css?inline"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  width: fit-content;\n\n  anchor-name: --split-button-anchor;\n\n  &.full-width {\n    width: 100%;\n  }\n}\n\n.primary-button {\n  flex: 1;\n}\n\n.primary-button::part(visible-wrapper) {\n  border-right: none;\n  flex: 1;\n}\n\n.primary-button::part(wrapper) {\n  padding-left: var(--split-button-padding-left, 8px);\n  display: flex;\n  flex-grow: 1;\n}\n\n/* Context menu positioning */\n.positioned-menu {\n  position: fixed;\n  position-anchor: --split-button-anchor;\n  left: calc(anchor(right) - var(--ui-components-button-touch-target-size));\n  top: anchor(bottom);\n}\n\n.wrapper.open-top {\n  .positioned-menu {\n    bottom: anchor(top);\n    top: unset;\n  }\n}\n\n.wrapper.open-left {\n  .positioned-menu {\n    right: anchor(right);\n    left: unset;\n  }\n}\n\n.dropdown-button::part(visible-wrapper) {\n  box-sizing: border-box;\n}\n"],"mappings":""}

package/dist/components/split-button/split-button.d.ts

@@ -24,10 +24,11 @@ export type ObcSplitButtonChangeEvent = CustomEvent<{
  * - **Multi-select and group selection:** Allows single or multiple selections in the dropdown, with optional grouping and per-group selection logic.
  * - **Customizable menu content:** Accepts an array of options or column groups, supports icons, subtitles, and multi-column layouts for complex menus.
  * - **Optional icon in primary button:** Add a leading icon to the main button using the `hasIcon` property and `icon` slot.
+ * - **Replaceable dropdown icon:** The dropdown button shows a chevron; fill the `dropdown-icon` slot to show another symbol, for example one that says what the menu holds.
  * - **Title bar and menu title:** Optionally display a title bar with close button and custom title text in the dropdown.
  * - **Full width mode:** Can stretch to fill its container using the `fullWidth` property.
- * - **Disabled state:** Disables both the primary and dropdown buttons when `disabled` is true.
- * - **Dropdown positioning:** Menu can open above or below the button (`openTop`).
+ * - **Disabled state:** `disabled` disables both halves; `primaryDisabled` and `dropdownDisabled` disable one half each, so the primary action can be unavailable while the menu stays in use.
+ * - **Dropdown positioning:** The menu opens below the button and extends to the right. `openTop` opens it above and `openLeft` extends it to the left, for a button near the bottom or the right edge of its container.
  * - **Selection persistence:** Optionally keeps the selected state visually persistent in the menu.
  * - **Keyboard and pointer accessibility:** Follows standard button and menu accessibility patterns.
  *
@@ -49,14 +50,25 @@ export type ObcSplitButtonChangeEvent = CustomEvent<{
  * - **TODO(designer):** Confirm best practices for when to use multi-select vs. single-select, and any recommended limits on number of options or columns.
  *
  * ### Slots
- * | Slot Name   | Renders When...      | Purpose                                             |
- * |-------------|---------------------|-----------------------------------------------------|
- * | `icon`      | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |
+ * | Slot Name       | Renders When...      | Purpose                                             |
+ * |-----------------|---------------------|-----------------------------------------------------|
+ * | `icon`          | `hasIcon` is true   | Leading icon in the primary button (e.g., `<obi-placeholder></obi-placeholder>`) |
+ * | `dropdown-icon` | Always              | Icon of the dropdown button; the chevron when empty |
  *
  * ### Events
  * - `click` – Fired when either the primary or dropdown button is clicked. The event detail includes `{action: 'primary' | 'dropdown'}` to distinguish which part was activated.
  * - `change` – Fired when the menu selection changes. The event detail includes `{selectedValues, selectedOptions}`.
  *
+ * ### Keyboard
+ * The primary half is a plain button. The dropdown half follows the
+ * [APG Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/):
+ * `Enter` and `Space` open the menu, `ArrowDown` and `Home` open it on the
+ * first item, `ArrowUp` and `End` on the last, and `Escape` closes it and
+ * returns focus to the dropdown half. The menu is `obc-context-menu-input`.
+ *
+ * Left out: `Enter` and `Space` land on the selected item rather than the
+ * first, so a reopened selection menu starts where the user left it.
+ *
  * ### Best Practices & Constraints
  * - Only use multi-select when the menu type and use case require it; otherwise, prefer single selection for clarity.
  * - Keep the primary action clear and distinct from dropdown actions.
@@ -107,13 +119,23 @@ export type ObcSplitButtonChangeEvent = CustomEvent<{
  *   When true, the component stretches horizontally.
  * @property disabled - Whether both parts of the button are disabled.
  *   When true, disables both the primary and dropdown buttons.
+ * @property primaryDisabled - Disables the primary button alone, for an action the user
+ *   cannot take right now while the menu stays in use, for example to ask for the access
+ *   the action needs.
+ * @availableWhen primaryDisabled disabled==false
+ * @property dropdownDisabled - Disables the dropdown button alone, leaving the primary action.
+ * @availableWhen dropdownDisabled disabled==false
  * @property openTop - Open context menu dropdown above (`true`) or below (`false`) the button.
  *   Useful for placement near the bottom of the viewport.
+ * @property openLeft - Extend the menu to the left of the dropdown button (`true`), its right
+ *   edge on the button's right edge, instead of to the right. For a button near the right
+ *   edge of its container; combines with `openTop`.
  * @property columnGroups - Array of column group definitions for multi-column/grouped menus.
  *   Use instead of `options` for grouped or subtitle layouts.
  * @availableWhen columnGroups menuType==MultiWithSubtitles
  * @property dropdownLabel - Accessible name of the dropdown button; the chevron carries none.
  * @slot icon - Leading icon for the primary button (shown when `hasIcon` is true)
+ * @slot dropdown-icon - Icon of the dropdown button; the chevron when empty.
  * @fires {ObcSplitButtonClickEvent} click - Fired when the primary or dropdown button is clicked.
  * @fires {ObcSplitButtonChangeEvent} change - Fired when the dropdown menu selection changes.
  * @beta
@@ -153,8 +175,22 @@ export declare class ObcSplitButton extends LitElement {
     fullWidth: boolean;
     /** Whether both parts of the button are disabled. When true, disables both the primary and dropdown buttons. */
     disabled: boolean;
+    /**
+     * Disables the primary button alone, for an action the user cannot take right now while the menu stays in use, for example to ask for the access the action needs.
+     *
+     * Available when `disabled==false`.
+     */
+    primaryDisabled: boolean;
+    /**
+     * Disables the dropdown button alone, leaving the primary action.
+     *
+     * Available when `disabled==false`.
+     */
+    dropdownDisabled: boolean;
     /** Open context menu dropdown above (`true`) or below (`false`) the button. Useful for placement near the bottom of the viewport. */
     openTop: boolean;
+    /** Extend the menu to the left of the dropdown button (`true`), its right edge on the button's right edge, instead of to the right. For a button near the right edge of its container; combines with `openTop`. */
+    openLeft: boolean;
     /**
      * Array of column group definitions for multi-column/grouped menus. Use instead of `options` for grouped or subtitle layouts.
      *
@@ -166,6 +202,8 @@ export declare class ObcSplitButton extends LitElement {
     private menuFocusStrategy;
     private menu?;
     private dropdownButton?;
+    private get isPrimaryDisabled();
+    private get isDropdownDisabled();
     private handlePrimaryClick;
     private handleDropdownClick;
     private focusMenuAfterOpen;

package/dist/components/split-button/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,WAAW,EACZ,MAAM,6CAA6C,CAAC;AAGrD,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IACjD,MAAM,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAClB,KAAK,SAAkB;IAEtB,OAAO,UAAS;IAElB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAElC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE7B,QAAQ,EAAE,eAAe,CAA2B;IAEnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,OAAO,CAAC;IAE1B,cAAc,EAAE,MAAM,CAAK;IAE1B,WAAW,UAAS;IAErB,SAAS,SAAM;IAEf,aAAa,SAAkB;IAE9B,SAAS,UAAS;IAElB,QAAQ,UAAS;IAEjB,OAAO,UAAS;IAElB,YAAY,EAAE,WAAW,EAAE,CAAM;IAEjD,OAAO,CAAC,cAAc,CAAS;IAExC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAA6C;IAErC,OAAO,CAAC,IAAI,CAAC,CAAsB;IAEzC,OAAO,CAAC,cAAc,CAAC,CAAc;IAEhE,OAAO,CAAC,kBAAkB,CAOxB;IAEF,OAAO,CAAC,mBAAmB,CAczB;YAEY,kBAAkB;IAehC,OAAO,CAAC,qBAAqB,CAmD3B;IAEF,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,mBAAmB,CAYzB;IAEF,OAAO,KAAK,aAAa,GAQxB;IAED,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,eAAe,CAUrB;IAEO,oBAAoB;IAKpB,MAAM;IAoEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button/split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,WAAW,EACZ,MAAM,6CAA6C,CAAC;AAGrD,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IACjD,MAAM,EAAE,SAAS,GAAG,UAAU,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8HG;AACH,qBACa,cAAe,SAAQ,UAAU;IAClB,KAAK,SAAkB;IAEtB,OAAO,UAAS;IAElB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAElC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE7B,QAAQ,EAAE,eAAe,CAA2B;IAEnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,OAAO,CAAC;IAE1B,cAAc,EAAE,MAAM,CAAK;IAE1B,WAAW,UAAS;IAErB,SAAS,SAAM;IAEf,aAAa,SAAkB;IAE9B,SAAS,UAAS;IAElB,QAAQ,UAAS;IAEjB,eAAe,UAAS;IAExB,gBAAgB,UAAS;IAEzB,OAAO,UAAS;IAEhB,QAAQ,UAAS;IAEnB,YAAY,EAAE,WAAW,EAAE,CAAM;IAEjD,OAAO,CAAC,cAAc,CAAS;IAExC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAA6C;IAErC,OAAO,CAAC,IAAI,CAAC,CAAsB;IAEzC,OAAO,CAAC,cAAc,CAAC,CAAc;IAEhE,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,kBAAkB,CAOxB;IAEF,OAAO,CAAC,mBAAmB,CAczB;YAEY,kBAAkB;IAkBhC,OAAO,CAAC,qBAAqB,CAmD3B;IAEF,OAAO,CAAC,cAAc,CAKpB;IAEF,OAAO,CAAC,mBAAmB,CAYzB;IAEF,OAAO,KAAK,aAAa,GAQxB;IAED,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,eAAe,CAUrB;IAEO,oBAAoB;IAKpB,MAAM;IAyEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/split-button/split-button.js

@@ -24,7 +24,10 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
 		this.dropdownLabel = "More options";
 		this.fullWidth = false;
 		this.disabled = false;
+		this.primaryDisabled = false;
+		this.dropdownDisabled = false;
 		this.openTop = false;
+		this.openLeft = false;
 		this.columnGroups = [];
 		this.isDropdownOpen = false;
 		this.restoreFocusOnClose = false;
@@ -43,7 +46,7 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
 			} else window.removeEventListener("pointerdown", this.closeOnOutside);
 		};
 		this.handleDropdownKeydown = (event) => {
-			if (this.disabled) return;
+			if (this.isDropdownDisabled) return;
 			switch (event.key) {
 				case "ArrowDown":
 					event.preventDefault();
@@ -105,8 +108,15 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
 			});
 		};
 	}
+	get isPrimaryDisabled() {
+		return this.disabled || this.primaryDisabled;
+	}
+	get isDropdownDisabled() {
+		return this.disabled || this.dropdownDisabled;
+	}
 	async focusMenuAfterOpen() {
 		await this.updateComplete;
+		await this.menu?.updateComplete;
 		if (!this.isDropdownOpen) return;
 		if (this.menuFocusStrategy === "last") this.menu?.focusLastItem();
 		else if (this.menuFocusStrategy === "first") this.menu?.focusFirstItem();
@@ -138,7 +148,8 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
 			wrapper: true,
 			"full-width": this.fullWidth,
 			"is-open": this.isDropdownOpen,
-			"open-top": this.openTop
+			"open-top": this.openTop,
+			"open-left": this.openLeft
 		})}
       >
         <obc-button
@@ -146,7 +157,7 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
           .variant=${"normal"}
           .segmentPosition=${segmentPosition.start}
           .showLeadingIcon=${this.hasIcon}
-          .disabled=${this.disabled}
+          .disabled=${this.isPrimaryDisabled}
           @click=${this.handlePrimaryClick}
           .fullWidth=${this.fullWidth}
         >
@@ -158,7 +169,7 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
           class="dropdown-button"
           .variant=${"normal"}
           .cornerRight=${true}
-          .disabled=${this.disabled}
+          .disabled=${this.isDropdownDisabled}
           .activated=${this.isDropdownOpen}
           aria-label=${this.dropdownLabel}
           @click=${this.handleDropdownClick}
@@ -166,7 +177,11 @@ var ObcSplitButton = class ObcSplitButton extends LitElement {
           aria-expanded=${this.isDropdownOpen}
           aria-haspopup="menu"
         >
-          <obi-arrow-flyout-google></obi-arrow-flyout-google>
+          <slot name="dropdown-icon">
+            <obi-arrow-flyout-google
+              aria-hidden="true"
+            ></obi-arrow-flyout-google>
+          </slot>
         </obc-icon-button>
 
         <!-- Context Menu -->
@@ -207,7 +222,10 @@ __decorate([property({ type: String })], ObcSplitButton.prototype, "menuTitle",
 __decorate([property({ type: String })], ObcSplitButton.prototype, "dropdownLabel", void 0);
 __decorate([property({ type: Boolean })], ObcSplitButton.prototype, "fullWidth", void 0);
 __decorate([property({ type: Boolean })], ObcSplitButton.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], ObcSplitButton.prototype, "primaryDisabled", void 0);
+__decorate([property({ type: Boolean })], ObcSplitButton.prototype, "dropdownDisabled", void 0);
 __decorate([property({ type: Boolean })], ObcSplitButton.prototype, "openTop", void 0);
+__decorate([property({ type: Boolean })], ObcSplitButton.prototype, "openLeft", void 0);
 __decorate([property({ type: Array })], ObcSplitButton.prototype, "columnGroups", void 0);
 __decorate([state()], ObcSplitButton.prototype, "isDropdownOpen", void 0);
 __decorate([query("obc-context-menu-input")], ObcSplitButton.prototype, "menu", void 0);