feat(datetime): add calendar picker (#23416)

resolves #19423

BREAKING CHANGE: The `ion-datetime` component has been revamped to use a new calendar style. As a result, some APIs have been removed. See https://github.com/ionic-team/ionic-framework/blob/master/BREAKING.md for more details.

core/src/components/segment/readme.md

@@ -590,6 +590,19 @@ export default defineComponent({
 | `--background` | Background of the segment button |
 
 
+## Dependencies
+
+### Used by
+
+ - [ion-datetime](../datetime)
+
+### Graph
+```mermaid
+graph TD;
+  ion-datetime --> ion-segment
+  style ion-segment fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/segment/segment.tsx

@@ -331,7 +331,17 @@ export class Segment implements ComponentInterface {
     const currentX = detail.currentX;
 
     const previousY = rect.top + (rect.height / 2);
-    const nextEl = document.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
+
+    /**
+     * Segment can be used inside the shadow dom
+     * so doing document.elementFromPoint would never
+     * return a segment button in that instance.
+     * We use getRootNode to which will return the parent
+     * shadow root if used inside a shadow component and
+     * returns document otherwise.
+     */
+    const root = this.el.getRootNode() as Document | ShadowRoot;
+    const nextEl = root.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
 
     const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;
     const increaseIndex = isRTL ? currentX < left : currentX > (left + width);