@sparkle-learning/core 0.0.27 → 0.0.30

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

@@ -75,48 +75,130 @@
  * When translating the label, we need to use translateY
  * instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731
  */
+:host(.label-stacked),
+:host(.label-floating) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  /* stylelint-disable property-disallowed-list */
+  transform-origin: top left;
+  /* stylelint-enable property-disallowed-list */
+}
+
+:host(.label-stacked.label-rtl),
+:host(.label-floating.label-rtl) {
+  /* stylelint-disable property-disallowed-list */
+  transform-origin: top right;
+  /* stylelint-enable property-disallowed-list */
+}
+
 :host(.label-stacked) {
-  transform-origin: left top;
   transform: translateY(50%) scale(0.75);
   transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-:host-context([dir=rtl]):host(.label-stacked), :host-context([dir=rtl]).label-stacked {
-  transform-origin: right top;
-}
 
 :host(.label-floating) {
   transform: translateY(96%);
-  transform-origin: left top;
   transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-:host-context([dir=rtl]):host(.label-floating), :host-context([dir=rtl]).label-floating {
-  transform-origin: right top;
-}
-
-:host(.label-stacked),
-:host(.label-floating) {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
 
+:host-context(.ion-focused).label-floating,
 :host-context(.item-has-focus).label-floating,
-:host-context(.item-has-placeholder).label-floating,
+:host-context(.item-has-placeholder:not(.item-input)).label-floating,
 :host-context(.item-has-value).label-floating {
   transform: translateY(50%) scale(0.75);
 }
 
+/**
+ * When translating the label inside of an ion-item with `fill="outline"`,
+ * add pseudo-elements to imitate fieldset-like padding without shifting the label
+ */
+:host-context(.item-fill-outline.ion-focused).label-floating,
+:host-context(.item-fill-outline.item-has-focus).label-floating,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
+:host-context(.item-fill-outline.item-has-value).label-floating {
+  transform: translateY(-6px) scale(0.75);
+  position: relative;
+  max-width: min-content;
+  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
+  overflow: visible;
+  z-index: 3;
+}
+:host-context(.item-fill-outline.ion-focused).label-floating::before, :host-context(.item-fill-outline.ion-focused).label-floating::after,
+:host-context(.item-fill-outline.item-has-focus).label-floating::before,
+:host-context(.item-fill-outline.item-has-focus).label-floating::after,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
+:host-context(.item-fill-outline.item-has-value).label-floating::before,
+:host-context(.item-fill-outline.item-has-value).label-floating::after {
+  position: absolute;
+  width: 4px;
+  height: 100%;
+  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
+  content: "";
+}
+:host-context(.item-fill-outline.ion-focused).label-floating::before,
+:host-context(.item-fill-outline.item-has-focus).label-floating::before,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
+:host-context(.item-fill-outline.item-has-value).label-floating::before {
+  /* stylelint-disable property-disallowed-list */
+  left: calc(-1 * 4px);
+  /* stylelint-enable property-disallowed-list */
+}
+:host-context(.item-fill-outline.ion-focused).label-floating::after,
+:host-context(.item-fill-outline.item-has-focus).label-floating::after,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
+:host-context(.item-fill-outline.item-has-value).label-floating::after {
+  /* stylelint-disable property-disallowed-list */
+  right: calc(-1 * 4px);
+  /* stylelint-enable property-disallowed-list */
+}
+
+:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating,
+:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
+:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
+  transform: translateX(-32px) translateY(-6px) scale(0.75);
+}
+
+:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl,
+:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
+:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
+:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
+  transform: translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75);
+}
+
+:host-context(.ion-focused).label-stacked:not(.ion-color),
+:host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
   color: var(--ion-color-primary, #3880ff);
 }
 
+:host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),
+:host-context(.ion-focused.ion-color).label-floating:not(.ion-color),
 :host-context(.item-has-focus.ion-color).label-stacked:not(.ion-color),
 :host-context(.item-has-focus.ion-color).label-floating:not(.ion-color) {
   color: var(--ion-color-contrast);
 }
 
+:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color),
+:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color),
+:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color),
+:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color),
+:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color),
+:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color),
+:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color),
+:host-context(.item-fill-outline.item-has-focus.ion-color).label-floating:not(.ion-color) {
+  color: var(--ion-color-base);
+}
+
+:host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color),
+:host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) {
+  color: var(--highlight-color-invalid);
+}
+
 ::slotted(*) h1 {
   margin-left: 0;
   margin-right: 0;
@@ -163,6 +245,6 @@
   color: var(--ion-color-step-600, #666666);
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }

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

@@ -25,7 +25,7 @@ ion-list.list-inset {
   margin-right: 16px;
   margin-top: 16px;
   margin-bottom: 16px;
-  border-radius: 4px;
+  border-radius: 10px;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .list-ios.list-inset {

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

@@ -62,7 +62,7 @@
 
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
 }
@@ -71,7 +71,7 @@
   --ion-safe-area-left: 0px;
   right: 0;
   left: auto;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
 }
 
 ion-backdrop {

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

@@ -62,7 +62,7 @@
 
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
 }
@@ -71,7 +71,7 @@
   --ion-safe-area-left: 0px;
   right: 0;
   left: auto;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
 }
 
 ion-backdrop {

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

@@ -43,6 +43,10 @@
   contain: strict;
 }
 
+.modal-wrapper, ion-backdrop {
+  pointer-events: auto;
+}
+
 :host(.overlay-hidden) {
   display: none;
 }
@@ -86,10 +90,58 @@
     --height: 600px;
   }
 }
-:host:first-of-type {
+.modal-handle {
+  left: 0px;
+  right: 0px;
+  top: 5px;
+  border-radius: 8px;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  /**
+   * This allows the handle to appear
+   * on top of user content in WebKit.
+   */
+  transform: translateZ(0);
+  background: var(--ion-color-step-350, #c0c0be);
+  z-index: 11;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle {
+    margin-left: unset;
+    margin-right: unset;
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+    -webkit-margin-end: auto;
+    margin-inline-end: auto;
+  }
+}
+
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ */
+:host(.modal-sheet) {
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
+}
+
+:host(.modal-sheet) .modal-wrapper,
+:host(.modal-sheet) .modal-shadow {
+  position: absolute;
+  bottom: 0;
+}
+
+:host {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 }
 
+:host(.modal-card),
+:host(.modal-sheet) {
+  --border-radius: 10px;
+}
+
 @media only screen and (min-width: 768px) and (min-height: 600px) {
   :host {
     --border-radius: 10px;
@@ -111,14 +163,14 @@
     }
   }
   :host(.modal-card) .modal-wrapper {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
   :host-context([dir=rtl]):host(.modal-card) .modal-wrapper, :host-context([dir=rtl]).modal-card .modal-wrapper {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -143,17 +195,28 @@
     --height: calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
     --max-width: 720px;
     --max-height: 1000px;
-  }
-
-  :host(.modal-card) {
     --backdrop-opacity: 0;
+    --box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
     transition: all 0.5s ease-in-out;
   }
-  :host(.modal-card):first-of-type {
-    --backdrop-opacity: 0.18;
+
+  :host(.modal-card) .modal-wrapper {
+    box-shadow: none;
   }
 
   :host(.modal-card) .modal-shadow {
-    box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--box-shadow);
   }
+}
+:host(.modal-sheet) .modal-wrapper {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host-context([dir=rtl]):host(.modal-sheet) .modal-wrapper, :host-context([dir=rtl]).modal-sheet .modal-wrapper {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }

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

@@ -43,6 +43,10 @@
   contain: strict;
 }
 
+.modal-wrapper, ion-backdrop {
+  pointer-events: auto;
+}
+
 :host(.overlay-hidden) {
   display: none;
 }
@@ -86,16 +90,56 @@
     --height: 600px;
   }
 }
