voyager-ionic-core 8.4.0 → 8.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/components/header.js +21 -2
  2. package/components/ion-item-sliding.js +3 -1
  3. package/components/ion-menu.js +30 -3
  4. package/components/ion-segment.js +3 -2
  5. package/components/ion-toast.js +2 -2
  6. package/components/overlays.js +27 -12
  7. package/components/radio-group.js +8 -2
  8. package/components/select-modal.js +3 -3
  9. package/dist/cjs/index.cjs.js +1 -1
  10. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  11. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  12. package/dist/cjs/ion-app_8.cjs.entry.js +21 -2
  13. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  14. package/dist/cjs/ion-item-option_3.cjs.entry.js +3 -1
  15. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-menu_3.cjs.entry.js +31 -4
  17. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-radio_2.cjs.entry.js +6 -1
  20. package/dist/cjs/ion-segment_2.cjs.entry.js +3 -2
  21. package/dist/cjs/ion-select-modal.cjs.entry.js +4 -4
  22. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  23. package/dist/cjs/ion-toast.cjs.entry.js +3 -3
  24. package/dist/cjs/ionic.cjs.js +1 -1
  25. package/dist/cjs/loader.cjs.js +1 -1
  26. package/dist/cjs/{overlays-ba0f6986.js → overlays-aa669eb8.js} +26 -11
  27. package/dist/collection/components/header/header.utils.js +21 -2
  28. package/dist/collection/components/item-sliding/item-sliding.js +3 -1
  29. package/dist/collection/components/menu/menu.js +30 -2
  30. package/dist/collection/components/radio-group/radio-group.js +30 -1
  31. package/dist/collection/components/segment/segment.js +3 -2
  32. package/dist/collection/components/select-modal/select-modal.ios.css +186 -0
  33. package/dist/collection/components/select-modal/select-modal.js +2 -2
  34. package/dist/collection/components/toast/toast.ios.css +1 -1
  35. package/dist/collection/components/toast/toast.md.css +1 -1
  36. package/dist/collection/utils/focus-trap.js +8 -2
  37. package/dist/collection/utils/overlays.js +19 -9
  38. package/dist/docs.json +1 -1
  39. package/dist/esm/index.js +1 -1
  40. package/dist/esm/ion-action-sheet.entry.js +1 -1
  41. package/dist/esm/ion-alert.entry.js +1 -1
  42. package/dist/esm/ion-app_8.entry.js +21 -2
  43. package/dist/esm/ion-datetime_3.entry.js +1 -1
  44. package/dist/esm/ion-item-option_3.entry.js +3 -1
  45. package/dist/esm/ion-loading.entry.js +1 -1
  46. package/dist/esm/ion-menu_3.entry.js +31 -4
  47. package/dist/esm/ion-modal.entry.js +1 -1
  48. package/dist/esm/ion-popover.entry.js +1 -1
  49. package/dist/esm/ion-radio_2.entry.js +6 -1
  50. package/dist/esm/ion-segment_2.entry.js +3 -2
  51. package/dist/esm/ion-select-modal.entry.js +4 -4
  52. package/dist/esm/ion-select_3.entry.js +1 -1
  53. package/dist/esm/ion-toast.entry.js +3 -3
  54. package/dist/esm/ionic.js +1 -1
  55. package/dist/esm/loader.js +1 -1
  56. package/dist/esm/{overlays-ae10d43d.js → overlays-e7b9d6d9.js} +27 -12
  57. package/dist/esm-es5/index.js +1 -1
  58. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  59. package/dist/esm-es5/ion-alert.entry.js +1 -1
  60. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  61. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  62. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  63. package/dist/esm-es5/ion-loading.entry.js +1 -1
  64. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  65. package/dist/esm-es5/ion-modal.entry.js +1 -1
  66. package/dist/esm-es5/ion-popover.entry.js +1 -1
  67. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  68. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  69. package/dist/esm-es5/ion-select-modal.entry.js +1 -1
  70. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  71. package/dist/esm-es5/ion-toast.entry.js +1 -1
  72. package/dist/esm-es5/ionic.js +1 -1
  73. package/dist/esm-es5/loader.js +1 -1
  74. package/dist/esm-es5/overlays-e7b9d6d9.js +4 -0
  75. package/dist/ionic/index.esm.js +1 -1
  76. package/dist/ionic/ionic.esm.js +1 -1
  77. package/dist/ionic/{p-9ee1e8a6.entry.js → p-04909654.entry.js} +1 -1
  78. package/dist/ionic/p-0aa833fb.system.js +4 -0
  79. package/dist/ionic/{p-5393e8bb.system.entry.js → p-1046866e.system.entry.js} +1 -1
  80. package/dist/ionic/p-12a722b8.system.entry.js +4 -0
  81. package/dist/ionic/{p-4b000207.entry.js → p-12c45a7c.entry.js} +1 -1
  82. package/dist/ionic/{p-5b5c1505.system.entry.js → p-14e159ea.system.entry.js} +1 -1
  83. package/dist/ionic/{p-a49378bb.system.entry.js → p-17a9ca63.system.entry.js} +1 -1
  84. package/dist/ionic/{p-0161caf9.system.entry.js → p-1fe02220.system.entry.js} +1 -1
  85. package/dist/ionic/{p-f10b70a1.entry.js → p-2b9b78c7.entry.js} +1 -1
  86. package/dist/ionic/{p-5bd39e5e.system.entry.js → p-2bd0ae94.system.entry.js} +2 -2
  87. package/dist/ionic/p-322c5fb4.system.js +1 -1
  88. package/dist/ionic/p-32d44024.system.entry.js +4 -0
  89. package/dist/ionic/{p-4561cd09.system.entry.js → p-404aede0.system.entry.js} +1 -1
  90. package/dist/ionic/p-508d024a.entry.js +4 -0
  91. package/dist/ionic/p-61e3f887.entry.js +4 -0
  92. package/dist/ionic/{p-3b419d79.system.entry.js → p-6416c34c.system.entry.js} +1 -1
  93. package/dist/ionic/{p-857ca696.system.entry.js → p-6499df44.system.entry.js} +1 -1
  94. package/dist/ionic/{p-db0c8e7d.entry.js → p-6b280620.entry.js} +1 -1
  95. package/dist/ionic/{p-1c1b8e1f.entry.js → p-6d6cedc5.entry.js} +1 -1
  96. package/dist/ionic/{p-1ebd1e27.system.entry.js → p-7ddc46c3.system.entry.js} +1 -1
  97. package/dist/ionic/{p-a34b4d94.entry.js → p-942b5e13.entry.js} +1 -1
  98. package/dist/ionic/{p-a1b9a163.entry.js → p-982315a6.entry.js} +1 -1
  99. package/dist/ionic/{p-a1051806.entry.js → p-9e33104d.entry.js} +1 -1
  100. package/dist/ionic/{p-9910f786.entry.js → p-a43467d8.entry.js} +1 -1
  101. package/dist/ionic/{p-1b7605a7.system.entry.js → p-b2272f51.system.entry.js} +1 -1
  102. package/dist/ionic/{p-4a274c89.entry.js → p-b79ba17c.entry.js} +1 -1
  103. package/dist/ionic/{p-8f05ba3b.system.js → p-c449820c.system.js} +1 -1
  104. package/dist/ionic/p-c4b53b16.system.entry.js +4 -0
  105. package/dist/ionic/p-cdc83025.entry.js +4 -0
  106. package/dist/ionic/{p-1e41f2aa.system.entry.js → p-e4f69534.system.entry.js} +1 -1
  107. package/dist/ionic/p-e6635685.js +4 -0
  108. package/dist/ionic/p-fbf284c7.entry.js +4 -0
  109. package/dist/types/components/radio-group/radio-group.d.ts +2 -0
  110. package/dist/types/components.d.ts +1 -0
  111. package/dist/types/utils/focus-trap.d.ts +1 -1
  112. package/hydrate/index.js +95 -25
  113. package/hydrate/index.mjs +95 -25
  114. package/package.json +4 -4
  115. package/dist/esm-es5/overlays-ae10d43d.js +0 -4
  116. package/dist/ionic/p-0437ace4.system.entry.js +0 -4
  117. package/dist/ionic/p-04fc24ee.system.js +0 -4
  118. package/dist/ionic/p-09cf2394.entry.js +0 -4
  119. package/dist/ionic/p-5c831f49.js +0 -4
  120. package/dist/ionic/p-5f79d8c5.entry.js +0 -4
  121. package/dist/ionic/p-6734db42.system.entry.js +0 -4
  122. package/dist/ionic/p-adbc4bdf.entry.js +0 -4
  123. package/dist/ionic/p-c2b74d92.system.entry.js +0 -4
  124. package/dist/ionic/p-e2252ad6.entry.js +0 -4
