@sparkle-learning/core 0.0.32 → 0.0.35

package/dist/node_modules/@ionic/core/dist/collection/components/datetime/datetime.md.css

@@ -10,12 +10,37 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
-  max-width: 350px;
   height: auto;
 }
 
+:host(.datetime-size-fixed:not(.datetime-prefer-wheel)) {
+  max-width: 350px;
+}
+
+/**
+ * This ensures that the picker is apppropriately
+ * sized and never truncates the text.
+ */
+:host(.datetime-size-fixed.datetime-prefer-wheel) {
+  min-width: 350px;
+  max-width: max-content;
+}
+
 :host(.datetime-size-cover) {
   width: 100%;
 }
@@ -49,20 +74,17 @@
  * the order we need to manually switch
  * the text alignment too.
  */
-:host .datetime-year .order-month-first .month-column {
-  order: 1;
-}
-
-:host .datetime-year .order-month-first .year-column {
-  order: 2;
+:host .wheel-order-year-first .day-column {
+  order: 3;
+  text-align: end;
 }
 
-:host .datetime-year .order-year-first .month-column {
+:host .wheel-order-year-first .month-column {
   order: 2;
   text-align: end;
 }
 
-:host .datetime-year .order-year-first .year-column {
+:host .wheel-order-year-first .year-column {
   order: 1;
   text-align: start;
 }
@@ -87,9 +109,8 @@
 }
 
 /**
- * Safari 14 has an issue where Intersection
- * Observer is incorrectly fired when
- * unhiding the calendar content.
+ * Safari 14 has an issue where a scroll event
+ * is incorrectly fired when unhiding the calendar content.
  * To workaround this, we set the opacity
  * of the content to 0 and hide it offscreen.
  *
@@ -138,6 +159,10 @@
     display: none;
   }
 }
+:host(.month-year-picker-open) .datetime-footer {
+  display: none;
+}
+
 :host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
@@ -327,14 +352,18 @@
   padding-right: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
+  position: absolute;
   /**
    * Explicit position values are required here
    * as pseudo element positioning is incorrect
    * in older implementations of css grid.
+   *
+   * TODO: FW-1720: Remove top/left styles when deprecating iOS 13 support
    */
-  left: 50%;
+  /* stylelint-disable-next-line property-disallowed-list */
   top: 50%;
-  position: absolute;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 50%;
   width: 32px;
   height: 32px;
   transform: translate(-50%, -50%);
@@ -351,11 +380,6 @@
     padding-inline-end: 4px;
   }
 }