-:host:first-of-type {
+.modal-handle {
+  left: 0px;
+  right: 0px;
+  top: 5px;
+  border-radius: 8px;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  /**
+   * This allows the handle to appear
+   * on top of user content in WebKit.
+   */
+  transform: translateZ(0);
+  background: var(--ion-color-step-350, #c0c0be);
+  z-index: 11;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle {
+    margin-left: unset;
+    margin-right: unset;
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+    -webkit-margin-end: auto;
+    margin-inline-end: auto;
+  }
+}
+
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ */
+:host(.modal-sheet) {
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
+}
+
+:host(.modal-sheet) .modal-wrapper,
+:host(.modal-sheet) .modal-shadow {
+  position: absolute;
+  bottom: 0;
+}
+
+:host {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
 @media only screen and (min-width: 768px) and (min-height: 600px) {
   :host {
     --border-radius: 2px;
-  }
-
-  :host:first-of-type {
     --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
   }
 }

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

@@ -0,0 +1,59 @@
+:host {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 200px;
+  outline: none;
+  font-size: 22px;
+  scroll-snap-type: y mandatory;
+  /**
+   * Need to explicitly set overflow-x: hidden
+   * for older implementations of scroll snapping.
+   */
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  text-align: center;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 16px;
+    padding-inline-start: 16px;
+    -webkit-padding-end: 16px;
+    padding-inline-end: 16px;
+  }
+}
+
+/**
+ * Hide scrollbars on Chrome and Safari
+ */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host .picker-item {
+  height: 34px;
+  line-height: 34px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  scroll-snap-align: center;
+}
+
+:host .picker-item-empty {
+  scroll-snap-align: none;
+}
+
+:host(.picker-column-active) .picker-item.picker-item-active {
+  color: var(--ion-color-base);
+}
+
+@media (any-hover: hover) {
+  :host(:focus) {
+    outline: none;
+    background: rgba(var(--ion-color-base-rgb), 0.2);
+  }
+}

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

@@ -0,0 +1,62 @@
+:host {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 200px;
+  outline: none;
+  font-size: 22px;
+  scroll-snap-type: y mandatory;
+  /**
+   * Need to explicitly set overflow-x: hidden
+   * for older implementations of scroll snapping.
+   */
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  text-align: center;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 16px;
+    padding-inline-start: 16px;
+    -webkit-padding-end: 16px;
+    padding-inline-end: 16px;
+  }
+}
+
+/**
+ * Hide scrollbars on Chrome and Safari
+ */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host .picker-item {
+  height: 34px;
+  line-height: 34px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  scroll-snap-align: center;
+}
+
+:host .picker-item-empty {
+  scroll-snap-align: none;
+}
+
+:host(.picker-column-active) .picker-item.picker-item-active {
+  color: var(--ion-color-base);
+}
+
+@media (any-hover: hover) {
+  :host(:focus) {
+    outline: none;
+    background: rgba(var(--ion-color-base-rgb), 0.2);
+  }
+}
+:host .picker-item-active {
+  color: var(--ion-color-base);
+}

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

@@ -0,0 +1,122 @@
+:host {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 200px;
+  /**
+   * Picker columns should display
+   * in the order in which developers
+   * added them and should ignore
+   * LTR vs RTL directions.
+   */
+  direction: ltr;
+  /**
+   * This is required otherwise the
+   * highlight will appear behind
+   * the picker when used inline.
+   */
+  z-index: 0;
+}
+
+:host .picker-before,
+:host .picker-after {
+  position: absolute;
+  width: 100%;
+  /**
+   * This is needed for WebKit
+   * otherwise the fade will appear
+   * underneath the picker.
+   */
+  z-index: 1;
+  pointer-events: none;
+}
+
+:host .picker-before {
+  left: 0;
+  top: 0;
+  height: 83px;
+}
+:host-context([dir=rtl]) {
+  left: unset;
+  right: unset;
+  right: 0;
+}
+
+:host .picker-after {
+  left: 0;
+  top: 116px;
+  height: 84px;
+}
+:host-context([dir=rtl]) {
+  left: unset;
+  right: unset;
+  right: 0;
+}
+
+:host .picker-highlight {
+  border-radius: 8px;
+  left: 0;
+  right: 0;
+  top: 50%;
+  bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: absolute;
+  width: calc(100% - 16px);
+  height: 34px;
+  transform: translateY(-50%);
+  z-index: -1;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host .picker-highlight {
+    margin-left: unset;
+    margin-right: unset;
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+    -webkit-margin-end: auto;
+    margin-inline-end: auto;
+  }
+}
+
+:host input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+  overflow: hidden;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+:host ::slotted(ion-picker-column-internal:first-of-type) {
+  text-align: start;
+}
+
+:host ::slotted(ion-picker-column-internal:last-of-type) {
+  text-align: end;
+}
+
+: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%);
+}
+
+:host .picker-after {
+  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
+}
+
+:host .picker-highlight {
+  background: var(--ion-color-step-150, #eeeeef);
+}