xv-webcomponents 1.19.2 → 1.20.1-staging.0

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .xv-container {
   width: 100%;
   max-width: 1170px;
@@ -126,8 +127,7 @@
 }
 
 :host {
-  flex: 1;
-  display: inline-block;
+  display: block;
   background-color: transparent;
   transition: 200ms ease background-color;
   user-select: none;
@@ -139,32 +139,65 @@
   letter-spacing: 0.16px;
 }
 
-:host(:hover) {
+.item_inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+}
+
+.item_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 16px;
+  line-height: 0;
+}
+
+.item_label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Enabled + hover */
+:host(:not([disabled]):hover) {
   cursor: pointer;
   background-color: var(--layer-hover-01, #E9E9E9);
 }
 
-:host(:active) {
+:host(:not([disabled]):active) {
   background-color: var(--layer-active-01, #D1D1D1);
 }
 
-:host(:focus) {
-  border: 2px solid var(--focus, #273435);
+/* Focus (keyboard roving highlight is driven by the [active] attribute set by the parent).
+   Per design the focus state is only a 2px border — the background stays at the default. */
+:host(:not([disabled]):focus),
+:host(:not([disabled])[active]) {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--focus, #273435);
 }
 
+/* Danger */
 :host([variant=danger]) {
   background-color: var(--text-error, #D62512);
   color: var(--text-on-color, #FFF);
 }
 
-:host([variant=danger]:hover) {
+:host([variant=danger]:not([disabled]):hover),
+:host([variant=danger]:not([disabled])[active]),
+:host([variant=danger]:not([disabled]):focus) {
   background-color: var(--support-error, #F1290E);
 }
 
-:host([variant=danger]:active) {
+:host([variant=danger]:not([disabled]):active) {
   background-color: var(--text-error, #D62512);
 }
 
+/* Ghost (non-interactive content, e.g. notifications) */
 :host([variant=ghost]),
 :host([variant=ghost]:hover),
 :host([variant=ghost]:active) {
@@ -173,8 +206,15 @@
   color: var(--text-primary);
 }
 
+/* Disabled */
 :host([disabled]) {
   background-color: var(--layer-01, #F7F7F7) !important;
   color: var(--text-disabled) !important;
+  box-shadow: none !important;
   cursor: not-allowed;
+}
+
+/* Optional separator line above the item. */
+:host([divider]) {
+  border-top: 1px solid var(--border-subtle-01, #E0E0E0);
 }

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -5,14 +5,31 @@ export class XvOverflowMenuItem {
         this.disabled = false;
         this.variant = OverflowMenuVariant.DEFAULT;
         this.clickable = true;
+        /** Draws a separator line above the item (e.g. before a "Logout" action). */
+        this.divider = false;
+        this.hasIcon = false;
+        this.hasIconEnd = false;
+    }
+    componentWillLoad() {
+        this.hasIcon = !!this.el.querySelector('[slot="icon-left"]');
+        this.hasIconEnd = !!this.el.querySelector('[slot="icon-right"]');
     }
     handleClick(event) {
         if (this.disabled || !this.clickable)
             return;
+        // Intentionally no preventDefault/stopPropagation: the native click must keep bubbling so a
+        // consumer's routerLink / (click) / href placed directly on this element still fires.
         this.itemClick.emit({ event, value: this.value });
     }
     render() {
-        return (h(Host, { key: 'fe75fb34037e2f5d7e4ceecf42f82ef46a9eee4c', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '11b7ed8a8bdf49ba7e7ea79f548ea7dcc8b264b2' })));
+        // Ghost items carry arbitrary block content (e.g. header notification rows). Keep them as a plain
+        // slot so that layout is untouched.
+        if (this.variant === OverflowMenuVariant.GHOST) {
+            return (h(Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+        }
+        const useAnchor = !!this.href && !this.disabled;
+        const InnerTag = useAnchor ? 'a' : 'div';
+        return (h(Host, { class: "xv-overflow-menu-item", role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, h(InnerTag, { class: "item_inner", href: useAnchor ? this.href : null, target: useAnchor ? this.target : null, tabindex: -1 }, this.hasIcon && (h("span", { class: "item_icon item_icon--left" }, h("slot", { name: "icon-left" }))), h("span", { class: "item_label" }, h("slot", null)), this.hasIconEnd && (h("span", { class: "item_icon item_icon--right" }, h("slot", { name: "icon-right" }))))));
     }
     static get is() { return "xv-overflow-menu-v2-item"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +95,7 @@ export class XvOverflowMenuItem {
                 "mutable": false,
                 "complexType": {
                     "original": "OverflowMenuVariant",
-                    "resolved": "OverflowMenuVariant.DANGER | OverflowMenuVariant.DEFAULT | OverflowMenuVariant.GHOST",
+                    "resolved": "\"\" | \"danger\" | \"ghost\"",
                     "references": {
                         "OverflowMenuVariant": {
                             "location": "import",
@@ -118,9 +135,73 @@ export class XvOverflowMenuItem {
                 "reflect": false,
                 "attribute": "clickable",
                 "defaultValue": "true"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional link: renders the item as an anchor so native navigation (middle-click, new tab) works."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor target, only used together with `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draws a separator line above the item (e.g. before a \"Logout\" action)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasIconEnd": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "itemClick",
@@ -145,6 +226,7 @@ export class XvOverflowMenuItem {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
                 "name": "click",

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css

@@ -156,6 +156,10 @@
   background-color: var(--background-active);
   color: var(--icon-disabled);
 }
+:host .btn:focus-visible {
+  outline: 2px solid var(--focus, #273435);
+  outline-offset: -2px;
+}
 :host .btn:disabled {
   background-color: transparent;
   opacity: 0.5;
@@ -173,9 +177,10 @@
   left: 0;
   max-height: 0;
   overflow: hidden;
+  outline: none;
   border-radius: 3px;
   transition: 200ms ease-in-out max-height, 100ms ease box-shadow;
-  min-width: 128px;
+  min-width: 160px;
   max-width: 50vw;
   width: max-content;
 }
@@ -214,7 +219,7 @@
 
 :host([size=lg]) {
   --overflow-menu-size: 48px;
-  --overflow-menu-item-padding: 16px;
+  --overflow-menu-item-padding: 15px 16px;
 }
 
 :host([size=xl]) {
@@ -232,4 +237,25 @@
 :host([open]) .list {
   max-height: 500px;
   box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Anchor mode: no built-in trigger; the panel floats and is placed by popper (strategy: fixed). */
+:host(.anchored) {
+  display: contents;
+}
+
+:host(.anchored) .list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  max-height: none;
+  overflow: visible;
+}
+
+:host(.anchored) .list:not(.open) {
+  display: none;
+}
+
+:host(.anchored) .list.open {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }