Merge branch 'main' into fix/accordion-state

.changeset/afraid-wolves-admire.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/shared": patch
+---
+
+Add `getScrollParent()` utility method

.changeset/perfect-lemons-teach.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/menu": patch
+---
+
+Add `--sl-menu-(min|max)-inline-size` CSS custom properties

.changeset/poor-trees-attend.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/menu": patch
+---
+
+Add button part for customization

.changeset/smart-lemons-thank.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/shared": patch
+---
+
+When calculating the max size of a popover, do not overwrite any existing max size properties if they are present

.changeset/soft-humans-wonder.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/menu": patch
+---
+
+Fix scrolling when menu overflows

package.json

@@ -80,7 +80,8 @@
  "command": "node scripts/build-packages.js checklist",
  "clean": "if-file-deleted",
  "dependencies": [
- "build:scss"
+ "build:scss",
+ "build:themes"
  ],
  "files": [
  "packages/checklist/**/*.ts",
@@ -241,7 +242,7 @@
  "cascade": false
  },
  {
- "script": "build:checklist",
+ "script": "build:checklist:package",
  "cascade": false
  },
  {

packages/components/menu/custom-elements.json

@@ -88,6 +88,12 @@
  "kind": "class",
  "description": "Custom element that combines a button and a menu and automatically wires them up\ntogether.",
  "name": "MenuButton",
+ "cssParts": [
+ {
+ "description": "The button element.",
+ "name": "button"
+ }
+ ],
  "slots": [
  {
  "description": "The menu items should be slotted in the default slot.",
@@ -288,15 +294,7 @@
  "type": {
  "text": "void"
  }
- },
- "parameters": [
- {
- "name": "event",
- "type": {
- "text": "Event"
- }
- }
- ]
+ }
  },
  {
  "kind": "method",
@@ -540,6 +538,12 @@
  "kind": "class",
  "description": "Menu item component for use inside a menu.",
  "name": "MenuItem",
+ "cssParts": [
+ {
+ "description": "The wrapper around the menu item content.",
+ "name": "wrapper"
+ }
+ ],
  "slots": [
  {
  "description": "Content to display inside the menu item.",
@@ -885,8 +889,24 @@
  "declarations": [
  {
  "kind": "class",
- "description": "",
+ "description": "A menu that can be used as a context menu or as a dropdown menu.",
  "name": "Menu",
+ "cssProperties": [
+ {
+ "description": "The maximum inline size of the menu.",
+ "name": "--sl-menu-max-inline-size"
+ },
+ {
+ "description": "The minimum inline size of the menu.",
+ "name": "--sl-menu-min-inline-size"
+ }
+ ],
+ "slots": [
+ {
+ "description": "The menu's content: menu items or menu item groups.",
+ "name": ""
+ }
+ ],
  "members": [
  {
  "kind": "method",

packages/components/menu/src/menu-button.ts

@@ -6,7 +6,6 @@ import { type PopoverPosition } from '@sl-design-system/shared';
 import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import styles from './menu-button.scss.js';
-import { MenuItem } from './menu-item.js';
 import { Menu } from './menu.js';
 
 declare global {
@@ -19,6 +18,8 @@ declare global {
  * Custom element that combines a button and a menu and automatically wires them up
  * together.
  *
+ * @csspart button - The button element.
+ *
  * @slot default - The menu items should be slotted in the default slot.
  * @slot button - Any content for the button should be slotted here.
  */
@@ -89,6 +90,7 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
  .fill=${this.fill}
  .size=${this.size}
  .variant=${this.variant}
+ part="button"
  >
  <slot name="button"></slot>
  ${this.selects && this.selected ? html`<span class="selected">${this.selected}</span>` : nothing}
@@ -125,10 +127,8 @@ export class MenuButton extends ScopedElementsMixin(LitElement) {
  }
  }
 
- #onMenuClick(event: Event): void {
- if (event.target instanceof MenuItem) {
- this.menu.hidePopover();
- }
+ #onMenuClick(): void {
+ this.menu.hidePopover();
  }
 
  #onSelect(): void {

packages/components/menu/src/menu-item.scss

@@ -62,7 +62,7 @@ slot[name='submenu']::slotted(sl-menu) {
  }
 }
 
-.wrapper {
+[part='wrapper'] {
  align-items: center;
  background: var(--_background);
  border-radius: var(--_border-radius);

packages/components/menu/src/menu-item.ts

@@ -22,6 +22,8 @@ declare global {
 /**
  * Menu item component for use inside a menu.
  *
+ * @csspart wrapper - The wrapper around the menu item content.
+ *
  * @slot default - Content to display inside the menu item.
  * @slot submenu - The menu items that will be displayed when the menu item is shown.
  */
@@ -95,7 +97,7 @@ export class MenuItem extends ScopedElementsMixin(LitElement) {
  override render(): TemplateResult {
  return html`
  <div aria-hidden="true" class="safe-triangle"></div>
- <div class="wrapper">
+ <div part="wrapper">
  ${this.selected ? html`<sl-icon name="check"></sl-icon>` : nothing}
  <slot></slot>
  ${this.shortcut ? html`<kbd>${this.#shortcut.render(this.shortcut)}</kbd>` : nothing}

packages/components/menu/src/menu.scss

@@ -19,10 +19,13 @@
  display: none;
  flex-direction: column;
  margin: 0;
+ max-inline-size: var(--sl-menu-max-inline-size, auto);
+ min-inline-size: var(--sl-menu-min-inline-size, fit-content);
  opacity: 0;
- overflow: visible;
+ overflow: visible auto;
  padding-block: var(--_padding-block);
  padding-inline: 0;
+ scrollbar-width: thin;
 
  @media (prefers-reduced-motion: no-preference) {
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.3, 1);
@@ -40,7 +43,7 @@
  border: var(--_border) !important;
  color: var(--_color) !important;
  margin: 0 !important;
- overflow: visible !important;
+ overflow: visible auto !important;
  padding-block: var(--_padding-block) !important;
  padding-inline: 0 !important;
  position: fixed;

packages/components/menu/src/menu.ts

@@ -19,6 +19,14 @@ declare global {
  }
 }
 
+/**
+ * A menu that can be used as a context menu or as a dropdown menu.
+ *
+ * @cssprop --sl-menu-max-inline-size - The maximum inline size of the menu.
+ * @cssprop --sl-menu-min-inline-size - The minimum inline size of the menu.
+ *
+ * @slot - The menu's content: menu items or menu item groups.
+ */
 export class Menu extends LitElement {
  /** The default offset of the menu to its anchor. */
  static offset = 4;

packages/components/shared/custom-elements.json

@@ -119,6 +119,14 @@
  "package": "./src/decorators/observe.js"
  }
  },
+ {
+ "kind": "js",
+ "name": "*",
+ "declaration": {
+ "name": "*",
+ "package": "./src/dom.js"
+ }
+ },
  {
  "kind": "js",
  "name": "*",
@@ -4516,6 +4524,41 @@
  }
  ]
  },
+ {
+ "kind": "javascript-module",
+ "path": "src/dom.ts",
+ "declarations": [
+ {
+ "kind": "function",
+ "name": "getScrollParent",
+ "return": {
+ "type": {
+ "text": ""
+ }
+ },
+ "parameters": [
+ {
+ "name": "element",
+ "type": {
+ "text": "Element"
+ },
+ "description": "The element to find the scrollable parent of."
+ }
+ ],
+ "description": "Returns the first scrollable parent of the given element."
+ }
+ ],
+ "exports": [
+ {
+ "kind": "js",
+ "name": "getScrollParent",
+ "declaration": {
+ "name": "getScrollParent",
+ "module": "src/dom.ts"
+ }
+ }
+ ]
+ },
  {
  "kind": "javascript-module",
  "path": "src/events.ts",

packages/components/shared/index.ts

@@ -12,6 +12,7 @@ export * from './src/data-source/data-source.js';
 export * from './src/decorators/base.js';
 export * from './src/decorators/event.js';
 export * from './src/decorators/observe.js';
+export * from './src/dom.js';
 export * from './src/directives/anchor.js';
 export * from './src/events.js';
 export * from './src/path.js';

packages/components/shared/src/dom.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns the first scrollable parent of the given element.
+ * @param element The element to find the scrollable parent of.
+ * @returns The first scrollable parent of the given element; if no explicit scroll parent, returns the html element.
+ */
+export const getScrollParent = (element: Element): Element => {
+ if (element.scrollHeight > element.clientHeight) {
+ return element;
+ } else if (element.parentElement) {
+ return getScrollParent(element.parentElement);
+ } else {
+ return element;
+ }
+};

packages/components/shared/src/popover.ts

@@ -54,11 +54,19 @@ export const positionPopover = (
  padding: options.viewportMargin,
  apply: ({ availableWidth, availableHeight }) => {
  // Make sure that the overlay is contained by the visible page.
- const maxHeight = Math.max(MIN_OVERLAY_HEIGHT, Math.floor(availableHeight));
+ const maxBlockSize =
+ Math.max(MIN_OVERLAY_HEIGHT, Math.floor(availableHeight)) - (options.viewportMargin ?? 0),
+ maxInlineSize = options.maxWidth ?? Math.floor(availableWidth);
 
+ const style = getComputedStyle(element),
+ currentMaxBlockSize = parseInt(style.maxBlockSize) ?? 0,
+ currentMaxInlineSize = parseInt(style.maxInlineSize) ?? 0;
+
+ // If the element already has a max inline or block size that is smaller
+ // than the available space, don't override it.
  Object.assign(element.style, {
- maxWidth: `${options.maxWidth ?? Math.floor(availableWidth)}px`,
- maxHeight: `${maxHeight - (options.viewportMargin ?? 0)}px`
+ maxInlineSize: maxInlineSize > currentMaxInlineSize ? '' : `${maxInlineSize}px`,
+ maxBlockSize: maxBlockSize > currentMaxBlockSize ? '' : `${maxBlockSize}px`
  });
  }
  })
@@ -87,8 +95,8 @@ export const positionPopover = (
 
  if (arrow && arrowElement) {
  Object.assign(arrowElement.style, {
- 'inset-inline-start': typeof arrow.x === 'number' ? `${roundByDPR(arrow.x)}px` : '',
- 'inset-block-start': typeof arrow.y === 'number' ? `${roundByDPR(arrow.y)}px` : ''
+ insetInlineStart: typeof arrow.x === 'number' ? `${roundByDPR(arrow.x)}px` : '',
+ insetBlockStart: typeof arrow.y === 'number' ? `${roundByDPR(arrow.y)}px` : ''
  });
  }
  });