@@ -272,6 +272,8 @@ export class ItemSliding {
272
272
  optsWidth = -this.optsWidthLeftSide;
273
273
  openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
274
274
  }
275
+ if (openAmount === 0)
276
+ return;
275
277
  this.setOpenAmount(openAmount, false);
276
278
  }
277
279
  onEnd(gesture) {
@@ -386,7 +388,7 @@ export class ItemSliding {
386
388
  }
387
389
  render() {
388
390
  const mode = getIonMode(this);
389
- return (h(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
391
+ return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
390
392
  [mode]: true,
391
393
  'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
392
394
  'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -9,6 +9,7 @@ import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
9
9
  import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
10
10
  import { menuController } from "../../utils/menu-controller/index";
11
11
  import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
12
+ import { isPlatform } from "../../utils/platform";
12
13
  import { hostContext } from "../../utils/theme";
13
14
  import { config } from "../../global/config";
14
15
  import { getIonMode } from "../../global/ionic-global";
@@ -453,6 +454,22 @@ export class Menu {
453
454
  }
454
455
  beforeAnimation(shouldOpen, role) {
455
456
  assert(!this.isAnimating, '_before() should not be called while animating');
457
+ /**
458
+ * When the menu is presented on an Android device, TalkBack's focus rings
459
+ * may appear in the wrong position due to the transition (specifically
460
+ * `transform` styles). This occurs because the focus rings are initially
461
+ * displayed at the starting position of the elements before the transition
462
+ * begins. This workaround ensures the focus rings do not appear in the
463
+ * incorrect location.
464
+ *
465
+ * If this solution is applied to iOS devices, then it leads to a bug where
466
+ * the overlays cannot be accessed by screen readers. This is due to
467
+ * VoiceOver not being able to update the accessibility tree when the
468
+ * `aria-hidden` is removed.
469
+ */
470
+ if (isPlatform('android')) {
471
+ this.el.setAttribute('aria-hidden', 'true');
472
+ }
456
473
  // this places the menu into the correct location before it animates in
457
474
  // this css class doesn't actually kick off any animations
458
475
  this.el.classList.add(SHOW_MENU);
@@ -505,6 +522,16 @@ export class Menu {
505
522
  this.blocker.unblock();
506
523
  }
507
524
  if (isOpen) {
525
+ /**
526
+ * When the menu is presented on an Android device, TalkBack's focus rings
527
+ * may appear in the wrong position due to the transition (specifically
528
+ * `transform` styles). The menu is hidden from screen readers during the
529
+ * transition to prevent this. Once the transition is complete, the menu
530
+ * is shown again.
531
+ */
532
+ if (isPlatform('android')) {
533
+ this.el.removeAttribute('aria-hidden');
534
+ }
508
535
  // emit open event
509
536
  this.ionDidOpen.emit();
510
537
  /**
@@ -520,6 +547,7 @@ export class Menu {
520
547
  document.addEventListener('focus', this.handleFocus, true);
521
548
  }
522
549
  else {
550
+ this.el.removeAttribute('aria-hidden');
523
551
  // remove css classes and unhide content from screen readers
524
552
  this.el.classList.remove(SHOW_MENU);
525
553
  /**
@@ -586,14 +614,14 @@ export class Menu {
586
614
  * the ionBackButton listener in the menu controller
587
615
  * will handle closing the menu when Escape is pressed.
588
616
  */
589
- return (h(Host, { key: '5aaea91873d0885b97304372223b2a6ed16ca28b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
617
+ return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
590
618
  [mode]: true,
591
619
  [`menu-type-${type}`]: true,
592
620
  'menu-enabled': !disabled,
593
621
  [`menu-side-${side}`]: true,
594
622
  'menu-pane-visible': isPaneVisible,
595
623
  'split-pane-side': hostContext('ion-split-pane', el),
596
- } }, h("div", { key: '3ba822411ad11eff52c518fecf1b2a5b47e0b678', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'd28a78e98493b21d43ea8b19e96b21547adf1916' })), h("ion-backdrop", { key: '0468c15d111737f5cb646918dcfacedadf907a8f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
624
+ } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
597
625
  }
598
626
  static get is() { return "ion-menu"; }
599
627
  static get encapsulation() { return "shadow"; }
@@ -151,11 +151,16 @@ export class RadioGroup {
151
151
  }
152
152
  }
153
153
  }
154
+ /** @internal */
155
+ async setFocus() {
156
+ const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
157
+ radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
158
+ }
154
159
  render() {
155
160
  const { label, labelId, el, name, value } = this;
156
161
  const mode = getIonMode(this);
157
162
  renderHiddenInput(true, el, name, value, false);
158
- return h(Host, { key: '99f543b9caa8e2d30a80e7ea7ecf6b6fdacc76eb', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
163
+ return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
159
164
  }
160
165
  static get is() { return "ion-radio-group"; }
161
166
  static get properties() {
@@ -286,6 +291,30 @@ export class RadioGroup {
286
291
  }
287
292
  }];
288
293
  }
294
+ static get methods() {
295
+ return {
296
+ "setFocus": {
297
+ "complexType": {
298
+ "signature": "() => Promise<void>",
299
+ "parameters": [],
300
+ "references": {
301
+ "Promise": {
302
+ "location": "global",
303
+ "id": "global::Promise"
304
+ }
305
+ },
306
+ "return": "Promise<void>"
307
+ },
308
+ "docs": {
309
+ "text": "",
310
+ "tags": [{
311
+ "name": "internal",
312
+ "text": undefined
313
+ }]
314
+ }
315
+ }
316
+ };
317
+ }
289
318
  static get elementRef() { return "el"; }
290
319
  static get watchers() {
291
320
  return [{
@@ -149,6 +149,7 @@ export class Segment {
149
149
  this.emitStyle();
150
150
  }
151
151
  async componentDidLoad() {
152
+ this.segmentViewEl = this.getSegmentView();
152
153
  this.setCheckedClasses();
153
154
  /**
154
155
  * We need to wait for the buttons to all be rendered
@@ -529,14 +530,14 @@ export class Segment {
529
530
  }
530
531
  render() {
531
532
  const mode = getIonMode(this);
532
- return (h(Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
533
+ return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
533
534
  [mode]: true,
534
535
  'in-toolbar': hostContext('ion-toolbar', this.el),
535
536
  'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
536
537
  'segment-activated': this.activated,
537
538
  'segment-disabled': this.disabled,
538
539
  'segment-scrollable': this.scrollable,
539
- }) }, h("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
540
+ }) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
540
541
  }
541
542
  static get is() { return "ion-segment"; }
542
543
  static get encapsulation() { return "shadow"; }
@@ -1,3 +1,189 @@
1
1
  :host {
2
2
  height: 100%;
3
+ }
4
+
5
+ /**
6
+ * Convert a font size to a dynamic font size.
7
+ * Fonts that participate in Dynamic Type should use
8
+ * dynamic font sizes.
9
+ * @param size - The initial font size including the unit (i.e. px or pt)
10
+ * @param unit (optional) - The unit to convert to. Use this if you want to
11
+ * convert to a unit other than $baselineUnit.
12
+ */
13
+ /**
14
+ * Convert a font size to a dynamic font size but impose
15
+ * a maximum font size.
16
+ * @param size - The initial font size including the unit (i.e. px or pt)
17
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
18
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
19
+ * convert to a unit other than $baselineUnit.
20
+ */
21
+ /**
22
+ * Convert a font size to a dynamic font size but impose
23
+ * a minimum font size.
24
+ * @param size - The initial font size including the unit (i.e. px or pt)
25
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
26
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
27
+ * convert to a unit other than $baselineUnit.
28
+ */
29
+ /**
30
+ * Convert a font size to a dynamic font size but impose
31
+ * maximum and minimum font sizes.
32
+ * @param size - The initial font size including the unit (i.e. px or pt)
33
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
34
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
35
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
36
+ * convert to a unit other than $baselineUnit.
37
+ */
38
+ /**
39
+ * A heuristic that applies CSS to tablet
40
+ * viewports.
41
+ *
42
+ * Usage:
43
+ * @include tablet-viewport() {
44
+ * :host {
45
+ * background-color: green;
46
+ * }
47
+ * }
48
+ */
49
+ /**
50
+ * A heuristic that applies CSS to mobile
51
+ * viewports (i.e. phones, not tablets).
52
+ *
53
+ * Usage:
54
+ * @include mobile-viewport() {
55
+ * :host {
56
+ * background-color: blue;
57
+ * }
58
+ * }
59
+ */
60
+ /**
61
+ * Convert a font size to a dynamic font size.
62
+ * Fonts that participate in Dynamic Type should use
63
+ * dynamic font sizes.
64
+ * @param size - The initial font size including the unit (i.e. px or pt)
65
+ * @param unit (optional) - The unit to convert to. Use this if you want to
66
+ * convert to a unit other than $baselineUnit.
67
+ */
68
+ /**
69
+ * Convert a font size to a dynamic font size but impose
70
+ * a maximum font size.
71
+ * @param size - The initial font size including the unit (i.e. px or pt)
72
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
73
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
74
+ * convert to a unit other than $baselineUnit.
75
+ */
76
+ /**
77
+ * Convert a font size to a dynamic font size but impose
78
+ * a minimum font size.
79
+ * @param size - The initial font size including the unit (i.e. px or pt)
80
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
81
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
82
+ * convert to a unit other than $baselineUnit.
83
+ */
84
+ /**
85
+ * Convert a font size to a dynamic font size but impose
86
+ * maximum and minimum font sizes.
87
+ * @param size - The initial font size including the unit (i.e. px or pt)
88
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
89
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
90
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
91
+ * convert to a unit other than $baselineUnit.
92
+ */
93
+ /**
94
+ * A heuristic that applies CSS to tablet
95
+ * viewports.
96
+ *
97
+ * Usage:
98
+ * @include tablet-viewport() {
99
+ * :host {
100
+ * background-color: green;
101
+ * }
102
+ * }
103
+ */
104
+ /**
105
+ * A heuristic that applies CSS to mobile
106
+ * viewports (i.e. phones, not tablets).
107
+ *
108
+ * Usage:
109
+ * @include mobile-viewport() {
110
+ * :host {
111
+ * background-color: blue;
112
+ * }
113
+ * }
114
+ */
115
+ /**
116
+ * Convert a font size to a dynamic font size.
117
+ * Fonts that participate in Dynamic Type should use
118
+ * dynamic font sizes.
119
+ * @param size - The initial font size including the unit (i.e. px or pt)
120
+ * @param unit (optional) - The unit to convert to. Use this if you want to
121
+ * convert to a unit other than $baselineUnit.
122
+ */
123
+ /**
124
+ * Convert a font size to a dynamic font size but impose
125
+ * a maximum font size.
126
+ * @param size - The initial font size including the unit (i.e. px or pt)
127
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
128
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
129
+ * convert to a unit other than $baselineUnit.
130
+ */
131
+ /**
132
+ * Convert a font size to a dynamic font size but impose
133
+ * a minimum font size.
134
+ * @param size - The initial font size including the unit (i.e. px or pt)
135
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
136
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
137
+ * convert to a unit other than $baselineUnit.
138
+ */
139
+ /**
140
+ * Convert a font size to a dynamic font size but impose
141
+ * maximum and minimum font sizes.
142
+ * @param size - The initial font size including the unit (i.e. px or pt)
143
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
144
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
145
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
146
+ * convert to a unit other than $baselineUnit.
147
+ */
148
+ /**
149
+ * A heuristic that applies CSS to tablet
150
+ * viewports.
151
+ *
152
+ * Usage:
153
+ * @include tablet-viewport() {
154
+ * :host {
155
+ * background-color: green;
156
+ * }
157
+ * }
158
+ */
159
+ /**
160
+ * A heuristic that applies CSS to mobile
161
+ * viewports (i.e. phones, not tablets).
162
+ *
163
+ * Usage:
164
+ * @include mobile-viewport() {
165
+ * :host {
166
+ * background-color: blue;
167
+ * }
168
+ * }
169
+ */
170
+ ion-item {
171
+ --inner-padding-end: 0;
172
+ }
173
+
174
+ /**
175
+ * The bottom border of the item should only be displayed
176
+ * under the text and not the radio icon.
177
+ */
178
+ ion-radio::after {
179
+ bottom: 0;
180
+ position: absolute;
181
+ width: calc(100% - 0.9375rem - 16px); /* Adjust width based on the shift */
182
+ border-width: 0px 0px 0.55px 0px;
183
+ border-style: solid;
184
+ border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
185
+ content: "";
186
+ }
187
+ ion-radio::after {
188
+ inset-inline-start: calc(0.9375rem + 16px);
3
189
  }
@@ -51,7 +51,7 @@ export class SelectModal {
51
51
  }
52
52
  renderRadioOptions() {
53
53
  const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
54
- return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
54
+ return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
55
55
  // TODO FW-4784
56
56
  'item-radio-checked': option.value === checked
57
57
  }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
@@ -77,7 +77,7 @@ export class SelectModal {
77
77
  } }, option.text))));
78
78
  }
79
79
  render() {
80
- return (h(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode(this) }, h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
80
+ return (h(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode(this) }, h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
81
81
  }
82
82
  static get is() { return "ion-select-modal"; }
83
83
  static get encapsulation() { return "scoped"; }
@@ -136,6 +136,7 @@
136
136
  border-color: var(--border-color);
137
137
  background: var(--background);
138
138
  box-shadow: var(--box-shadow);
139
+ pointer-events: auto;
139
140
  }
140
141
  .toast-wrapper {
141
142
  inset-inline-start: var(--start);
@@ -155,7 +156,6 @@
155
156
  .toast-container {
156
157
  display: flex;
157
158
  align-items: center;
158
- pointer-events: auto;
159
159
  height: inherit;
160
160
  min-height: inherit;
161
161
  max-height: inherit;
@@ -136,6 +136,7 @@
136
136
  border-color: var(--border-color);
137
137
  background: var(--background);
138
138
  box-shadow: var(--box-shadow);
139
+ pointer-events: auto;
139
140
  }
140
141
  .toast-wrapper {
141
142
  inset-inline-start: var(--start);
@@ -155,7 +156,6 @@
155
156
  .toast-container {
156
157
  display: flex;
157
158
  align-items: center;
158
- pointer-events: auto;
159
159
  height: inherit;
160
160
  min-height: inherit;
161
161
  max-height: inherit;
@@ -14,7 +14,7 @@ import { focusVisibleElement } from "./helpers";
14
14
  * Note: We need this distinction because `disabled="false"` is
15
15
  * valid usage for the disabled property on ion-button.
16
16
  */
17
- export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
17
+ export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
18
18
  /**
19
19
  * Focuses the first descendant in a context
20
20
  * that can receive focus. If none exists,
@@ -69,7 +69,13 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
69
69
  elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
70
70
  }
71
71
  if (elementToFocus) {
72
- focusVisibleElement(elementToFocus);
72
+ const radioGroup = elementToFocus.closest('ion-radio-group');
73
+ if (radioGroup) {
74
+ radioGroup.setFocus();
75
+ }
76
+ else {
77
+ focusVisibleElement(elementToFocus);
78
+ }
73
79
  }
74
80
  else {
75
81
  // Focus fallback element instead of letting focus escape
@@ -11,6 +11,7 @@ import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
11
11
  import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
12
12
  import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
13
13
  import { printIonWarning } from "./logging";
14
+ import { isPlatform } from "./platform";
14
15
  let lastOverlayIndex = 0;
15
16
  let lastId = 0;
16
17
  export const activeAnimations = new WeakMap();
@@ -810,21 +811,30 @@ export const createTriggerController = () => {
810
811
  * like TalkBack do not announce or interact with the content until the
811
812
  * animation is complete, avoiding confusion for users.
812
813
  *
813
- * If the overlay is being presented, it prevents focus rings from appearing
814
- * in incorrect positions due to the transition (specifically `transform`
815
- * styles), ensuring that when aria-hidden is removed, the focus rings are
816
- * correctly displayed in the final location of the elements.
814
+ * When the overlay is presented on an Android device, TalkBack's focus rings
815
+ * may appear in the wrong position due to the transition (specifically
816
+ * `transform` styles). This occurs because the focus rings are initially
817
+ * displayed at the starting position of the elements before the transition
818
+ * begins. This workaround ensures the focus rings do not appear in the
819
+ * incorrect location.
820
+ *
821
+ * If this solution is applied to iOS devices, then it leads to a bug where
822
+ * the overlays cannot be accessed by screen readers. This is due to
823
+ * VoiceOver not being able to update the accessibility tree when the
824
+ * `aria-hidden` is removed.
817
825
  *
818
826
  * @param overlay - The overlay that is being animated.
819
827
  */
820
828
  const hideAnimatingOverlayFromScreenReaders = (overlay) => {
821
829
  if (doc === undefined)
822
830
  return;
823
- /**
824
- * Once the animation is complete, this attribute will be removed.
825
- * This is done at the end of the `present` method.
826
- */
827
- overlay.setAttribute('aria-hidden', 'true');
831
+ if (isPlatform('android')) {
832
+ /**
833
+ * Once the animation is complete, this attribute will be removed.
834
+ * This is done at the end of the `present` method.
835
+ */
836
+ overlay.setAttribute('aria-hidden', 'true');
837
+ }
828
838
  };
829
839
  /**
830
840
  * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-11-05T07:31:28",
2
+ "timestamp": "2025-02-24T18:17:54",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.20.0",
package/dist/esm/index.js CHANGED
@@ -12,7 +12,7 @@ export { c as componentOnReady } from './helpers-da915de8.js';
12
12
  export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
13
13
  export { o as openURL } from './theme-01f3f29c.js';
14
14
  export { m as menuController } from './index-24b48b06.js';
15
- export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ae10d43d.js';
15
+ export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-e7b9d6d9.js';
16
16
  import './index-a5d50daf.js';
17
17
  import './index-28849c61.js';
18
18
  import './index-9b0d46f4.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, f as Host, i
5
5
  import { c as createButtonActiveGesture } from './button-active-f6503382.js';
6
6
  import { r as raf } from './helpers-da915de8.js';
7
7
  import { c as createLockController } from './lock-controller-316928be.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-ae10d43d.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-e7b9d6d9.js';
9
9
  import { g as getClassMap } from './theme-01f3f29c.js';
10
10
  import { b as getIonMode } from './ionic-global-c81d82ab.js';
11
11
  import { c as createAnimation } from './animation-eab5a4ca.js';
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { c as createButtonActiveGesture } from './button-active-f6503382.js';
7
7
  import { r as raf } from './helpers-da915de8.js';
8
8
  import { c as createLockController } from './lock-controller-316928be.js';
9
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
9
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
10
10
  import { g as getClassMap } from './theme-01f3f29c.js';
11
11
  import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
12
12
  import { c as createAnimation } from './animation-eab5a4ca.js';
@@ -797,13 +797,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
797
797
  };
798
798
  const setHeaderActive = (headerIndex, active = true) => {
799
799
  const headerEl = headerIndex.el;
800
+ const toolbars = headerIndex.toolbars;
801
+ const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
800
802
  if (active) {
801
803
  headerEl.classList.remove('header-collapse-condense-inactive');
802
- headerEl.removeAttribute('aria-hidden');
804
+ ionTitles.forEach((ionTitle) => {
805
+ if (ionTitle) {
806
+ ionTitle.removeAttribute('aria-hidden');
807
+ }
808
+ });
803
809
  }
804
810
  else {
805
811
  headerEl.classList.add('header-collapse-condense-inactive');
806
- headerEl.setAttribute('aria-hidden', 'true');
812
+ /**
813
+ * The small title should only be accessed by screen readers
814
+ * when the large title collapses into the small title due
815
+ * to scrolling.
816
+ *
817
+ * Originally, the header was given `aria-hidden="true"`
818
+ * but this caused issues with screen readers not being
819
+ * able to access any focusable elements within the header.
820
+ */
821
+ ionTitles.forEach((ionTitle) => {
822
+ if (ionTitle) {
823
+ ionTitle.setAttribute('aria-hidden', 'true');
824
+ }
825
+ });
807
826
  }
808
827
  };
809
828
  const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
11
11
  import { b as getIonMode } from './ionic-global-c81d82ab.js';
12
12
  import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-ae11fd43.js';
13
13
  import { c as createLockController } from './lock-controller-316928be.js';
14
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
14
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
15
15
  import { c as createAnimation } from './animation-eab5a4ca.js';
16
16
  import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-ac164e4c.js';
17
17
  import './index-a5d50daf.js';
@@ -373,6 +373,8 @@ const ItemSliding = class {
373
373
  optsWidth = -this.optsWidthLeftSide;
374
374
  openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
375
375
  }
376
+ if (openAmount === 0)
377
+ return;
376
378
  this.setOpenAmount(openAmount, false);
377
379
  }
378
380
  onEnd(gesture) {
@@ -487,7 +489,7 @@ const ItemSliding = class {
487
489
  }
488
490
  render() {
489
491
  const mode = getIonMode(this);
490
- return (h(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
492
+ return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
491
493
  [mode]: true,
492
494
  'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
493
495
  'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
6
6
  import { r as raf } from './helpers-da915de8.js';
7
7
  import { c as createLockController } from './lock-controller-316928be.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ae10d43d.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-e7b9d6d9.js';
9
9
  import { g as getClassMap } from './theme-01f3f29c.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
11
11
  import { c as createAnimation } from './animation-eab5a4ca.js';