fix(types): copy bubbling events type definitions to parent

src/liquid/components/ld-accordion/ld-accordion-panel/ld-accordion-panel.tsx

@@ -35,7 +35,10 @@ export class LdAccordionPanel {
   @State() resizeObserver: ResizeObserver
   @State() innerPanelExpanding = false
 
-  /** Emitted on accordion panel max-height change. */
+  /**
+   * @internal
+   * Emitted on accordion panel max-height change.
+   */
   @Event() ldaccordionmaxheightchange: EventEmitter<number>
 
   /**

src/liquid/components/ld-accordion/ld-accordion-panel/readme.md

@@ -26,13 +26,6 @@ Please refer to the [`ld-accordion` documentation](components/ld-accordion) for
 | `ref`    | `ref`     | reference to component                                   | `any`              | `undefined` |
 
 
-## Events
-
-| Event                        | Description                                   | Type                  |
-| ---------------------------- | --------------------------------------------- | --------------------- |
-| `ldaccordionmaxheightchange` | Emitted on accordion panel max-height change. | `CustomEvent<number>` |
-
-
 ## Shadow Parts
 
 | Part        | Description |

src/liquid/components/ld-accordion/ld-accordion.tsx

@@ -1,4 +1,13 @@
-import { Component, Element, h, Host, Listen, Prop } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+} from '@stencil/core'
 import { getClassNames } from '../../utils/getClassNames'
 import { getScrollParent } from '../../utils/scroll'
 
@@ -35,6 +44,13 @@ export class LdAccordion {
    */
   @Prop() tone?: 'dark'
 
+  // The following event is not used within the ld-accordion component itself.
+  // Its only purpose is to create a type definition on the ld-accordion component,
+  // in order to be able to add an inline listener in TSX, for listening
+  // on the event bubling up from ld-accordion-section components.
+  /** Emitted on expansion and collapse of an accordion section element. */
+  @Event() ldaccordionchange: EventEmitter<boolean>
+
   @Listen('ldaccordionchange', { passive: true })
   handleAccordionExpandChange(ev) {
     if (ev.target.tagName !== 'LD-ACCORDION-SECTION') return

src/liquid/components/ld-accordion/readme.md

@@ -405,14 +405,12 @@ You can listen for several events on the `ld-accordion` component and its subcom
 <!-- React component -->
 
 <LdAccordion
-  {...{
-    onLdaccordionchange: (ev) => {
-      window.alert(
-        (ev.detail ? 'Expanding ' : 'Collapsing ')
-        + ev.target.querySelector('ld-accordion-toggle').textContent
-        + '.'
-      )
-    },
+  onLdaccordionchange={(ev) => {
+    window.alert(
+      (ev.detail ? 'Expanding ' : 'Collapsing ')
+      + ev.target.querySelector('ld-accordion-toggle').textContent
+      + '.'
+    )
   }}
 >
   <LdAccordionSection>
@@ -831,6 +829,13 @@ You can nest an accordion inside another.
 | `tone`       | `tone`        | Use `'dark'` on white backgrounds. Default is a light tone. Takes only effect in conjunction with neutral mode. | `"dark"`           | `undefined` |
 
 
+## Events
+
+| Event               | Description                                                        | Type                   |
+| ------------------- | ------------------------------------------------------------------ | ---------------------- |
+| `ldaccordionchange` | Emitted on expansion and collapse of an accordion section element. | `CustomEvent<boolean>` |
+
+
 ## Dependencies
 
 ### Used by

src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx

@@ -66,6 +66,7 @@ export class LdOptionInternal {
   }
 
   /**
+   * @internal
    * Emitted on either selection or de-selection of the option.
    */
   @Event() ldoptionselect: EventEmitter<boolean>

src/liquid/components/ld-select/ld-select-popper/ld-select-popper.tsx

@@ -48,7 +48,10 @@ export class LdSelectPopper {
   @State() isPinned = false
   @State() shadowHeight = '100%'
 
-  /** Emitted on filter change with the filter input value. */
+  /**
+   * @internal
+   * Emitted on filter change with the filter input value.
+   */
   @Event() ldselectfilterchange: EventEmitter<string>
 
   private handleFilterInput = (ev) => {

src/liquid/components/ld-stepper/ld-stepper.tsx

@@ -1,4 +1,14 @@
-import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Host,
+  h,
+  Prop,
+  State,
+  Watch,
+  Event,
+  EventEmitter,
+} from '@stencil/core'
 import { getClassNames } from 'src/liquid/utils/getClassNames'
 import { SelectedDetail } from './ld-step/ld-step'
 
@@ -29,6 +39,16 @@ export class LdStepper {
   /** Vertical layout */
   @Prop() vertical = false
 
+  // The following event is not used within the ld-stepper component itself.
+  // Its only purpose is to create a type definition on the ld-stepper component,
+  // in order to be able to add an inline listener in TSX, for listening
+  // on the event bubling up from ld-step components.
+  /**
+   * Emitted when the focusable element of a step is
+   * clicked and step is neither current nor disabled.
+   */
+  @Event() ldstepselected: EventEmitter<SelectedDetail>
+
   @State() currentLabel: string
   @State() currentIndex: number
   @State() steps: NodeListOf<HTMLLdStepElement>

src/liquid/components/ld-stepper/readme.md

@@ -761,6 +761,13 @@ The `ld-stepper` component visualizes a process by showing all the process steps
 | `vertical`             | `vertical`               | Vertical layout                                                                                                             | `boolean`          | `false`           |
 
 
+## Events
+
+| Event            | Description                                                                                       | Type                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| `ldstepselected` | Emitted when the focusable element of a step is clicked and step is neither current nor disabled. | `CustomEvent<{ index: number; label: string; }>` |
+
+
 ## Shadow Parts
 
 | Part      | Description                               |

src/liquid/components/ld-table/ld-table.tsx

@@ -1,4 +1,12 @@
-import { Component, Element, h, Host, Listen } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+} from '@stencil/core'
 import { getClassNames } from '../../utils/getClassNames'
 import { closest } from '../../utils/closest'
 
@@ -17,6 +25,28 @@ export class LdTable {
   @Element() el: HTMLLdTableElement
   tableRef: HTMLTableElement
 
+  // The following events is not used within the ld-table component itself.
+  // Their only purpose is to create type definitions on the ld-table component,
+  // in order to be able to add inline listeners in TSX, for listening
+  // on the events bubling up from ld-table-* sub-components.
+
+  /** Emitted from ld-table-header with culumn index and sort order. */
+  @Event() ldTableSort: EventEmitter<{
+    columnIndex: number
+    sortOrder: 'asc' | 'desc'
+  }>
+
+  /** Emitted from ld-table-row with row index and selected state. */
+  @Event() ldTableSelect: EventEmitter<{
+    rowIndex: number
+    selected: boolean
+  }>
+
+  /** Emitted from ld-table-row with selected state. */
+  @Event() ldTableSelectAll: EventEmitter<{
+    selected: boolean
+  }>
+
   @Listen('ldTableSort')
   handleTableSort(
     ev: CustomEvent<{

src/liquid/components/ld-table/readme.md

@@ -697,6 +697,15 @@ The following example shows how to use the [`ld-pagination`](/components/ld-pagi
 | `ref`    | `ref`     | reference to component                                   | `any`              | `undefined` |
 
 
+## Events
+
+| Event              | Description                                                    | Type                                                                |
+| ------------------ | -------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `ldTableSelect`    | Emitted from ld-table-row with row index and selected state.   | `CustomEvent<{ rowIndex: number; selected: boolean; }>`             |
+| `ldTableSelectAll` | Emitted from ld-table-row with selected state.                 | `CustomEvent<{ selected: boolean; }>`                               |
+| `ldTableSort`      | Emitted from ld-table-header with culumn index and sort order. | `CustomEvent<{ columnIndex: number; sortOrder: "desc" \| "asc"; }>` |
+
+
 ## Shadow Parts
 
 | Part                 | Description                                     |

src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx

@@ -28,28 +28,23 @@ export class LdTab implements InnerFocusable {
 
   private btnRef: HTMLButtonElement
 
-  /**
-   * Disables the tab.
-   */
+  /** Disables the tab. */
   @Prop() disabled?: boolean
 
   /** Tab index of the tab. */
   @Prop() ldTabindex: number | undefined
 
-  /**
-   * If present, this boolean attribute indicates that the tab is selected.
-   */
+  /** If present, this boolean attribute indicates that the tab is selected. */
   @Prop({ mutable: true, reflect: true }) selected?: boolean
 
-  /**
-   * Focuses the tab
-   */
+  /** Focuses the tab */
   @Method()
   async focusInner() {
     this.btnRef.focus({ preventScroll: true })
   }
 
   /**
+   * @internal
    * Emitted with the id of the selected tab.
    */
   @Event() ldtabselect: EventEmitter<undefined>

src/liquid/components/ld-tabs/ld-tab/readme.md

@@ -30,13 +30,6 @@ Please refer to the [`ld-tabs` documentation](components/ld-tabs) for usage exam
 | `selected`   | `selected`    | If present, this boolean attribute indicates that the tab is selected. | `boolean`          | `undefined` |
 
 
-## Events
-
-| Event         | Description                              | Type                     |
-| ------------- | ---------------------------------------- | ------------------------ |
-| `ldtabselect` | Emitted with the id of the selected tab. | `CustomEvent<undefined>` |
-
-
 ## Methods
 
 ### `focusInner() => Promise<void>`

src/liquid/components/ld-tabs/ld-tabs.tsx

@@ -23,9 +23,7 @@ let tabsCount = 0
 export class LdTabs {
   @Element() el: HTMLElement
 
-  /**
-   * Emitted with the id of the selected tab.
-   */
+  /** Emitted with the id of the selected tab. */
   @Event() ldtabchange: EventEmitter<string>
 
   private idDescriber = `ld-tabs-${tabsCount++}`