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

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": {

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);

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../../src/components/split-button/split-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './split-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {segmentPosition} from '../button/button.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../menu-button/menu-button.js';\nimport {\n  ContextMenuType,\n  ContextMenuOption,\n  ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonClickEvent = CustomEvent<{\n  action: 'primary' | 'dropdown';\n  value?: string;\n  option?: ContextMenuOption;\n}>;\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n  selectedValues: string[];\n  selectedOptions: Array<ContextMenuOption>;\n}>;\n\n/**\n * `<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 *\n * Provides 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\n * Use `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 * ```\n * In this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.\n *\n * @property label - The label displayed on the main (primary) button.\n * @property hasIcon - Whether the main button should show a leading icon slot.\n *   When true, content in the `icon` slot is rendered before the label.\n * @property options - Array of menu options for the dropdown.\n *   Each option should be a `ContextMenuOption` object.\n *   For grouped or multi-column menus, use `columnGroups` instead.\n * @property selectedValues - Array of currently selected option values in the dropdown.\n *   Used to control the checked/selected state of menu items.\n * @property menuType - The variant type of context menu to display in the dropdown.\n *   Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles').\n * @property multiSelect - Whether multiple selections are allowed in the dropdown.\n *   If true, users can select more than one option (e.g., for checkboxes or multi-column).\n * @property selectPerGroup - Allows single selection per group/column (matches context-menu-input).\n *   When true, only one option can be selected per group/column.\n * @property itemsPerColumn - Number of items per column in multi-column layouts.\n *   Used when `menuType` is 'multi' or 'multiWithSubtitles'.\n * @availableWhen itemsPerColumn menuType in [Multi, MultiWithSubtitles]\n * @property hasTitleBar - Whether to show a title bar with close button in the dropdown.\n *   When true, a title bar appears at the top of the menu.\n * @property menuTitle - Title text for the dropdown menu.\n *   Displayed in the title bar when `hasTitleBar` is true.\n * @availableWhen menuTitle hasTitleBar==true\n * @property fullWidth - Whether the split button should fill the full width of its container.\n *   When true, the component stretches horizontally.\n * @property disabled - Whether both parts of the button are disabled.\n *   When true, disables both the primary and dropdown buttons.\n * @property openTop - Open context menu dropdown above (`true`) or below (`false`) the button.\n *   Useful for placement near the bottom of the viewport.\n * @property columnGroups - Array of column group definitions for multi-column/grouped menus.\n *   Use instead of `options` for grouped or subtitle layouts.\n * @availableWhen columnGroups menuType==MultiWithSubtitles\n * @property dropdownLabel - Accessible name of the dropdown button; the chevron carries none.\n * @slot icon - Leading icon for the primary button (shown when `hasIcon` is true)\n * @fires {ObcSplitButtonClickEvent} click - Fired when the primary or dropdown button is clicked.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the dropdown menu selection changes.\n * @beta\n */\n@customElement('obc-split-button')\nexport class ObcSplitButton extends LitElement {\n  @property({type: String}) label = 'Split Button';\n\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Array}) options: ContextMenuOption[] = [];\n\n  @property({type: Array}) selectedValues: string[] = [];\n\n  @property({type: String}) menuType: ContextMenuType = ContextMenuType.Regular;\n\n  @property({type: Boolean}) multiSelect?: boolean;\n\n  @property({type: Boolean}) selectPerGroup?: boolean;\n\n  @property({type: Number}) itemsPerColumn: number = 5;\n\n  @property({type: Boolean}) hasTitleBar = false;\n\n  @property({type: String}) menuTitle = '';\n\n  @property({type: String}) dropdownLabel = 'More options';\n\n  @property({type: Boolean}) fullWidth = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) openTop = false;\n\n  @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n  @state() private isDropdownOpen = false;\n\n  private restoreFocusOnClose = false;\n\n  private menuFocusStrategy: 'first' | 'selected' | 'last' = 'selected';\n\n  @query('obc-context-menu-input') private menu?: ObcContextMenuInput;\n\n  @query('.dropdown-button') private dropdownButton?: HTMLElement;\n\n  private handlePrimaryClick = (e: Event) => {\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'primary'},\n      })\n    );\n  };\n\n  private handleDropdownClick = (e: Event) => {\n    e.stopPropagation();\n    this.isDropdownOpen = !this.isDropdownOpen;\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'dropdown'},\n      })\n    );\n    if (this.isDropdownOpen) {\n      window.addEventListener('pointerdown', this.closeOnOutside);\n      void this.focusMenuAfterOpen();\n    } else {\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private async focusMenuAfterOpen() {\n    await this.updateComplete;\n    if (!this.isDropdownOpen) return;\n\n    if (this.menuFocusStrategy === 'last') {\n      this.menu?.focusLastItem();\n    } else if (this.menuFocusStrategy === 'first') {\n      this.menu?.focusFirstItem();\n    } else {\n      this.menu?.focusSelectedItem();\n    }\n\n    this.menuFocusStrategy = 'selected';\n  }\n\n  private handleDropdownKeydown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'End':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private closeOnOutside = (e: Event) => {\n    if (!this.contains(e.target as Node)) {\n      this.isDropdownOpen = false;\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private handleMenuItemClick = (e: CustomEvent) => {\n    const {option} = e.detail;\n    // For flyout, only close if it's a leaf (not a group)\n    if (\n      this.menuType === ContextMenuType.Flyout &&\n      option.children &&\n      option.children.length\n    ) {\n      return; // do not close if it's a group\n    }\n    // Close for all other options (including flyout leaves)\n    this.handleMenuClose();\n  };\n\n  private get isMultiSelect(): boolean {\n    if (this.multiSelect !== undefined) return this.multiSelect;\n    return [\n      ContextMenuType.Checkboxes,\n      ContextMenuType.NestedCheckboxes,\n      ContextMenuType.Multi,\n      ContextMenuType.MultiWithSubtitles,\n    ].includes(this.menuType);\n  }\n\n  private handleMenuChange(\n    e: CustomEvent<{\n      selectedValues: string[];\n      selectedOptions: ContextMenuOption[];\n    }>\n  ) {\n    this.selectedValues = e.detail.selectedValues;\n\n    this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n    this.handleMenuClose();\n  }\n\n  private handleMenuClose = () => {\n    this.restoreFocusOnClose = true;\n    this.isDropdownOpen = false;\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    queueMicrotask(() => {\n      if (this.restoreFocusOnClose) {\n        this.restoreFocusOnClose = false;\n        this.dropdownButton?.focus();\n      }\n    });\n  };\n\n  override disconnectedCallback() {\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'full-width': this.fullWidth,\n          'is-open': this.isDropdownOpen,\n          'open-top': this.openTop,\n        })}\n      >\n        <obc-button\n          class=\"primary-button\"\n          .variant=${'normal'}\n          .segmentPosition=${segmentPosition.start}\n          .showLeadingIcon=${this.hasIcon}\n          .disabled=${this.disabled}\n          @click=${this.handlePrimaryClick}\n          .fullWidth=${this.fullWidth}\n        >\n          ${\n            this.hasIcon\n              ? html`<slot name=\"icon\" slot=\"leading-icon\"></slot>`\n              : nothing\n          }\n          ${this.label}\n        </obc-button>\n\n        <obc-icon-button\n          class=\"dropdown-button\"\n          .variant=${'normal'}\n          .cornerRight=${true}\n          .disabled=${this.disabled}\n          .activated=${this.isDropdownOpen}\n          aria-label=${this.dropdownLabel}\n          @click=${this.handleDropdownClick}\n          @keydown=${this.handleDropdownKeydown}\n          aria-expanded=${this.isDropdownOpen}\n          aria-haspopup=\"menu\"\n        >\n          <obi-arrow-flyout-google></obi-arrow-flyout-google>\n        </obc-icon-button>\n\n        <!-- Context Menu -->\n        ${\n          this.isDropdownOpen && this.options.length > 0\n            ? html`\n            <obc-context-menu-input\n              class=\"positioned-menu\"\n              .options=${this.options}\n              .selectedValues=${this.selectedValues}\n              .type=${this.menuType}\n              .multiSelect=${this.isMultiSelect}\n              .selectPerGroup=${true}\n              .hasTitleBar=${this.hasTitleBar}\n              .title=${this.menuTitle}\n              .columnGroups=${this.columnGroups}\n              .itemsPerColumn=${this.itemsPerColumn}\n              @change=${this.handleMenuChange}\n              @close=${this.handleMenuClose}\n              @item-click=${this.handleMenuItemClick}\n            /></obc-context-menu-input>\n            `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-split-button': ObcSplitButton;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../../src/components/split-button/split-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './split-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {segmentPosition} from '../button/button.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport '../button/button.js';\nimport '../icon-button/icon-button.js';\nimport '../menu-button/menu-button.js';\nimport {\n  ContextMenuType,\n  ContextMenuOption,\n  ColumnGroup,\n} from '../context-menu-input/context-menu-input.js';\nimport type {ObcContextMenuInput} from '../context-menu-input/context-menu-input.js';\n\nexport type ObcSplitButtonClickEvent = CustomEvent<{\n  action: 'primary' | 'dropdown';\n  value?: string;\n  option?: ContextMenuOption;\n}>;\n\nexport type ObcSplitButtonChangeEvent = CustomEvent<{\n  selectedValues: string[];\n  selectedOptions: Array<ContextMenuOption>;\n}>;\n\n/**\n * `<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 *\n * Provides 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\n * Use `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\n * The 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\n * first item, `ArrowUp` and `End` on the last, and `Escape` closes it and\n * returns focus to the dropdown half. The menu is `obc-context-menu-input`.\n *\n * Left out: `Enter` and `Space` land on the selected item rather than the\n * first, 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 * ```\n * In this example, the split button shows a \"Save\" action with a leading icon, and a dropdown menu with \"Save As...\" and \"Export\" options.\n *\n * @property label - The label displayed on the main (primary) button.\n * @property hasIcon - Whether the main button should show a leading icon slot.\n *   When true, content in the `icon` slot is rendered before the label.\n * @property options - Array of menu options for the dropdown.\n *   Each option should be a `ContextMenuOption` object.\n *   For grouped or multi-column menus, use `columnGroups` instead.\n * @property selectedValues - Array of currently selected option values in the dropdown.\n *   Used to control the checked/selected state of menu items.\n * @property menuType - The variant type of context menu to display in the dropdown.\n *   Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles').\n * @property multiSelect - Whether multiple selections are allowed in the dropdown.\n *   If true, users can select more than one option (e.g., for checkboxes or multi-column).\n * @property selectPerGroup - Allows single selection per group/column (matches context-menu-input).\n *   When true, only one option can be selected per group/column.\n * @property itemsPerColumn - Number of items per column in multi-column layouts.\n *   Used when `menuType` is 'multi' or 'multiWithSubtitles'.\n * @availableWhen itemsPerColumn menuType in [Multi, MultiWithSubtitles]\n * @property hasTitleBar - Whether to show a title bar with close button in the dropdown.\n *   When true, a title bar appears at the top of the menu.\n * @property menuTitle - Title text for the dropdown menu.\n *   Displayed in the title bar when `hasTitleBar` is true.\n * @availableWhen menuTitle hasTitleBar==true\n * @property fullWidth - Whether the split button should fill the full width of its container.\n *   When true, the component stretches horizontally.\n * @property disabled - Whether both parts of the button are disabled.\n *   When true, disables both the primary and dropdown buttons.\n * @property primaryDisabled - Disables the primary button alone, for an action the user\n *   cannot take right now while the menu stays in use, for example to ask for the access\n *   the action needs.\n * @availableWhen primaryDisabled disabled==false\n * @property dropdownDisabled - Disables the dropdown button alone, leaving the primary action.\n * @availableWhen dropdownDisabled disabled==false\n * @property openTop - Open context menu dropdown above (`true`) or below (`false`) the button.\n *   Useful for placement near the bottom of the viewport.\n * @property openLeft - Extend the menu to the left of the dropdown button (`true`), its right\n *   edge on the button's right edge, instead of to the right. For a button near the right\n *   edge of its container; combines with `openTop`.\n * @property columnGroups - Array of column group definitions for multi-column/grouped menus.\n *   Use instead of `options` for grouped or subtitle layouts.\n * @availableWhen columnGroups menuType==MultiWithSubtitles\n * @property dropdownLabel - Accessible name of the dropdown button; the chevron carries none.\n * @slot icon - Leading icon for the primary button (shown when `hasIcon` is true)\n * @slot dropdown-icon - Icon of the dropdown button; the chevron when empty.\n * @fires {ObcSplitButtonClickEvent} click - Fired when the primary or dropdown button is clicked.\n * @fires {ObcSplitButtonChangeEvent} change - Fired when the dropdown menu selection changes.\n * @beta\n */\n@customElement('obc-split-button')\nexport class ObcSplitButton extends LitElement {\n  @property({type: String}) label = 'Split Button';\n\n  @property({type: Boolean}) hasIcon = false;\n\n  @property({type: Array}) options: ContextMenuOption[] = [];\n\n  @property({type: Array}) selectedValues: string[] = [];\n\n  @property({type: String}) menuType: ContextMenuType = ContextMenuType.Regular;\n\n  @property({type: Boolean}) multiSelect?: boolean;\n\n  @property({type: Boolean}) selectPerGroup?: boolean;\n\n  @property({type: Number}) itemsPerColumn: number = 5;\n\n  @property({type: Boolean}) hasTitleBar = false;\n\n  @property({type: String}) menuTitle = '';\n\n  @property({type: String}) dropdownLabel = 'More options';\n\n  @property({type: Boolean}) fullWidth = false;\n\n  @property({type: Boolean}) disabled = false;\n\n  @property({type: Boolean}) primaryDisabled = false;\n\n  @property({type: Boolean}) dropdownDisabled = false;\n\n  @property({type: Boolean}) openTop = false;\n\n  @property({type: Boolean}) openLeft = false;\n\n  @property({type: Array}) columnGroups: ColumnGroup[] = [];\n\n  @state() private isDropdownOpen = false;\n\n  private restoreFocusOnClose = false;\n\n  private menuFocusStrategy: 'first' | 'selected' | 'last' = 'selected';\n\n  @query('obc-context-menu-input') private menu?: ObcContextMenuInput;\n\n  @query('.dropdown-button') private dropdownButton?: HTMLElement;\n\n  private get isPrimaryDisabled(): boolean {\n    return this.disabled || this.primaryDisabled;\n  }\n\n  private get isDropdownDisabled(): boolean {\n    return this.disabled || this.dropdownDisabled;\n  }\n\n  private handlePrimaryClick = (e: Event) => {\n    e.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'primary'},\n      })\n    );\n  };\n\n  private handleDropdownClick = (e: Event) => {\n    e.stopPropagation();\n    this.isDropdownOpen = !this.isDropdownOpen;\n    this.dispatchEvent(\n      new CustomEvent('click', {\n        detail: {action: 'dropdown'},\n      })\n    );\n    if (this.isDropdownOpen) {\n      window.addEventListener('pointerdown', this.closeOnOutside);\n      void this.focusMenuAfterOpen();\n    } else {\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private async focusMenuAfterOpen() {\n    await this.updateComplete;\n    // The menu is created on open; its items can take focus only once it has\n    // rendered them, which this host's own update does not wait for.\n    await this.menu?.updateComplete;\n    if (!this.isDropdownOpen) return;\n\n    if (this.menuFocusStrategy === 'last') {\n      this.menu?.focusLastItem();\n    } else if (this.menuFocusStrategy === 'first') {\n      this.menu?.focusFirstItem();\n    } else {\n      this.menu?.focusSelectedItem();\n    }\n\n    this.menuFocusStrategy = 'selected';\n  }\n\n  private handleDropdownKeydown = (event: KeyboardEvent) => {\n    if (this.isDropdownDisabled) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.menuFocusStrategy = 'first';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusFirstItem();\n        }\n        break;\n      case 'End':\n        event.preventDefault();\n        this.menuFocusStrategy = 'last';\n        if (!this.isDropdownOpen) {\n          this.isDropdownOpen = true;\n          window.addEventListener('pointerdown', this.closeOnOutside);\n          void this.focusMenuAfterOpen();\n        } else {\n          this.menu?.focusLastItem();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private closeOnOutside = (e: Event) => {\n    if (!this.contains(e.target as Node)) {\n      this.isDropdownOpen = false;\n      window.removeEventListener('pointerdown', this.closeOnOutside);\n    }\n  };\n\n  private handleMenuItemClick = (e: CustomEvent) => {\n    const {option} = e.detail;\n    // For flyout, only close if it's a leaf (not a group)\n    if (\n      this.menuType === ContextMenuType.Flyout &&\n      option.children &&\n      option.children.length\n    ) {\n      return; // do not close if it's a group\n    }\n    // Close for all other options (including flyout leaves)\n    this.handleMenuClose();\n  };\n\n  private get isMultiSelect(): boolean {\n    if (this.multiSelect !== undefined) return this.multiSelect;\n    return [\n      ContextMenuType.Checkboxes,\n      ContextMenuType.NestedCheckboxes,\n      ContextMenuType.Multi,\n      ContextMenuType.MultiWithSubtitles,\n    ].includes(this.menuType);\n  }\n\n  private handleMenuChange(\n    e: CustomEvent<{\n      selectedValues: string[];\n      selectedOptions: ContextMenuOption[];\n    }>\n  ) {\n    this.selectedValues = e.detail.selectedValues;\n\n    this.dispatchEvent(new CustomEvent('change', {detail: e.detail}));\n    this.handleMenuClose();\n  }\n\n  private handleMenuClose = () => {\n    this.restoreFocusOnClose = true;\n    this.isDropdownOpen = false;\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    queueMicrotask(() => {\n      if (this.restoreFocusOnClose) {\n        this.restoreFocusOnClose = false;\n        this.dropdownButton?.focus();\n      }\n    });\n  };\n\n  override disconnectedCallback() {\n    window.removeEventListener('pointerdown', this.closeOnOutside);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'full-width': this.fullWidth,\n          'is-open': this.isDropdownOpen,\n          'open-top': this.openTop,\n          'open-left': this.openLeft,\n        })}\n      >\n        <obc-button\n          class=\"primary-button\"\n          .variant=${'normal'}\n          .segmentPosition=${segmentPosition.start}\n          .showLeadingIcon=${this.hasIcon}\n          .disabled=${this.isPrimaryDisabled}\n          @click=${this.handlePrimaryClick}\n          .fullWidth=${this.fullWidth}\n        >\n          ${\n            this.hasIcon\n              ? html`<slot name=\"icon\" slot=\"leading-icon\"></slot>`\n              : nothing\n          }\n          ${this.label}\n        </obc-button>\n\n        <obc-icon-button\n          class=\"dropdown-button\"\n          .variant=${'normal'}\n          .cornerRight=${true}\n          .disabled=${this.isDropdownDisabled}\n          .activated=${this.isDropdownOpen}\n          aria-label=${this.dropdownLabel}\n          @click=${this.handleDropdownClick}\n          @keydown=${this.handleDropdownKeydown}\n          aria-expanded=${this.isDropdownOpen}\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"dropdown-icon\">\n            <obi-arrow-flyout-google\n              aria-hidden=\"true\"\n            ></obi-arrow-flyout-google>\n          </slot>\n        </obc-icon-button>\n\n        <!-- Context Menu -->\n        ${\n          this.isDropdownOpen && this.options.length > 0\n            ? html`\n            <obc-context-menu-input\n              class=\"positioned-menu\"\n              .options=${this.options}\n              .selectedValues=${this.selectedValues}\n              .type=${this.menuType}\n              .multiSelect=${this.isMultiSelect}\n              .selectPerGroup=${true}\n              .hasTitleBar=${this.hasTitleBar}\n              .title=${this.menuTitle}\n              .columnGroups=${this.columnGroups}\n              .itemsPerColumn=${this.itemsPerColumn}\n              @change=${this.handleMenuChange}\n              @close=${this.handleMenuClose}\n              @item-click=${this.handleMenuItemClick}\n            /></obc-context-menu-input>\n            `\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-split-button': ObcSplitButton;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.1.0",
+  "version": "2.2.0-next.1",
   "type": "module",
   "repository": {
     "type": "git",