@redvars/peacock 3.8.6 → 3.9.1

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu/menu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { Placement } from '@floating-ui/dom';\nimport styles from './menu.scss';\nimport { FloatingController } from '../../__internal/controllers/floating-controller.js';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype CloseReason =\n  | { kind: 'click-selection' }\n  | { kind: 'keydown'; key: string }\n  | { kind: 'outside-click' }\n  | { kind: 'focusout' }\n  | { kind: 'programmatic' };\n\n/**\n * @label Menu\n * @tag wc-menu\n * @rawTag menu\n * @summary A list of menu items.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu preview>\n *   <wc-menu-item>Item 1</wc-menu-item>\n *   <wc-menu-item selected>Item 2</wc-menu-item>\n * </wc-menu>\n * ```\n */\n@IndividualComponent\nexport class Menu extends LitElement {\n  static styles = [styles];\n\n  static Item = MenuItem;\n\n  /** Whether the menu is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis. */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =\n    'standard';\n\n  /** ID of the anchor element the menu is positioned relative to. */\n  @property({ type: String }) anchor = '';\n\n  /** When true, renders the menu in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** When true, the menu will not close when a click occurs outside it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })\n  stayOpenOnOutsideClick = false;\n\n  /** When true, the menu will not close when focus leaves it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  /** Set to true when this menu is being used as a submenu inside another menu. */\n  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;\n\n  /** Floating UI placement of the menu relative to its anchor. */\n  @property({ type: String }) placement: Placement = 'bottom-start';\n\n  /** Distance in pixels between the menu and its anchor element. */\n  @property({ type: Number }) offset = 6;\n\n  /** Index of the currently focused/active item within the enabled items list. */\n  @state() private activeIndex = -1;\n\n  @query('.menu') private readonly menuListElement!: HTMLElement;\n\n  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */\n  anchorElement: HTMLElement | null = null;\n\n  /** Controller managing floating-UI positioning. */\n  private readonly _floatingController = new FloatingController(this, {\n    trigger: 'manual',\n    closeOnClickOutside: false,\n    strategy: 'fixed',\n    onOpenChange: isOpen => {\n      if (isOpen || !this.open) {\n        return;\n      }\n\n      this.close({ kind: 'outside-click' });\n    },\n  });\n\n  /** Element that had focus before the menu opened; restored on close. */\n  private _lastFocusedElement: HTMLElement | null = null;\n\n  /** Reason that triggered the most recent close, included in the `closed` event detail. */\n  private _closeReason: CloseReason = { kind: 'programmatic' };\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n\n    this.addEventListener('keydown', this._onKeyDown);\n    this.addEventListener('click', this._onClick);\n    this._syncAnchorAria();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    this.removeEventListener('click', this._onClick);\n    this._floatingController.close();\n    super.disconnectedCallback();\n  }\n\n  get items(): MenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: MenuItem[] = [];\n\n    for (const element of elements) {\n      if (element instanceof MenuItem) {\n        items.push(element);\n      } else {\n        const maybeItem = (element as { item?: unknown }).item;\n        if (maybeItem instanceof MenuItem) {\n          items.push(maybeItem);\n        }\n      }\n    }\n\n    return items;\n  }\n\n  show() {\n    if (this.open) {\n      return;\n    }\n\n    this._closeReason = { kind: 'programmatic' };\n    this.open = true;\n  }\n\n  close(reason: CloseReason = { kind: 'programmatic' }) {\n    if (!this.open) {\n      return;\n    }\n\n    this._closeReason = reason;\n    this.open = false;\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstEnabledItem();\n    target?.focus();\n  }\n\n  private _resolveAnchorElement() {\n    if (this.anchorElement) {\n      return this.anchorElement;\n    }\n\n    if (!this.anchor) {\n      return null;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    if ('getElementById' in root) {\n      return root.getElementById(this.anchor);\n    }\n\n    return document.getElementById(this.anchor);\n  }\n\n  private _syncAnchorAria() {\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    if (!this.id) {\n      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;\n    }\n\n    anchorEl.setAttribute('aria-haspopup', 'menu');\n    anchorEl.setAttribute('aria-controls', this.id);\n    anchorEl.setAttribute('aria-expanded', String(this.open));\n  }\n\n  private _enabledItems() {\n    return this.items.filter(item => !item.disabled);\n  }\n\n  private _syncRovingTabIndex() {\n    const ownedItems = this.items;\n    const enabledItems = this._enabledItems();\n    for (const item of ownedItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!enabledItems.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {\n      this.activeIndex = 0;\n    }\n\n    enabledItems[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = enabledItems.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length || this.activeIndex < 0) {\n      return null;\n    }\n\n    return enabledItems[this.activeIndex] ?? null;\n  }\n\n  private _getFirstEnabledItem() {\n    return this._enabledItems()[0] ?? null;\n  }\n\n  private _isEventFromThisMenu(event: Event) {\n    const path = event.composedPath();\n    const sourceMenu = path.find(target => target instanceof Menu);\n\n    return sourceMenu === this;\n  }\n\n  private _ownedItemFromEvent(event: Event) {\n    if (!this._isEventFromThisMenu(event)) {\n      return null;\n    }\n\n    const path = event.composedPath();\n    const ownedItems = this.items;\n\n    for (const target of path) {\n      if (target instanceof MenuItem) {\n        const ownedItem = ownedItems.find(item => item === target);\n        if (ownedItem) {\n          return ownedItem;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private _setActiveItem(item: MenuItem) {\n    const enabledItems = this._enabledItems();\n    const nextIndex = enabledItems.indexOf(item);\n    if (nextIndex < 0) {\n      return;\n    }\n\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  private _dispatchItemActivate(item: MenuItem) {\n    this.dispatchEvent(\n      new CustomEvent('menu-item-activate', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  private _onClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const item = this._ownedItemFromEvent(event);\n    if (!item) {\n      return;\n    }\n\n    this._setActiveItem(item);\n    this._dispatchItemActivate(item);\n    if (item.keepOpen) {\n      return;\n    }\n\n    this.close({ kind: 'click-selection' });\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._isEventFromThisMenu(event)) {\n      return;\n    }\n\n    const eventItem = this._ownedItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case 'End': {\n        event.preventDefault();\n        const last = Math.max(this._enabledItems().length - 1, 0);\n        this._setBoundaryActive(last);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close({ kind: 'keydown', key: 'Escape' });\n        break;\n      case 'Tab':\n        this.close({ kind: 'keydown', key: 'Tab' });\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();\n        if (!activeItem) {\n          return;\n        }\n\n        this._setActiveItem(activeItem);\n        activeItem.click();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\n  };\n\n  private _applyPositioning() {\n    if (!this.open || !this.menuListElement) {\n      return;\n    }\n\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    this._floatingController.setOptions({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: 'fixed',\n      closeOnClickOutside: !this.stayOpenOnOutsideClick,\n    });\n    this._floatingController.setElements(anchorEl, this.menuListElement);\n    this._floatingController.open();\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('anchor') || changedProperties.has('open')) {\n      this._syncAnchorAria();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._lastFocusedElement = document.activeElement as HTMLElement | null;\n        this._syncRovingTabIndex();\n        this.dispatchEvent(\n          new CustomEvent('opened', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        this._applyPositioning();\n      } else {\n        this._floatingController.close();\n\n        const reason = this._closeReason;\n        this.dispatchEvent(\n          new CustomEvent('close-menu', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              reason,\n              itemPath: [],\n            },\n          }),\n        );\n        this.dispatchEvent(\n          new CustomEvent('closed', {\n            bubbles: true,\n            composed: true,\n            detail: { reason },\n          }),\n        );\n\n        const shouldRestoreFocus =\n          reason.kind !== 'keydown' || reason.key !== 'Tab';\n\n        if (!this.isSubmenu && shouldRestoreFocus) {\n          this._lastFocusedElement?.focus();\n        }\n      }\n    }\n\n    if (\n      (changedProperties.has('open') ||\n        changedProperties.has('anchor') ||\n        changedProperties.has('placement') ||\n        changedProperties.has('offset')) &&\n      this.open\n    ) {\n      this._applyPositioning();\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        menu: true,\n        open: !this.preview && this.open,\n        closed: !this.preview && !this.open,\n        preview: this.preview,\n        [`variant-${this.variant}`]: true,\n      })}\n      aria-hidden=${String(!this.open)}\n    >\n      <div class=\"background\"></div>\n\n      <div class=\"menu-content\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu/menu.ts"],"sourcesContent":["import { html, LitElement } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport styles from \"./menu.scss\";\nimport { FloatingController } from \"../../__internal/controllers/floating-controller.js\";\nimport { MenuItem } from \"../menu-item/menu-item.js\";\nimport IndividualComponent from \"@/IndividualComponent.js\";\n\ntype CloseReason =\n  | { kind: \"click-selection\" }\n  | { kind: \"keydown\"; key: string }\n  | { kind: \"outside-click\" }\n  | { kind: \"focusout\" }\n  | { kind: \"programmatic\" };\n\n/**\n * @label Menu\n * @tag wc-menu\n * @rawTag menu\n * @summary A list of menu items.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu preview>\n *   <wc-menu-item>Item 1</wc-menu-item>\n *   <wc-menu-item selected>Item 2</wc-menu-item>\n * </wc-menu>\n * ```\n */\n@IndividualComponent\nexport class Menu extends LitElement {\n  static styles = [styles];\n\n  static Item = MenuItem;\n\n  /** Whether the menu is currently visible. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis. */\n  @property({ type: String, reflect: true })\n  variant: \"standard\" | \"vibrant\" = \"standard\";\n\n  /** ID of the anchor element the menu is positioned relative to. */\n  @property({ type: String })\n  anchor = \"\";\n\n  /** When true, renders the menu in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true })\n  preview = false;\n\n  /** When true, the menu will not close when a click occurs outside it. */\n  @property({ type: Boolean, attribute: \"stay-open-on-outside-click\" })\n  stayOpenOnOutsideClick = false;\n\n  /** When true, the menu will not close when focus leaves it. */\n  @property({ type: Boolean, attribute: \"stay-open-on-focusout\" })\n  stayOpenOnFocusout = false;\n\n  /** Set to true when this menu is being used as a submenu inside another menu. */\n  @property({ type: Boolean, attribute: \"is-submenu\" })\n  isSubmenu = false;\n\n  /** Floating UI placement of the menu relative to its anchor. */\n  @property({ type: String })\n  placement: Placement = \"bottom-start\";\n\n  /** Distance in pixels between the menu and its anchor element. */\n  @property({ type: Number })\n  offset = 6;\n\n  /** Index of the currently focused/active item within the enabled items list. */\n  @state()\n  private activeIndex = -1;\n\n  @query(\".menu\")\n  private readonly menuListElement!: HTMLElement;\n\n  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */\n  anchorElement: HTMLElement | null = null;\n\n  /** Controller managing floating-UI positioning. */\n  private readonly _floatingController = new FloatingController(this, {\n    trigger: \"manual\",\n    closeOnClickOutside: false,\n    strategy: \"fixed\",\n    onOpenChange: (isOpen) => {\n      if (isOpen || !this.open) {\n        return;\n      }\n\n      this.close({ kind: \"outside-click\" });\n    },\n  });\n\n  /** Element that had focus before the menu opened; restored on close. */\n  private _lastFocusedElement: HTMLElement | null = null;\n\n  /** Reason that triggered the most recent close, included in the `closed` event detail. */\n  private _closeReason: CloseReason = { kind: \"programmatic\" };\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menu\");\n\n    this.addEventListener(\"keydown\", this._onKeyDown);\n    this.addEventListener(\"click\", this._onClick);\n    this._syncAnchorAria();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\"keydown\", this._onKeyDown);\n    this.removeEventListener(\"click\", this._onClick);\n    this._floatingController.close();\n    super.disconnectedCallback();\n  }\n\n  get items(): MenuItem[] {\n    const slot = this.shadowRoot?.querySelector(\"slot\");\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: MenuItem[] = [];\n\n    for (const element of elements) {\n      if (element instanceof MenuItem) {\n        items.push(element);\n      } else {\n        const maybeItem = (element as { item?: unknown }).item;\n        if (maybeItem instanceof MenuItem) {\n          items.push(maybeItem);\n        }\n      }\n    }\n\n    return items;\n  }\n\n  show() {\n    if (this.open) {\n      return;\n    }\n\n    this._closeReason = { kind: \"programmatic\" };\n    this.open = true;\n  }\n\n  close(reason: CloseReason = { kind: \"programmatic\" }) {\n    if (!this.open) {\n      return;\n    }\n\n    this._closeReason = reason;\n    this.open = false;\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstEnabledItem();\n    target?.focus();\n  }\n\n  private _resolveAnchorElement() {\n    if (this.anchorElement) {\n      return this.anchorElement;\n    }\n\n    if (!this.anchor) {\n      return null;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    if (\"getElementById\" in root) {\n      return root.getElementById(this.anchor);\n    }\n\n    return document.getElementById(this.anchor);\n  }\n\n  private _syncAnchorAria() {\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    if (!this.id) {\n      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;\n    }\n\n    anchorEl.setAttribute(\"aria-haspopup\", \"menu\");\n    anchorEl.setAttribute(\"aria-controls\", this.id);\n    anchorEl.setAttribute(\"aria-expanded\", String(this.open));\n  }\n\n  private _enabledItems() {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private _syncRovingTabIndex() {\n    const ownedItems = this.items;\n    const enabledItems = this._enabledItems();\n    for (const item of ownedItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!enabledItems.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {\n      this.activeIndex = 0;\n    }\n\n    enabledItems[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = enabledItems.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length || this.activeIndex < 0) {\n      return null;\n    }\n\n    return enabledItems[this.activeIndex] ?? null;\n  }\n\n  private _getFirstEnabledItem() {\n    return this._enabledItems()[0] ?? null;\n  }\n\n  private _isEventFromThisMenu(event: Event) {\n    const path = event.composedPath();\n    const sourceMenu = path.find((target) => target instanceof Menu);\n\n    return sourceMenu === this;\n  }\n\n  private _ownedItemFromEvent(event: Event) {\n    if (!this._isEventFromThisMenu(event)) {\n      return null;\n    }\n\n    const path = event.composedPath();\n    const ownedItems = this.items;\n\n    for (const target of path) {\n      if (target instanceof MenuItem) {\n        const ownedItem = ownedItems.find((item) => item === target);\n        if (ownedItem) {\n          return ownedItem;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private _setActiveItem(item: MenuItem) {\n    const enabledItems = this._enabledItems();\n    const nextIndex = enabledItems.indexOf(item);\n    if (nextIndex < 0) {\n      return;\n    }\n\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  private _dispatchItemActivate(item: MenuItem) {\n    this.dispatchEvent(\n      new CustomEvent(\"menu-item-activate\", {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  private _onClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const item = this._ownedItemFromEvent(event);\n    if (!item) {\n      return;\n    }\n\n    this._setActiveItem(item);\n    this._dispatchItemActivate(item);\n    if (item.keepOpen) {\n      return;\n    }\n\n    this.close({ kind: \"click-selection\" });\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._isEventFromThisMenu(event)) {\n      return;\n    }\n\n    const eventItem = this._ownedItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case \"End\": {\n        event.preventDefault();\n        const last = Math.max(this._enabledItems().length - 1, 0);\n        this._setBoundaryActive(last);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        this.close({ kind: \"keydown\", key: \"Escape\" });\n        break;\n      case \"Tab\":\n        this.close({ kind: \"keydown\", key: \"Tab\" });\n        break;\n      case \"Enter\":\n      case \" \": {\n        event.preventDefault();\n        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();\n        if (!activeItem) {\n          return;\n        }\n\n        this._setActiveItem(activeItem);\n        activeItem.click();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\n    this._syncItemPositions();\n  };\n\n  private _syncItemPositions() {\n    const slot = this.shadowRoot?.querySelector(\"slot\");\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n\n    for (const el of elements) {\n      if (el instanceof HTMLElement) {\n        el.removeAttribute(\"data-position-first\");\n        el.removeAttribute(\"data-position-last\");\n        el.removeAttribute(\"data-position-after-divider\");\n        el.removeAttribute(\"data-position-before-divider\");\n      }\n    }\n\n    const items = elements.filter(\n      (el) => el.tagName.toLowerCase() !== \"wc-divider\"\n    );\n\n    if (items.length === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    if (firstItem instanceof HTMLElement) {\n      firstItem.setAttribute(\"data-position-first\", \"\");\n    }\n\n    const lastItem = items[items.length - 1];\n    if (lastItem instanceof HTMLElement) {\n      lastItem.setAttribute(\"data-position-last\", \"\");\n    }\n\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i];\n      if (el.tagName.toLowerCase() === \"wc-divider\") {\n        let prevItem: Element | null = null;\n        for (let j = i - 1; j >= 0; j--) {\n          if (elements[j].tagName.toLowerCase() !== \"wc-divider\") {\n            prevItem = elements[j];\n            break;\n          }\n        }\n        if (prevItem instanceof HTMLElement) {\n          prevItem.setAttribute(\"data-position-before-divider\", \"\");\n        }\n\n        let nextItem: Element | null = null;\n        for (let j = i + 1; j < elements.length; j++) {\n          if (elements[j].tagName.toLowerCase() !== \"wc-divider\") {\n            nextItem = elements[j];\n            break;\n          }\n        }\n        if (nextItem instanceof HTMLElement) {\n          nextItem.setAttribute(\"data-position-after-divider\", \"\");\n        }\n      }\n    }\n  }\n\n  private _applyPositioning() {\n    if (!this.open || !this.menuListElement) {\n      return;\n    }\n\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    this._floatingController.setOptions({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: \"fixed\",\n      closeOnClickOutside: !this.stayOpenOnOutsideClick,\n    });\n    this._floatingController.setElements(anchorEl, this.menuListElement);\n    this._floatingController.open();\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(\"anchor\") || changedProperties.has(\"open\")) {\n      this._syncAnchorAria();\n    }\n\n    if (changedProperties.has(\"open\")) {\n      if (this.open) {\n        this._lastFocusedElement = document.activeElement as HTMLElement | null;\n        this._syncRovingTabIndex();\n        this._syncItemPositions();\n        this.dispatchEvent(\n          new CustomEvent(\"opened\", {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        this._applyPositioning();\n      } else {\n        this._floatingController.close();\n\n        const reason = this._closeReason;\n        this.dispatchEvent(\n          new CustomEvent(\"close-menu\", {\n            bubbles: true,\n            composed: true,\n            detail: {\n              reason,\n              itemPath: [],\n            },\n          }),\n        );\n        this.dispatchEvent(\n          new CustomEvent(\"closed\", {\n            bubbles: true,\n            composed: true,\n            detail: { reason },\n          }),\n        );\n\n        const shouldRestoreFocus = reason.kind !== \"keydown\" ||\n          reason.key !== \"Tab\";\n\n        if (!this.isSubmenu && shouldRestoreFocus) {\n          this._lastFocusedElement?.focus();\n        }\n      }\n    }\n\n    if (\n      (changedProperties.has(\"open\") ||\n        changedProperties.has(\"anchor\") ||\n        changedProperties.has(\"placement\") ||\n        changedProperties.has(\"offset\")) &&\n      this.open\n    ) {\n      this._applyPositioning();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${classMap({\n          menu: true,\n          open: !this.preview && this.open,\n          closed: !this.preview && !this.open,\n          preview: this.preview,\n          [`variant-${this.variant}`]: true,\n        })}\"\n        aria-hidden=\"${String(!this.open)}\"\n      >\n        <div class=\"background\"></div>\n\n        <div class=\"menu-content\">\n          <slot @slotchange=\"${this._onSlotChange}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/src/flow/flow.d.ts

@@ -0,0 +1,102 @@
+import { LitElement } from "lit";
+export type FlowDirection = "up" | "down" | "left" | "right";
+export type FlowStrokeVariant = "solid" | "dashed" | "animated-dashed";
+export interface FlowPoint {
+    x: number;
+    y: number;
+}
+export interface FlowPathSegment {
+    direction: FlowDirection;
+    length: number;
+}
+export interface FlowNode {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    inputs?: ("top" | "left" | "bottom" | "right")[];
+    outputs?: ("top" | "left" | "bottom" | "right")[];
+    data: {
+        label?: string;
+        element?: HTMLElement;
+        [key: string]: any;
+    } | HTMLElement;
+}
+export interface FlowEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: "top" | "left" | "bottom" | "right";
+    targetHandle?: "top" | "left" | "bottom" | "right";
+    type?: "smoothstep" | "bezier" | "straight";
+    variant?: FlowStrokeVariant;
+    label?: string;
+    color?: string;
+}
+/**
+ * @label Flow
+ * @tag wc-flow
+ * @rawTag flow
+ * @summary An interactive node editor canvas with draggable nodes, custom HTML element rendering, and mouse-based edge connection creation on a dotted grid.
+ *
+ * @example
+ * ```html
+ * <wc-flow id="my-flow"></wc-flow>
+ * <script>
+ *   const flow = document.getElementById('my-flow');
+ *   flow.nodes = [
+ *     { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },
+ *     { id: '2', position: { x: 250, y: 50 }, data: { label: 'Node 2' } }
+ *   ];
+ *   flow.edges = [
+ *     { id: 'e1-2', source: '1', target: '2' }
+ *   ];
+ * </script>
+ * ```
+ *
+ * @cssprop --flow-background - Background color for the canvas wrapper. Defaults to surface-container-low.
+ * @cssprop --flow-dot-color - Color of the background grid dots. Defaults to outline-variant.
+ * @cssprop --flow-line-color - Default stroke color for lines and connectors. Defaults to on-surface.
+ * @cssprop --flow-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.
+ * @cssprop --flow-arrow-color - Stroke color for arrow markers. Defaults to on-surface.
+ */
+export declare class Flow extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    zoom: number;
+    padding: number;
+    private nodeDimensions;
+    private draggingNodeId;
+    private dragStartMouseX;
+    private dragStartMouseY;
+    private dragStartNodeX;
+    private dragStartNodeY;
+    private isDrawingConnection;
+    private draggingSourceId;
+    private draggingSourceHandle;
+    private connectionStartX;
+    private connectionStartY;
+    private currentMouseX;
+    private currentMouseY;
+    protected updated(): void;
+    private onNodeMouseDown;
+    private onNodeMouseMove;
+    private onNodeMouseUp;
+    private getNodeInputs;
+    private getNodeOutputs;
+    private getHandleCoordinates;
+    private onHandleMouseDown;
+    private onConnectionMouseMove;
+    private onConnectionMouseUp;
+    private getRoundedPath;
+    private getSmoothStepPath;
+    private getBezierPath;
+    private getStraightPath;
+    private drawPath;
+    private getBounds;
+    private isCustomNode;
+    private renderNodeContent;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/flow/index.d.ts

@@ -0,0 +1,2 @@
+export { Flow } from './flow.js';
+export type { FlowNode, FlowEdge, FlowStrokeVariant } from './flow.js';

package/dist/src/index.d.ts

@@ -37,6 +37,7 @@ export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { List, ListItem } from './list/index.js';
+export { Timeline, TimelineItem } from './timeline/index.js';
 export { Item } from './item/index.js';
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
@@ -71,8 +72,6 @@ export { AppBar } from './app-bar/index.js';
 export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';
 export { Calendar, CalendarColumnView, CalendarMonthView, } from './calendar/index.js';
 export type { CalendarViewType, EventType } from './calendar/index.js';
-export { Canvas } from './canvas/index.js';
-export type { CanvasShape } from './canvas/index.js';
-export { FlowDesigner, FlowDesignerNode } from './flow-designer/index.js';
-export type { Workflow, WorkflowNode, WorkflowCommand, PositionedNode, ValidationError, HistoryEntry, EditorState, NodeType, WorkflowChangeEvent, SwimlaneConfig, NodeTemplate, } from './flow-designer/index.js';
+export { Flow } from './flow/index.js';
+export type { FlowNode, FlowEdge, FlowStrokeVariant } from './flow/index.js';
 export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider, } from './condition-builder/index.js';

package/dist/src/menu/menu/menu.d.ts

@@ -1,17 +1,17 @@
-import { LitElement } from 'lit';
-import type { Placement } from '@floating-ui/dom';
-import { MenuItem } from '../menu-item/menu-item.js';
+import { LitElement } from "lit";
+import type { Placement } from "@floating-ui/dom";
+import { MenuItem } from "../menu-item/menu-item.js";
 type CloseReason = {
-    kind: 'click-selection';
+    kind: "click-selection";
 } | {
-    kind: 'keydown';
+    kind: "keydown";
     key: string;
 } | {
-    kind: 'outside-click';
+    kind: "outside-click";
 } | {
-    kind: 'focusout';
+    kind: "focusout";
 } | {
-    kind: 'programmatic';
+    kind: "programmatic";
 };
 /**
  * @label Menu
@@ -34,7 +34,7 @@ export declare class Menu extends LitElement {
     /** Whether the menu is currently visible. */
     open: boolean;
     /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
-    variant: 'standard' | 'vibrant';
+    variant: "standard" | "vibrant";
     /** ID of the anchor element the menu is positioned relative to. */
     anchor: string;
     /** When true, renders the menu in a static preview state (always visible, no animation). */
@@ -81,6 +81,7 @@ export declare class Menu extends LitElement {
     private _onClick;
     private _onKeyDown;
     private _onSlotChange;
+    private _syncItemPositions;
     private _applyPositioning;
     protected updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/menu/menu-item/menu-item.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 declare const MenuItem_base: typeof LitElement & import("../../__internal/mixins/MixinConstructor.js").MixinConstructor<import("@/__internal/mixins/NativeHyperlinkMixin.js").NativeHyperlinkInterface> & import("../../__internal/mixins/MixinConstructor.js").MixinConstructor<import("@/__internal/mixins/NativeButtonMixin.js").NativeButtonInterface>;
 /**
  * @label Menu Item
@@ -24,8 +24,6 @@ export declare class MenuItem extends MenuItem_base {
     hasSubmenu: boolean;
     /** Whether the associated submenu is currently open. */
     submenuOpen: boolean;
-    /** Visual variant of the menu item. */
-    variant: 'standard' | 'vibrant';
     readonly itemElement: HTMLElement | null;
     /** MutationObserver that triggers re-render when slotted content changes. */
     private readonly _contentObserver;

package/dist/src/timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { Timeline } from './timeline.js';
+export { TimelineItem } from './timeline-item.js';

package/dist/src/timeline/timeline-item.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * @label Timeline Item
+ * @tag wc-timeline-item
+ * @rawTag timeline-item
+ *
+ * @summary An item for use inside a timeline, with a dot/marker and description.
+ *
+ * @example
+ * ```html
+ * <wc-timeline-item description="Step completed">
+ *   <span>Step title</span>
+ *   <wc-icon slot="dot" name="check"></wc-icon>
+ * </wc-timeline-item>
+ * ```
+ * @tags display
+ */
+export declare class TimelineItem extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    loading: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/timeline/timeline.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import { TimelineItem } from './timeline-item.js';
+/**
+ * @label Timeline
+ * @tag wc-timeline
+ * @rawTag timeline
+ *
+ * @summary A vertical timeline layout for a series of timeline items.
+ *
+ * @example
+ * ```html
+ * <wc-timeline>
+ *   <wc-timeline-item description="Task completed">
+ *     <span>Task title</span>
+ *     <wc-icon slot="dot" name="check"></wc-icon>
+ *   </wc-timeline-item>
+ * </wc-timeline>
+ * ```
+ * @tags display
+ */
+export declare class Timeline extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    static Item: typeof TimelineItem;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sub-menu.js

@@ -29,9 +29,36 @@ var css_248z = i`* {
 
 :host {
   display: contents;
+  --sub-menu-item-backdrop-container-shape-start-start: none;
+  --sub-menu-item-backdrop-container-shape-start-end: none;
+  --sub-menu-item-backdrop-container-shape-end-start: none;
+  --sub-menu-item-backdrop-container-shape-end-end: none;
+  --sub-menu-item-backdrop-elevation-level-block-start: none;
+  --sub-menu-item-backdrop-elevation-level-block-end: none;
 }
 
-slot::slotted(wc-menu) {
+slot[name=item]::slotted(wc-menu-item) {
+  --menu-item-backdrop-container-shape-start-start: var(
+    --sub-menu-item-backdrop-container-shape-start-start
+  );
+  --menu-item-backdrop-container-shape-start-end: var(
+    --sub-menu-item-backdrop-container-shape-start-end
+  );
+  --menu-item-backdrop-container-shape-end-start: var(
+    --sub-menu-item-backdrop-container-shape-end-start
+  );
+  --menu-item-backdrop-container-shape-end-end: var(
+    --sub-menu-item-backdrop-container-shape-end-end
+  );
+  --menu-item-backdrop-elevation-level-block-start: var(
+    --sub-menu-item-backdrop-elevation-level-block-start
+  );
+  --menu-item-backdrop-elevation-level-block-end: var(
+    --sub-menu-item-backdrop-elevation-level-block-end
+  );
+}
+
+slot[name=menu]::slotted(wc-menu) {
   display: contents;
 }`;
 

package/dist/sub-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sub-menu.js","sources":["../../src/menu/sub-menu/sub-menu.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './sub-menu.scss';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport { Menu } from '../menu/menu.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nlet subMenuIdCounter = 0;\n\n/**\n * @label Sub Menu\n * @tag wc-sub-menu\n * @rawTag sub-menu\n * @summary Connects a menu item to a nested menu.\n */\n@IndividualComponent\nexport class SubMenu extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'hover-open-delay' })\n  hoverOpenDelay = 120;\n\n  @property({ type: Number, attribute: 'hover-close-delay' })\n  hoverCloseDelay = 180;\n\n  @property({ type: String, attribute: 'anchor-corner' })\n  anchorCorner = 'start-end';\n\n  @property({ type: String, attribute: 'menu-corner' })\n  menuCorner = 'start-start';\n\n  @queryAssignedElements({ slot: 'item' })\n  private readonly _items!: Element[];\n\n  @queryAssignedElements({ slot: 'menu' })\n  private readonly _menus!: Element[];\n\n  private _openTimeout?: number;\n\n  private _closeTimeout?: number;\n\n  private _resolveAnchorElement(item: MenuItem) {\n    //@ts-ignore\n    return item.itemElement?.itemElement ?? item.itemElement ?? item;\n  }\n\n  private readonly _onChildMenuOpened = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  };\n\n  private readonly _onChildMenuClosed = () => {\n    const { item } = this;\n    if (!item) {\n      return;\n    }\n\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  };\n\n  get item(): MenuItem | null {\n    const [candidate] = this._items ?? [];\n    return candidate instanceof MenuItem ? candidate : null;\n  }\n\n  get menu(): Menu | null {\n    const [candidate] = this._menus ?? [];\n    return candidate instanceof Menu ? candidate : null;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this._onMouseEnter);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  disconnectedCallback() {\n    const { menu } = this;\n    menu?.removeEventListener('opened', this._onChildMenuOpened);\n    menu?.removeEventListener('closed', this._onChildMenuClosed);\n    this.removeEventListener('mouseenter', this._onMouseEnter);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n    window.clearTimeout(this._openTimeout);\n    window.clearTimeout(this._closeTimeout);\n    super.disconnectedCallback();\n  }\n\n  async show() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.isSubmenu = true;\n    menu.show();\n\n    item.hasSubmenu = true;\n    item.submenuOpen = true;\n    item.setAttribute('aria-expanded', 'true');\n  }\n\n  async close() {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    menu.close({ kind: 'programmatic' });\n    item.submenuOpen = false;\n    item.setAttribute('aria-expanded', 'false');\n  }\n\n  render() {\n    return html`\n      <slot\n        name=\"item\"\n        @slotchange=${this._onSlotChange}\n        @click=${this._onItemClick}\n        @keydown=${this._onItemKeyDown}\n      ></slot>\n      <slot\n        name=\"menu\"\n        @slotchange=${this._onSlotChange}\n        @close-menu=${this._onCloseMenu}\n        @keydown=${this._onMenuKeyDown}\n      ></slot>\n    `;\n  }\n\n  private _onSlotChange = () => {\n    const { item, menu } = this;\n    if (!item || !menu) {\n      return;\n    }\n\n    if (!menu.id) {\n      subMenuIdCounter += 1;\n      menu.id = `wc-sub-menu-${subMenuIdCounter}`;\n    }\n\n    item.keepOpen = true;\n    item.hasSubmenu = true;\n    item.submenuOpen = menu.open;\n    item.setAttribute('aria-haspopup', 'menu');\n    item.setAttribute('aria-expanded', String(menu.open));\n    item.setAttribute('aria-controls', menu.id);\n\n    menu.removeEventListener('opened', this._onChildMenuOpened);\n    menu.removeEventListener('closed', this._onChildMenuClosed);\n    menu.addEventListener('opened', this._onChildMenuOpened);\n    menu.addEventListener('closed', this._onChildMenuClosed);\n\n    menu.isSubmenu = true;\n    menu.anchorElement = this._resolveAnchorElement(item);\n    menu.placement =\n      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';\n    menu.offset = 4;\n  };\n\n  private _onItemClick = () => {\n    if (this.menu?.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  private _onItemKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';\n\n    const shouldOpen =\n      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen) {\n      return;\n    }\n\n    event.preventDefault();\n    if (event.key === arrowEnter) {\n      event.stopPropagation();\n    }\n\n    await this.show();\n    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);\n    if (firstItem) {\n      firstItem.tabIndex = 0;\n      firstItem.focus();\n    }\n  };\n\n  private _onMenuKeyDown = async (event: KeyboardEvent) => {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key !== 'Escape' && event.key !== arrowExit) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    await this.close();\n\n    const { item } = this;\n    if (item) {\n      item.tabIndex = 0;\n      item.focus();\n    }\n  };\n\n  private _onCloseMenu = async (\n    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,\n  ) => {\n    const { reason } = event.detail ?? {};\n    const { key } = reason ?? {};\n    if (reason?.kind === 'keydown' && key === 'Escape') {\n      event.stopPropagation();\n      await this.close();\n      this.item?.focus();\n    }\n  };\n\n  private _onMouseEnter = () => {\n    window.clearTimeout(this._closeTimeout);\n    this._openTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.hoverOpenDelay);\n  };\n\n  private _onMouseLeave = (event: MouseEvent) => {\n    const { relatedTarget: related } = event;\n    if (related instanceof Node && this.contains(related)) {\n      return;\n    }\n\n    window.clearTimeout(this._openTimeout);\n    this._closeTimeout = window.setTimeout(() => {\n      this.close();\n    }, this.hoverCloseDelay);\n  };\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}

package/dist/timeline-item.js

@@ -0,0 +1,163 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+
+var css_248z = i`:host {
+  display: block;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+.marker-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--timeline-dot-size, 2rem);
+}
+
+.marker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  flex-shrink: 0;
+}
+
+.marker-dot {
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  min-width: var(--timeline-dot-size, 2rem);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--timeline-dot-bg, var(--color-primary));
+  --icon-color: var(--timeline-dot-color, var(--color-on-primary));
+  position: relative;
+  z-index: 2;
+}
+
+.marker-dot ::slotted(wc-icon) {
+  --icon-size: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+.dot-spinner {
+  --progress-height: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+/* Flexible connector line that stretches to fill remaining height/width */
+.connector {
+  width: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin-inline: auto;
+}
+
+.connector--top {
+  height: var(--timeline-connector-top-height, 0.75rem);
+  flex-shrink: 0;
+}
+
+.connector--bottom {
+  flex: 1;
+  min-height: 1.5rem;
+}
+
+:host(:first-child) .connector--top {
+  visibility: hidden;
+}
+
+:host(:last-child) .connector--bottom {
+  display: none;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.headline {
+  padding-top: var(--timeline-connector-top-height, 0.75rem);
+  min-height: calc(var(--timeline-dot-size, 2rem) + var(--timeline-connector-top-height, 0.75rem));
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.description {
+  color: var(--timeline-description-color, var(--color-on-surface-variant));
+  line-height: 1.4;
+}`;
+
+/**
+ * @label Timeline Item
+ * @tag wc-timeline-item
+ * @rawTag timeline-item
+ *
+ * @summary An item for use inside a timeline, with a dot/marker and description.
+ *
+ * @example
+ * ```html
+ * <wc-timeline-item description="Step completed">
+ *   <span>Step title</span>
+ *   <wc-icon slot="dot" name="check"></wc-icon>
+ * </wc-timeline-item>
+ * ```
+ * @tags display
+ */
+let TimelineItem = class TimelineItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    render() {
+        return b `
+      <div class="timeline-item">
+        <div class="marker-column">
+          <div class="connector connector--top"></div>
+          <div class="marker">
+            <div class="marker-dot">
+              ${this.loading
+            ? b `<wc-circular-progress
+                    class="dot-spinner"
+                    indeterminate
+                    aria-label="Loading"
+                  ></wc-circular-progress>`
+            : b `<slot name="dot"></slot>`}
+            </div>
+          </div>
+          <div class="connector connector--bottom"></div>
+        </div>
+
+        <div class="content">
+          <div class="headline"><slot></slot></div>
+          <div class="description">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+TimelineItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], TimelineItem.prototype, "loading", void 0);
+TimelineItem = __decorate([
+    IndividualComponent
+], TimelineItem);
+
+export { TimelineItem };
+//# sourceMappingURL=timeline-item.js.map

package/dist/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","sources":["../../src/timeline/timeline-item.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './timeline-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Timeline Item\n * @tag wc-timeline-item\n * @rawTag timeline-item\n *\n * @summary An item for use inside a timeline, with a dot/marker and description.\n *\n * @example\n * ```html\n * <wc-timeline-item description=\"Step completed\">\n *   <span>Step title</span>\n *   <wc-icon slot=\"dot\" name=\"check\"></wc-icon>\n * </wc-timeline-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class TimelineItem extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"timeline-item\">\n        <div class=\"marker-column\">\n          <div class=\"connector connector--top\"></div>\n          <div class=\"marker\">\n            <div class=\"marker-dot\">\n              ${this.loading\n                ? html`<wc-circular-progress\n                    class=\"dot-spinner\"\n                    indeterminate\n                    aria-label=\"Loading\"\n                  ></wc-circular-progress>`\n                : html`<slot name=\"dot\"></slot>`}\n            </div>\n          </div>\n          <div class=\"connector connector--bottom\"></div>\n        </div>\n\n        <div class=\"content\">\n          <div class=\"headline\"><slot></slot></div>\n          <div class=\"description\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAGuC,IAAA,CAAA,OAAO,GAAG,KAAK;IAqC7D;IAnCE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;QACvC;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;;;AAMC,cAAA,EAAA,IAAI,CAAC;cACHA,CAAI,CAAA,CAAA;;;;AAIqB,0CAAA;cACzBA,CAAI,CAAA,CAAA,wBAAA,CAA0B;;;;;;;;;;;;;KAa3C;IACH;;AAtCO,YAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAHjD,YAAY,GAAA,UAAA,CAAA;IADxB;AACY,CAAA,EAAA,YAAY,CAwCxB;;;;"}