@vaadin/context-menu 25.0.0-alpha8 → 25.0.0-beta1

package/src/styles/vaadin-context-menu-overlay-core-styles.js

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
-import { menuOverlayStyles } from './vaadin-menu-overlay-core-styles.js';
-
-export const contextMenuOverlayStyles = [overlayStyles, menuOverlayStyles];

package/src/styles/vaadin-menu-overlay-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const menuOverlayStyles: CSSResult;

package/src/styles/vaadin-menu-overlay-core-styles.js

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const menuOverlayStyles = css`
-  :host {
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-
-  :host([right-aligned]),
-  :host([end-aligned]) {
-    align-items: flex-end;
-  }
-
-  :host([bottom-aligned]) {
-    justify-content: flex-end;
-  }
-
-  [part='overlay'] {
-    background-color: #fff;
-  }
-
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 3px solid !important;
-    }
-  }
-`;

package/theme/lumo/vaadin-context-menu-item-styles.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-declare const contextMenuItem: import("lit").CSSResult;
-export { contextMenuItem };

package/theme/lumo/vaadin-context-menu-item-styles.js

@@ -1,45 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuItem = css`
-  /* :hover needed to workaround https://github.com/vaadin/web-components/issues/3133 */
-  :host(:hover) {
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host([role='menuitem'][menu-item-checked]) [part='checkmark']::before {
-    opacity: 1;
-  }
-
-  :host([aria-haspopup='true'])::after {
-    font-family: lumo-icons;
-    font-size: var(--lumo-icon-size-xs);
-    content: var(--lumo-icons-angle-right);
-    color: var(--lumo-tertiary-text-color);
-  }
-
-  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
-    margin-right: calc(var(--lumo-space-m) * -1);
-    padding-left: var(--lumo-space-m);
-  }
-
-  :host([expanded]) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  /* RTL styles */
-  :host([dir='rtl'][aria-haspopup='true'])::after {
-    content: var(--lumo-icons-angle-left);
-    margin-left: calc(var(--lumo-space-m) * -1);
-    padding-right: var(--lumo-space-m);
-  }
-`;
-
-registerStyles('vaadin-context-menu-item', [item, contextMenuItem], { moduleId: 'lumo-context-menu-item' });
-
-export { contextMenuItem };

package/theme/lumo/vaadin-context-menu-list-box-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const contextMenuListBox: import("lit").CSSResult;
-export { contextMenuListBox };

package/theme/lumo/vaadin-context-menu-list-box-styles.js

@@ -1,47 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { listBox } from '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuListBox = css`
-  :host {
-    --_lumo-list-box-item-selected-icon-display: block;
-  }
-
-  /* Normal item */
-  [part='items'] ::slotted([role='menuitem']) {
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-    cursor: default;
-    outline: none;
-    border-radius: var(--lumo-border-radius-m);
-    padding-left: calc(var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-  }
-
-  /* Hovered item */
-  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
-  [part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
-  [part='items'] ::slotted([role='menuitem'][expanded]:not([disabled])) {
-    background-color: var(--lumo-primary-color-10pct);
-  }
-
-  /* RTL styles */
-  :host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-    padding-right: calc(var(--lumo-border-radius-m) / 4);
-  }
-
-  /* Focused item */
-  @media (pointer: coarse) {
-    [part='items'] ::slotted([role='menuitem']:hover:not([expanded]):not([disabled])) {
-      background-color: transparent;
-    }
-  }
-`;
-
-registerStyles('vaadin-context-menu-list-box', [listBox, contextMenuListBox], {
-  moduleId: 'lumo-context-menu-list-box',
-});
-
-export { contextMenuListBox };

package/theme/lumo/vaadin-context-menu-overlay-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-declare const contextMenuOverlay: import("lit").CSSResult;
-export { contextMenuOverlay };

package/theme/lumo/vaadin-context-menu-overlay-styles.js

@@ -1,35 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuOverlay = css`
-  :host([phone]) {
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-    top: 0 !important;
-    right: 0 !important;
-    bottom: var(--vaadin-overlay-viewport-bottom) !important;
-    left: 0 !important;
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-    align-items: stretch;
-    justify-content: flex-end;
-  }
-
-  /* TODO These style overrides should not be needed.
-   We should instead offer a way to have non-selectable items inside the context menu. */
-
-  :host {
-    --_lumo-list-box-item-selected-icon-display: none;
-    --_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
-  }
-
-  [part='overlay'] {
-    outline: none;
-  }
-`;
-
-registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
-  moduleId: 'lumo-context-menu-overlay',
-});
-
-export { contextMenuOverlay };

package/theme/lumo/vaadin-context-menu.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';

package/theme/lumo/vaadin-context-menu.js

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';