-:host-context([dir=rtl]) {
-  left: unset;
-  right: unset;
-  right: 50%;
-}
 
 :host .datetime-time {
   display: flex;

package/dist/node_modules/@ionic/core/dist/collection/components/datetime-button/datetime-button.css

@@ -0,0 +1,60 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host button {
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  margin-left: 2px;
+  margin-right: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  position: relative;
+  transition: 150ms color ease-in-out;
+  border: none;
+  background: var(--ion-color-step-300, #edeef0);
+  color: var(--ion-text-color, #000);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  appearance: none;
+  overflow: hidden;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host button {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 12px;
+    padding-inline-start: 12px;
+    -webkit-padding-end: 12px;
+    padding-inline-end: 12px;
+  }
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host button {
+    margin-left: unset;
+    margin-right: unset;
+    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
+    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
+  }
+}
+
+:host(.time-active) #time-button,
+:host(.date-active) #date-button {
+  color: var(--ion-color-base);
+}
+
+:host(.datetime-button-disabled) {
+  pointer-events: none;
+}
+
+:host(.datetime-button-disabled) button {
+  opacity: 0.4;
+}

package/dist/node_modules/@ionic/core/dist/collection/components/item/item.ios.css

@@ -437,8 +437,9 @@ ion-ripple-effect {
 
 .item-counter {
   margin-left: auto;
-  padding-inline-start: 16px;
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
+  padding-inline-start: 16px;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .item-counter {

package/dist/node_modules/@ionic/core/dist/collection/components/item/item.md.css

@@ -437,8 +437,9 @@ ion-ripple-effect {
 
 .item-counter {
   margin-left: auto;
-  padding-inline-start: 16px;
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
+  padding-inline-start: 16px;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .item-counter {
@@ -923,6 +924,5 @@ ion-ripple-effect {
   }
 }
 .item-counter {
-  color: rgba(0, 0, 0, 0.6);
   letter-spacing: 0.0333333333em;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.ios.css

@@ -11,24 +11,24 @@
 }
 
 :host(.in-list.item-options-end:last-child) {
-  padding-right: calc(.7em + var(--ion-safe-area-right));
+  padding-right: calc(0.7em + var(--ion-safe-area-right));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-end:last-child) {
     padding-right: unset;
-    -webkit-padding-end: calc(.7em + var(--ion-safe-area-right));
-    padding-inline-end: calc(.7em + var(--ion-safe-area-right));
+    -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
+    padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
   }
 }
 
 :host(.in-list.item-options-start:first-child) {
-  padding-left: calc(.7em + var(--ion-safe-area-left));
+  padding-left: calc(0.7em + var(--ion-safe-area-left));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-start:first-child) {
     padding-left: unset;
-    -webkit-padding-start: calc(.7em + var(--ion-safe-area-left));
-    padding-inline-start: calc(.7em + var(--ion-safe-area-left));
+    -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
+    padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
   }
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.md.css

@@ -11,24 +11,24 @@
 }
 
 :host(.in-list.item-options-end:last-child) {
-  padding-right: calc(.7em + var(--ion-safe-area-right));
+  padding-right: calc(0.7em + var(--ion-safe-area-right));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-end:last-child) {
     padding-right: unset;
-    -webkit-padding-end: calc(.7em + var(--ion-safe-area-right));
-    padding-inline-end: calc(.7em + var(--ion-safe-area-right));
+    -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
+    padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
   }
 }
 
 :host(.in-list.item-options-start:first-child) {
-  padding-left: calc(.7em + var(--ion-safe-area-left));
+  padding-left: calc(0.7em + var(--ion-safe-area-left));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-start:first-child) {
     padding-left: unset;
-    -webkit-padding-start: calc(.7em + var(--ion-safe-area-left));
-    padding-inline-start: calc(.7em + var(--ion-safe-area-left));
+    -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
+    padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
   }
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/label/label.ios.css

@@ -78,7 +78,7 @@
 }
 :host(.label-floating) {
   margin-bottom: 0;
-  transform: translate3d(0,  29px,  0);
+  transform: translate(0, 29px);
   transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
@@ -87,13 +87,13 @@
 }
 
 :host-context(.item-textarea).label-floating {
-  transform: translate3d(0,  28px,  0);
+  transform: translate(0, 28px);
 }
 
 :host-context(.item-has-focus).label-floating,
 :host-context(.item-has-placeholder:not(.item-input)).label-floating,
 :host-context(.item-has-value).label-floating {
-  transform: translate3d(0,  0,  0) scale(0.82);
+  transform: scale(0.82);
 }
 
 ::slotted(*) h1 {

package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.ios.css

@@ -55,12 +55,7 @@
   z-index: 10;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.md.css

@@ -55,12 +55,7 @@
   z-index: 10;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.ios.css

@@ -35,7 +35,7 @@
   right: auto;
   top: 0;
   bottom: 0;
-  transform: translate3d(-9999px,  0,  0);
+  transform: translateX(-9999px);
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -56,10 +56,6 @@
   right: 0;
 }
 
-[dir=rtl] .menu-inner, :host-context([dir=rtl]) .menu-inner {
-  transform: translate3d(calc(-1 * -9999px),  0,  0);
-}
-
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
   /* stylelint-disable property-disallowed-list */

package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.md.css

@@ -35,7 +35,7 @@
   right: auto;
   top: 0;
   bottom: 0;
-  transform: translate3d(-9999px,  0,  0);
+  transform: translateX(-9999px);
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -56,10 +56,6 @@
   right: 0;
 }
 
-[dir=rtl] .menu-inner, :host-context([dir=rtl]) .menu-inner {
-  transform: translate3d(calc(-1 * -9999px),  0,  0);
-}
-
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
   /* stylelint-disable property-disallowed-list */

package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.ios.css

@@ -43,7 +43,8 @@
   contain: strict;
 }
 
-.modal-wrapper, ion-backdrop {
+.modal-wrapper,
+ion-backdrop {
   pointer-events: auto;
 }
 
@@ -105,7 +106,9 @@
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
+  border: 0;
   background: var(--ion-color-step-350, #c0c0be);
+  cursor: pointer;
   z-index: 11;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
@@ -118,6 +121,31 @@
     margin-inline-end: auto;
   }
 }
+.modal-handle::before {
+  /**
+   * Adds a 4px tap area to the perimeter
+   * of the handle.
+   */
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle::before {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
+    -webkit-padding-end: 4px;
+    padding-inline-end: 4px;
+  }
+}
 
 /**
  * Ensure that the sheet modal does not
@@ -152,12 +180,12 @@
 }
 
 @media screen and (max-width: 767px) {
-  @supports (width: max(0px, 1px)) {
+  @supports (width: 1px) {
     :host(.modal-card) {
       --height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
     }
   }
-  @supports not (width: max(0px, 1px)) {
+  @supports not (width: 1px) {
     :host(.modal-card) {
       --height: calc(100% - 40px);
     }

package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.md.css

@@ -43,7 +43,8 @@
   contain: strict;
 }
 
-.modal-wrapper, ion-backdrop {
+.modal-wrapper,
+ion-backdrop {
   pointer-events: auto;
 }
 
@@ -105,7 +106,9 @@
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
+  border: 0;
   background: var(--ion-color-step-350, #c0c0be);
+  cursor: pointer;
   z-index: 11;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
@@ -118,6 +121,31 @@
     margin-inline-end: auto;
   }
 }
+.modal-handle::before {
+  /**
+   * Adds a 4px tap area to the perimeter
+   * of the handle.
+   */
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle::before {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
+    -webkit-padding-end: 4px;
+    padding-inline-end: 4px;
+  }
+}
 
 /**
  * Ensure that the sheet modal does not

package/dist/node_modules/@ionic/core/dist/collection/components/picker-column-internal/picker-column-internal.ios.css

@@ -35,16 +35,39 @@
 }
 
 :host .picker-item {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: block;
+  width: 100%;
   height: 34px;
+  border: 0px;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
   line-height: 34px;
+  text-align: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
   overflow: hidden;
   scroll-snap-align: center;
 }
 
-:host .picker-item-empty {
+:host .picker-item-empty,
+:host .picker-item.picker-item-disabled {
   scroll-snap-align: none;
+  cursor: default;
+}
+
+:host .picker-item.picker-item-disabled {
+  opacity: 0.4;
 }
 
 :host(.picker-column-active) .picker-item.picker-item-active {

package/dist/node_modules/@ionic/core/dist/collection/components/picker-column-internal/picker-column-internal.md.css

@@ -35,16 +35,39 @@
 }
 
 :host .picker-item {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: block;
+  width: 100%;
   height: 34px;
+  border: 0px;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
   line-height: 34px;
+  text-align: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
   overflow: hidden;
   scroll-snap-align: center;
 }
 
-:host .picker-item-empty {
+:host .picker-item-empty,
+:host .picker-item.picker-item-disabled {
   scroll-snap-align: none;
+  cursor: default;
+}
+
+:host .picker-item.picker-item-disabled {
+  opacity: 0.4;
 }
 
 :host(.picker-column-active) .picker-item.picker-item-active {

package/dist/node_modules/@ionic/core/dist/collection/components/picker-internal/picker-internal.ios.css

@@ -109,6 +109,10 @@
   text-align: end;
 }
 
+:host ::slotted(ion-picker-column-internal:only-child) {
+  text-align: center;
+}
+
 :host .picker-before {
   background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
 }

package/dist/node_modules/@ionic/core/dist/collection/components/picker-internal/picker-internal.md.css

@@ -109,6 +109,10 @@
   text-align: end;
 }
 
+:host ::slotted(ion-picker-column-internal:only-child) {
+  text-align: center;
+}
+
 :host .picker-before {
   background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%);
 }

package/dist/node_modules/@ionic/core/dist/collection/components/range/range.ios.css

@@ -9,8 +9,8 @@
    * @prop --knob-border-radius: Border radius of the range knob
    * @prop --knob-box-shadow: Box shadow of the range knob
    * @prop --knob-size: Size of the range knob
-   * @prop --pin-background: Background of the range pin
-   * @prop --pin-color: Color of the range pin
+   * @prop --pin-background: Background of the range pin (only available in MD mode)
+   * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
   --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;

package/dist/node_modules/@ionic/core/dist/collection/components/range/range.md.css

@@ -9,8 +9,8 @@
    * @prop --knob-border-radius: Border radius of the range knob
    * @prop --knob-box-shadow: Box shadow of the range knob
    * @prop --knob-size: Size of the range knob
-   * @prop --pin-background: Background of the range pin
-   * @prop --pin-color: Color of the range pin
+   * @prop --pin-background: Background of the range pin (only available in MD mode)
+   * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
   --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;

package/dist/node_modules/@ionic/core/dist/collection/components/spinner/spinner.css

@@ -15,20 +15,20 @@
 }
 
 svg {
-  left: 0;
-  top: 0;
   transform-origin: center;
   position: absolute;
+  /**
+   * Do not use @include position
+   * as the alignment of the elements with
+   * a spinner should not be RTL aware.
+   */
+  top: 0;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 0;
   width: 100%;
   height: 100%;
   transform: translateZ(0);
 }
-[dir=rtl] svg, :host-context([dir=rtl]) svg {
-  left: unset;
-  right: unset;
-  right: 0;
-}
-
 [dir=rtl] svg, :host-context([dir=rtl]) svg {
   transform-origin: calc(100% - center);
 }