@oicl/openbridge-webcomponents 2.1.0-next.9 → 2.1.0

package/custom-elements.json

@@ -62612,7 +62612,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -62622,7 +62622,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -62834,7 +62834,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -62845,7 +62845,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -62854,7 +62854,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -63227,7 +63227,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -63237,7 +63237,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -63279,7 +63279,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -63290,7 +63290,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -63299,7 +63299,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             }
           ],
@@ -64694,7 +64694,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -64704,7 +64704,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -65088,7 +65088,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -65099,7 +65099,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -65108,7 +65108,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -67765,7 +67765,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -67775,7 +67775,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -67836,7 +67836,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -67847,7 +67847,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -67856,7 +67856,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -68037,7 +68037,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -68047,7 +68047,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -68470,7 +68470,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the close button is clicked, on `Escape`, and, with `softDismiss` on, when the menu closed on its own from a click outside or another menu opening."
+              "description": "Fired when the close button is clicked, on `Escape`, and, with `softDismiss` on, when the menu closed on its own from a click outside or another menu opening. Reset the flag you bind to `open` here in every case: after a self-dismissal `open` is already `false`, while the close button and `Escape` without `softDismiss` leave `open` as it was and only ask."
             },
             {
               "name": "item-click",
@@ -68494,7 +68494,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -68503,7 +68503,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -74950,7 +74950,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -74960,7 +74960,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -75292,7 +75292,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -75303,7 +75303,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -75312,7 +75312,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -84490,7 +84490,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -84500,7 +84500,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -85090,7 +85090,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -85101,7 +85101,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -85110,7 +85110,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -93182,7 +93182,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "attribute": "softDismiss"
             },
             {
@@ -93192,7 +93192,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "attribute": "open",
               "availableWhen": "softDismiss==true",
               "availableWhenIf": {
@@ -93651,7 +93651,7 @@
               "type": {
                 "text": "CustomEvent<void>"
               },
-              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.",
+              "description": "Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.",
               "name": "close"
             }
           ],
@@ -93662,7 +93662,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.",
+              "description": "Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.",
               "fieldName": "softDismiss"
             },
             {
@@ -93671,7 +93671,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu is showing.\n\nAvailable when `softDismiss==true`.",
+              "description": "Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n\nAvailable when `softDismiss==true`.",
               "fieldName": "open"
             },
             {
@@ -117182,7 +117182,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "The value alert frame, drawn as a pure overlay around the value reading\n(value + degree + unit). It reserves no space — the `obc-alert-frame` sits in\nan absolutely-positioned box offset outward (see `.value-alert-overlay` in\nthe CSS) so its stroke is centred on the 4px/2px padding line and toggling it\nnever shifts content or row height. Renders only when `valueOptions.alert` is\na config object."
+              "description": "The value alert frame, drawn as a pure overlay around the value reading\n(value + degree + unit). It reserves no space — the `obc-alert-frame` sits in\nan absolutely-positioned box on the reading's edges, padded inline only\n(see `.value-alert-overlay` in the CSS), so toggling it never shifts\ncontent or row height. Renders only when `valueOptions.alert` is a config\nobject."
             },
             {
               "kind": "method",
@@ -118566,7 +118566,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "The value alert frame, drawn as a pure overlay around the value reading\n(value + degree). It reserves no space — the `obc-alert-frame` sits in an\nabsolutely-positioned box offset outward (see `.value-alert-overlay` in the\nCSS) so its stroke is centred on the 4px/2px padding line and toggling it\nnever shifts content. Renders only when `valueOptions.alert` is a config\nobject."
+              "description": "The value alert frame, drawn as a pure overlay around the value reading\n(value + degree). It reserves no space — the `obc-alert-frame` sits in an\nabsolutely-positioned box on the reading's edges, padded inline only (see\n`.value-alert-overlay` in the CSS), so toggling it never shifts content.\nRenders only when `valueOptions.alert` is a config object."
             },
             {
               "kind": "method",

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

@@ -95,8 +95,8 @@ export interface AlertMenuTab {
  *   When hidden, the "ACK visible" button expands to fill the freed space.
  * @property showAlertListButton - If true, shows the "Alerts" navigation button in the action bar.
  *   When hidden, the "ACK visible" button expands to fill the freed space.
- * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.
- * @property open - Whether the menu is showing.
+ * @property softDismiss - Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.
+ * @property open - Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.
  * @availableWhen open softDismiss==true
  * @slot - The alerts items as ObcAlertMenuItem
  * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
@@ -105,13 +105,13 @@ export interface AlertMenuTab {
  * @fires {ObcAckAllVisibleClickEvent} ack-all-visible-click - Fired when the ack all visible button is clicked
  * @fires {CustomEvent} silence-click - Fired when the silence button is clicked
  * @fires {CustomEvent} go-to-alert-list-click - Fired when the go to alert list button is clicked
- * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.
+ * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.
  */
 export declare class ObcAlertMenu extends LitElement {
-    /** Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself. */
+    /** Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself. */
     softDismiss: boolean;
     /**
-     * Whether the menu is showing.
+     * Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.
      *
      * Available when `softDismiss==true`.
      */

package/dist/components/alert-menu/alert-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-menu.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {\n  CSSResultGroup,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  html,\n  nothing,\n  unsafeCSS,\n} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport type {ObcAlertListBase} from '../../building-blocks/alert-list/alert-list-base.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n  visibleElements: {element: HTMLElement; index: number}[];\n  tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/** One tab of an alert menu: its name, its label and its empty state. */\nexport interface AlertMenuTab {\n  /** Names the tab in `ack-all-visible-click` and in the `empty-<tab>-*` slots. */\n  name: string;\n  title: string;\n  emptyTitle: string;\n  emptyIcon: TemplateResult;\n}\n\nconst WAITING_FOR_ACK: string[] = [\n  ObcAlertMenuItemStatus.Unacknowledged,\n  ObcAlertMenuItemStatus.RectifiedUnacknowledged,\n];\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts: \"Unacked\" shows the non-shelved items still waiting for acknowledgment (`unacknowledged` or `rectified-unacknowledged`), \"Active\" every non-shelved item except the `rectified-unacknowledged` ones. A subclass changes the tabs and the list through the `tabs` and `renderList` hooks.\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name                        | Renders When...                  | Purpose                                                        |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default)                        | Always                           | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-<tab>-title                | Selected tab is empty            | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-description          | Selected tab is empty            | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-icon                 | Selected tab is empty            | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, keep all alert items and action buttons keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n *   <obc-alert-menu-item active hasTime>\n *     <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n *     <span slot=\"title\">Engine Overheat</span>\n *     <span slot=\"description\">Main engine temperature exceeds threshold</span>\n *     <span slot=\"time\">09:12:34</span>\n *   </obc-alert-menu-item>\n *   <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @property hasShelved - If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n *   Set to false to hide the \"Shelved\" tab and related filtering.\n * @property canAckAll - If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n *   Should be set to true only when there are unacknowledged alerts in view.\n * @property showSilenceButton - If true, shows the \"Silence\" button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property showAlertListButton - If true, shows the \"Alerts\" navigation button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires {ObcAckAllVisibleClickEvent} ack-all-visible-click - Fired when the ack all visible button is clicked\n * @fires {CustomEvent} silence-click - Fired when the silence button is clicked\n * @fires {CustomEvent} go-to-alert-list-click - Fired when the go to alert list button is clicked\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: Boolean}) hasShelved: boolean = false;\n\n  @property({type: Boolean}) canAckAll: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n    true;\n\n  @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n    true;\n\n  /** The `name` of the tab the user picked; the second tab shows until then. */\n  @state() private _selectedTabName?: string;\n\n  @query('.alert-list')\n  private alertList!: ObcAlertListBase;\n\n  private handleAckAllVisibleClick() {\n    const panel = this.alertList;\n    const visibleElements = panel.getVisibleElements();\n    this.dispatchEvent(\n      new CustomEvent('ack-all-visible-click', {\n        detail: {\n          visibleElements: visibleElements,\n          tabName: this.selectedTab.name,\n        },\n      })\n    );\n  }\n\n  private onTabChange(e: ObcTabbedCardChangeEvent) {\n    this._selectedTabName = this.tabs[e.detail.tab]?.name;\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n    // A picked tab that goes away, as Shelved does when `hasShelved` turns\n    // off, gives way to the second tab, which stays when the tab returns.\n    if (!this.tabs.some((tab) => tab.name === this._selectedTabName)) {\n      this._selectedTabName = undefined;\n    }\n  }\n\n  /** Whether the menu offers \"ACK visible\" at all; `canAckAll` enables it. */\n  protected get offersAckAll(): boolean {\n    return true;\n  }\n\n  /** The tabs in display order; the menu opens on the second one. */\n  protected get tabs(): AlertMenuTab[] {\n    const tabs = [\n      {\n        name: 'unacked',\n        title: msg('Unacked'),\n        emptyTitle: msg('No unacknowledged alerts'),\n        emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n      },\n      {\n        name: 'all',\n        title: msg('Active'),\n        emptyTitle: msg('No active alerts'),\n        emptyIcon: html`<obi-alerts></obi-alerts>`,\n      },\n    ];\n    if (this.hasShelved) {\n      tabs.push({\n        name: 'shelved',\n        title: msg('Shelved'),\n        emptyTitle: msg('No shelved alerts'),\n        emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n      });\n    }\n    return tabs;\n  }\n\n  /** Where the selected tab sits in `tabs`: the one the user picked, else the second. */\n  private selectedTabIndex(tabs: AlertMenuTab[]): number {\n    const index = tabs.findIndex((tab) => tab.name === this._selectedTabName);\n    return index === -1 ? 1 : index;\n  }\n\n  private get selectedTab(): AlertMenuTab {\n    const tabs = this.tabs;\n    return tabs[this.selectedTabIndex(tabs)];\n  }\n\n  /**\n   * The list that shows the selected tab's items. The CSS hides the items the\n   * tab leaves out; the filter tells the list which ones those are.\n   */\n  protected renderList(\n    tab: AlertMenuTab,\n    content: TemplateResult\n  ): TemplateResult {\n    return html`<obc-alert-list\n      class=\"alert-list ${tab.name}\"\n      .filter=${(item: HTMLElement) => this.tabFilter(tab.name, item)}\n      >${content}</obc-alert-list\n    >`;\n  }\n\n  private tabFilter(name: string, item: HTMLElement): boolean {\n    const status = item.getAttribute('status') ?? '';\n    if (name === 'unacked') {\n      return WAITING_FOR_ACK.includes(status) && !item.hasAttribute('shelved');\n    }\n    if (name === 'shelved') {\n      return item.hasAttribute('shelved');\n    }\n    return (\n      !item.hasAttribute('shelved') &&\n      status !== ObcAlertMenuItemStatus.RectifiedUnacknowledged\n    );\n  }\n\n  override render() {\n    const tabs = this.tabs;\n    const selectedIndex = this.selectedTabIndex(tabs);\n    const t = tabs[selectedIndex];\n\n    return html`\n      <obc-tabbed-card\n        .nTabs=${tabs.length}\n        class=\"wrapper\"\n        part=\"wrapper\"\n        .selectedTab=${selectedIndex}\n        hasDefaultSlotOnly\n        @tab-change=${this.onTabChange}\n      >\n        ${tabs.map(\n          (tab, index) =>\n            html`<span slot=\"tab-title-${index}\">${tab.title}</span>`\n        )}\n        <div class=\"container\">\n          ${this.renderList(\n            t,\n            html`<slot></slot>\n              <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n                >${t.emptyTitle}</slot\n              >\n              <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n                >${msg(\n                  \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n                )}</slot\n              >\n              <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n                >${t.emptyIcon}</slot\n              >`\n          )}\n          <div class=\"action\">\n            ${\n              this.offersAckAll\n                ? html`<obc-button\n                    variant=\"raised\"\n                    .disabled=${!this.canAckAll}\n                    fullWidth\n                    class=\"btn\"\n                    data-testid=\"ack-all-visible-button\"\n                    @click=${this.handleAckAllVisibleClick}\n                  >\n                    ${msg('ACK visible')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showSilenceButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    fullWidth\n                    class=\"btn\"\n                    showLeadingIcon\n                    @click=${() =>\n                      this.dispatchEvent(new CustomEvent('silence-click'))}\n                  >\n                    <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n                    ${msg('Silence')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showAlertListButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    class=\"btn\"\n                    fullWidth\n                    showLeadingIcon\n                    showTrailingIcon\n                    @click=${() =>\n                      this.dispatchEvent(\n                        new CustomEvent('go-to-alert-list-click')\n                      )}\n                  >\n                    <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                    ${msg('Alerts')}\n                  </obc-button>`\n                : nothing\n            }\n          </div>\n        </div>\n      </obc-tabbed-card>\n    `;\n  }\n\n  static override styles: CSSResultGroup = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu': ObcAlertMenu;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-menu.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {\n  CSSResultGroup,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  html,\n  nothing,\n  unsafeCSS,\n} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport type {ObcAlertListBase} from '../../building-blocks/alert-list/alert-list-base.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n  visibleElements: {element: HTMLElement; index: number}[];\n  tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/** One tab of an alert menu: its name, its label and its empty state. */\nexport interface AlertMenuTab {\n  /** Names the tab in `ack-all-visible-click` and in the `empty-<tab>-*` slots. */\n  name: string;\n  title: string;\n  emptyTitle: string;\n  emptyIcon: TemplateResult;\n}\n\nconst WAITING_FOR_ACK: string[] = [\n  ObcAlertMenuItemStatus.Unacknowledged,\n  ObcAlertMenuItemStatus.RectifiedUnacknowledged,\n];\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts: \"Unacked\" shows the non-shelved items still waiting for acknowledgment (`unacknowledged` or `rectified-unacknowledged`), \"Active\" every non-shelved item except the `rectified-unacknowledged` ones. A subclass changes the tabs and the list through the `tabs` and `renderList` hooks.\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name                        | Renders When...                  | Purpose                                                        |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default)                        | Always                           | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-<tab>-title                | Selected tab is empty            | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-description          | Selected tab is empty            | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-icon                 | Selected tab is empty            | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, keep all alert items and action buttons keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n *   <obc-alert-menu-item active hasTime>\n *     <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n *     <span slot=\"title\">Engine Overheat</span>\n *     <span slot=\"description\">Main engine temperature exceeds threshold</span>\n *     <span slot=\"time\">09:12:34</span>\n *   </obc-alert-menu-item>\n *   <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @property hasShelved - If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n *   Set to false to hide the \"Shelved\" tab and related filtering.\n * @property canAckAll - If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n *   Should be set to true only when there are unacknowledged alerts in view.\n * @property showSilenceButton - If true, shows the \"Silence\" button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property showAlertListButton - If true, shows the \"Alerts\" navigation button in the action bar.\n *   When hidden, the \"ACK visible\" button expands to fill the freed space.\n * @property softDismiss - Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.\n * @property open - Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n * @availableWhen open softDismiss==true\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires {ObcAckAllVisibleClickEvent} ack-all-visible-click - Fired when the ack all visible button is clicked\n * @fires {CustomEvent} silence-click - Fired when the silence button is clicked\n * @fires {CustomEvent} go-to-alert-list-click - Fired when the go to alert list button is clicked\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: Boolean}) hasShelved: boolean = false;\n\n  @property({type: Boolean}) canAckAll: boolean = false;\n\n  @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n    true;\n\n  @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n    true;\n\n  /** The `name` of the tab the user picked; the second tab shows until then. */\n  @state() private _selectedTabName?: string;\n\n  @query('.alert-list')\n  private alertList!: ObcAlertListBase;\n\n  private handleAckAllVisibleClick() {\n    const panel = this.alertList;\n    const visibleElements = panel.getVisibleElements();\n    this.dispatchEvent(\n      new CustomEvent('ack-all-visible-click', {\n        detail: {\n          visibleElements: visibleElements,\n          tabName: this.selectedTab.name,\n        },\n      })\n    );\n  }\n\n  private onTabChange(e: ObcTabbedCardChangeEvent) {\n    this._selectedTabName = this.tabs[e.detail.tab]?.name;\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n    // A picked tab that goes away, as Shelved does when `hasShelved` turns\n    // off, gives way to the second tab, which stays when the tab returns.\n    if (!this.tabs.some((tab) => tab.name === this._selectedTabName)) {\n      this._selectedTabName = undefined;\n    }\n  }\n\n  /** Whether the menu offers \"ACK visible\" at all; `canAckAll` enables it. */\n  protected get offersAckAll(): boolean {\n    return true;\n  }\n\n  /** The tabs in display order; the menu opens on the second one. */\n  protected get tabs(): AlertMenuTab[] {\n    const tabs = [\n      {\n        name: 'unacked',\n        title: msg('Unacked'),\n        emptyTitle: msg('No unacknowledged alerts'),\n        emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n      },\n      {\n        name: 'all',\n        title: msg('Active'),\n        emptyTitle: msg('No active alerts'),\n        emptyIcon: html`<obi-alerts></obi-alerts>`,\n      },\n    ];\n    if (this.hasShelved) {\n      tabs.push({\n        name: 'shelved',\n        title: msg('Shelved'),\n        emptyTitle: msg('No shelved alerts'),\n        emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n      });\n    }\n    return tabs;\n  }\n\n  /** Where the selected tab sits in `tabs`: the one the user picked, else the second. */\n  private selectedTabIndex(tabs: AlertMenuTab[]): number {\n    const index = tabs.findIndex((tab) => tab.name === this._selectedTabName);\n    return index === -1 ? 1 : index;\n  }\n\n  private get selectedTab(): AlertMenuTab {\n    const tabs = this.tabs;\n    return tabs[this.selectedTabIndex(tabs)];\n  }\n\n  /**\n   * The list that shows the selected tab's items. The CSS hides the items the\n   * tab leaves out; the filter tells the list which ones those are.\n   */\n  protected renderList(\n    tab: AlertMenuTab,\n    content: TemplateResult\n  ): TemplateResult {\n    return html`<obc-alert-list\n      class=\"alert-list ${tab.name}\"\n      .filter=${(item: HTMLElement) => this.tabFilter(tab.name, item)}\n      >${content}</obc-alert-list\n    >`;\n  }\n\n  private tabFilter(name: string, item: HTMLElement): boolean {\n    const status = item.getAttribute('status') ?? '';\n    if (name === 'unacked') {\n      return WAITING_FOR_ACK.includes(status) && !item.hasAttribute('shelved');\n    }\n    if (name === 'shelved') {\n      return item.hasAttribute('shelved');\n    }\n    return (\n      !item.hasAttribute('shelved') &&\n      status !== ObcAlertMenuItemStatus.RectifiedUnacknowledged\n    );\n  }\n\n  override render() {\n    const tabs = this.tabs;\n    const selectedIndex = this.selectedTabIndex(tabs);\n    const t = tabs[selectedIndex];\n\n    return html`\n      <obc-tabbed-card\n        .nTabs=${tabs.length}\n        class=\"wrapper\"\n        part=\"wrapper\"\n        .selectedTab=${selectedIndex}\n        hasDefaultSlotOnly\n        @tab-change=${this.onTabChange}\n      >\n        ${tabs.map(\n          (tab, index) =>\n            html`<span slot=\"tab-title-${index}\">${tab.title}</span>`\n        )}\n        <div class=\"container\">\n          ${this.renderList(\n            t,\n            html`<slot></slot>\n              <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n                >${t.emptyTitle}</slot\n              >\n              <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n                >${msg(\n                  \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n                )}</slot\n              >\n              <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n                >${t.emptyIcon}</slot\n              >`\n          )}\n          <div class=\"action\">\n            ${\n              this.offersAckAll\n                ? html`<obc-button\n                    variant=\"raised\"\n                    .disabled=${!this.canAckAll}\n                    fullWidth\n                    class=\"btn\"\n                    data-testid=\"ack-all-visible-button\"\n                    @click=${this.handleAckAllVisibleClick}\n                  >\n                    ${msg('ACK visible')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showSilenceButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    fullWidth\n                    class=\"btn\"\n                    showLeadingIcon\n                    @click=${() =>\n                      this.dispatchEvent(new CustomEvent('silence-click'))}\n                  >\n                    <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n                    ${msg('Silence')}\n                  </obc-button>`\n                : nothing\n            }\n            ${\n              this.showAlertListButton\n                ? html`<obc-button\n                    variant=\"normal\"\n                    class=\"btn\"\n                    fullWidth\n                    showLeadingIcon\n                    showTrailingIcon\n                    @click=${() =>\n                      this.dispatchEvent(\n                        new CustomEvent('go-to-alert-list-click')\n                      )}\n                  >\n                    <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n                    <obi-chevron-right-google\n                      slot=\"trailing-icon\"\n                    ></obi-chevron-right-google>\n                    ${msg('Alerts')}\n                  </obc-button>`\n                : nothing\n            }\n          </div>\n        </div>\n      </obc-tabbed-card>\n    `;\n  }\n\n  static override styles: CSSResultGroup = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu': ObcAlertMenu;\n  }\n}\n"],"mappings":"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"}

package/dist/components/app-menu/app-menu.d.ts

@@ -44,19 +44,19 @@ import '../../icons/icon-search.js';
  * ```
  * In this example, the menu displays a search bar and a grid of app buttons, each with an icon.
  *
- * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.
- * @property open - Whether the menu is showing.
+ * @property softDismiss - Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.
+ * @property open - Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.
  * @availableWhen open softDismiss==true
  * @slot - Default slot for app buttons or custom menu items
  * @fires {CustomEvent<string>} search - Fired when the search input value changes, with the current value in `detail`.
- * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.
+ * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.
  * @stable
  */
 export declare class ObcAppMenu extends LitElement {
-    /** Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself. */
+    /** Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself. */
     softDismiss: boolean;
     /**
-     * Whether the menu is showing.
+     * Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.
      *
      * Available when `softDismiss==true`.
      */

package/dist/components/app-menu/app-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-menu.js","names":[],"sources":["../../../src/components/app-menu/app-menu.ts"],"sourcesContent":["import {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {LitElement, html, unsafeCSS} from 'lit';\nimport compentStyle from './app-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../app-button/app-button.js';\nimport '../../icons/icon-search.js';\nimport {stopPropagation} from '../../internal/events.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\n/**\n * `<obc-app-menu>` – A vertical application menu component with integrated search and customizable app buttons.\n *\n * Provides a structured container for displaying a grid of application buttons, typically used for quick navigation or launching key features. Includes a built-in search input at the top to filter or locate specific applications within the menu.\n *\n * ### Features\n * - **Integrated Search:** Includes a search field with a leading icon, allowing users to filter or search for menu items.\n * - **Customizable Content:** Uses a default slot to accept any number of `<obc-app-button>` elements or other custom content.\n * - **Grid Layout:** Arranges child buttons in a responsive grid (4 columns by default) for efficient use of space.\n * - **Icon Support:** Each app button can display an icon via its own slot, supporting a wide range of visual representations.\n * - **Event Emission:** Dispatches a `search` event whenever the search input changes, enabling live filtering or external handling.\n *\n * ### Usage Guidelines\n * Use `<obc-app-menu>` to present a collection of application shortcuts, tools, or frequently accessed features in a compact, visually organized menu. Ideal for dashboards, launchers, or side panels where users need to quickly access multiple apps or modules.\n *\n * The search input is intended for filtering the visible buttons or triggering search-related logic externally. Place `<obc-app-button>` elements as children to represent each app or function.\n *\n * **TODO(designer):** Clarify if the menu is intended only for application launchers, or if it can be used for other grouped actions. Also, specify any recommended maximum number of buttons or best practices for grouping.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-app-button>` elements or custom content to populate the menu grid. |\n *\n * ### Events\n * - `search` – Fired whenever the user types in the search input. The event's `detail` contains the current input value.\n *\n * ### Example\n * ```\n * <obc-app-menu>\n *   <obc-app-button label=\"Radar\" checked>\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <obc-app-button label=\"Maps\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <!-- More app buttons... -->\n * </obc-app-menu>\n * ```\n * In this example, the menu displays a search bar and a grid of app buttons, each with an icon.\n *\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @slot - Default slot for app buttons or custom menu items\n * @fires {CustomEvent<string>} search - Fired when the search input value changes, with the current value in `detail`.\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n * @stable\n */\n@customElement('obc-app-menu')\nexport class ObcAppMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  /**\n   * Handles input events from the search field and emits a `search` event with the current value.\n   *\n   * @param e - The input event from the search field.\n   * @fires search\n   */\n  onSearchInput(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('search', {detail: (e.target as HTMLInputElement).value})\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <obc-text-input-field\n          placeholder=\"Search\"\n          @input=${this.onSearchInput}\n          @change=${stopPropagation}\n          @clear=${stopPropagation}\n          hasLeadingIcon\n        >\n          <obi-search slot=\"leading-icon\"></obi-search>\n        </obc-text-input-field>\n        <div class=\"main-apps\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-app-menu': ObcAppMenu;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4DO,IAAM,aAAN,MAAM,mBAAmB,WAAW;;;EACA,KAAA,cAAA;EAEP,KAAA,OAAA;EAES,KAAA,wBAAA,IAAI,kBAAkB,IAAI;;;;;;;;CAQrE,cAAc,GAAU;EACtB,KAAK,cACH,IAAI,YAAY,UAAU,EAAC,QAAS,EAAE,OAA4B,MAAK,CAAC,CAC1E;CACF;CAEA,SAAkB;EAChB,OAAO,IAAI;;;;mBAII,KAAK,cAAc;oBAClB,gBAAgB;mBACjB,gBAAgB;;;;;;;;;;CAUjC;;EAEyB,KAAA,SAAA,UAAU,gBAAY;;AACjD;AAtCG,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,WAAA,WAAA,eAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAJ1B,aAAA,WAAA,CAAA,cAAc,cAAc,CAAA,GAAA,UAAA"}
+{"version":3,"file":"app-menu.js","names":[],"sources":["../../../src/components/app-menu/app-menu.ts"],"sourcesContent":["import {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {LitElement, html, unsafeCSS} from 'lit';\nimport compentStyle from './app-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../app-button/app-button.js';\nimport '../../icons/icon-search.js';\nimport {stopPropagation} from '../../internal/events.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\n/**\n * `<obc-app-menu>` – A vertical application menu component with integrated search and customizable app buttons.\n *\n * Provides a structured container for displaying a grid of application buttons, typically used for quick navigation or launching key features. Includes a built-in search input at the top to filter or locate specific applications within the menu.\n *\n * ### Features\n * - **Integrated Search:** Includes a search field with a leading icon, allowing users to filter or search for menu items.\n * - **Customizable Content:** Uses a default slot to accept any number of `<obc-app-button>` elements or other custom content.\n * - **Grid Layout:** Arranges child buttons in a responsive grid (4 columns by default) for efficient use of space.\n * - **Icon Support:** Each app button can display an icon via its own slot, supporting a wide range of visual representations.\n * - **Event Emission:** Dispatches a `search` event whenever the search input changes, enabling live filtering or external handling.\n *\n * ### Usage Guidelines\n * Use `<obc-app-menu>` to present a collection of application shortcuts, tools, or frequently accessed features in a compact, visually organized menu. Ideal for dashboards, launchers, or side panels where users need to quickly access multiple apps or modules.\n *\n * The search input is intended for filtering the visible buttons or triggering search-related logic externally. Place `<obc-app-button>` elements as children to represent each app or function.\n *\n * **TODO(designer):** Clarify if the menu is intended only for application launchers, or if it can be used for other grouped actions. Also, specify any recommended maximum number of buttons or best practices for grouping.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-app-button>` elements or custom content to populate the menu grid. |\n *\n * ### Events\n * - `search` – Fired whenever the user types in the search input. The event's `detail` contains the current input value.\n *\n * ### Example\n * ```\n * <obc-app-menu>\n *   <obc-app-button label=\"Radar\" checked>\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <obc-app-button label=\"Maps\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   </obc-app-button>\n *   <!-- More app buttons... -->\n * </obc-app-menu>\n * ```\n * In this example, the menu displays a search bar and a grid of app buttons, each with an icon.\n *\n * @property softDismiss - Lets the menu close itself on a click outside it, on `Escape`, or when another menu opens. The page is covered while the menu is open, so the closing click reaches nothing there; only the top bar's strip stays clickable, which is how its buttons switch or close menus in one click. Wire it with three bindings: set `softDismiss`, bind `open` to a flag you keep, and reset that flag on `close`. The button that opens the menu needs no wiring of its own: flip the flag from its click, or from the button event of `obc-top-bar` or `obc-integration-bar`. The user menu's *Soft Dismiss From A Bar Button* story shows that wiring, the brilliance menu's *Soft Dismiss* story the one for a button you hold yourself (`bindPopoverTrigger`), and the vue demo runs its top bar this way. Leave it off to show and hide the menu yourself.\n * @property open - Whether the menu is showing. Bind it to a flag you keep rather than toggling it from the menu's own value: when the menu closes itself, `open` is written back to `false` before the button's click reaches your handler, so `menu.open = !menu.open` gets out of step. Reset the flag on `close`.\n * @availableWhen open softDismiss==true\n * @slot - Default slot for app buttons or custom menu items\n * @fires {CustomEvent<string>} search - Fired when the search input value changes, with the current value in `detail`.\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives; reset the flag you bind to `open` here, or the next click on the button finds it still set and asks a closed menu to close.\n * @stable\n */\n@customElement('obc-app-menu')\nexport class ObcAppMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  /**\n   * Handles input events from the search field and emits a `search` event with the current value.\n   *\n   * @param e - The input event from the search field.\n   * @fires search\n   */\n  onSearchInput(e: Event) {\n    this.dispatchEvent(\n      new CustomEvent('search', {detail: (e.target as HTMLInputElement).value})\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <obc-text-input-field\n          placeholder=\"Search\"\n          @input=${this.onSearchInput}\n          @change=${stopPropagation}\n          @clear=${stopPropagation}\n          hasLeadingIcon\n        >\n          <obi-search slot=\"leading-icon\"></obi-search>\n        </obc-text-input-field>\n        <div class=\"main-apps\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-app-menu': ObcAppMenu;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4DO,IAAM,aAAN,MAAM,mBAAmB,WAAW;;;EACA,KAAA,cAAA;EAEP,KAAA,OAAA;EAES,KAAA,wBAAA,IAAI,kBAAkB,IAAI;;;;;;;;CAQrE,cAAc,GAAU;EACtB,KAAK,cACH,IAAI,YAAY,UAAU,EAAC,QAAS,EAAE,OAA4B,MAAK,CAAC,CAC1E;CACF;CAEA,SAAkB;EAChB,OAAO,IAAI;;;;mBAII,KAAK,cAAc;oBAClB,gBAAgB;mBACjB,gBAAgB;;;;;;;;;;CAUjC;;EAEyB,KAAA,SAAA,UAAU,gBAAY;;AACjD;AAtCG,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,WAAA,WAAA,eAAA,KAAA,CAAA;AAExB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAJ1B,aAAA,WAAA,CAAA,cAAc,cAAc,CAAA,GAAA,UAAA"}