@sparkle-learning/core 0.0.27 → 0.0.30

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

@@ -82,13 +82,13 @@
   box-sizing: border-box;
 }
 
-:host(.ion-color) .item-native {
+:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }
 
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
+:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,
+:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner {
   border-color: var(--ion-color-shade);
 }
 
@@ -120,18 +120,18 @@
 }
 
 @media (any-hover: hover) {
-  :host(.ion-activatable:hover) .item-native {
+  :host(.ion-activatable:not(.ion-focused):hover) .item-native {
     color: var(--color-hover);
   }
-  :host(.ion-activatable:hover) .item-native::after {
+  :host(.ion-activatable:not(.ion-focused):hover) .item-native::after {
     background: var(--background-hover);
     opacity: var(--background-hover-opacity);
   }
 
-  :host(.ion-color.ion-activatable:hover) .item-native {
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
     color: var(--ion-color-contrast);
   }
-  :host(.ion-color.ion-activatable:hover) .item-native::after {
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after {
     background: var(--ion-color-contrast);
   }
 }
@@ -251,6 +251,29 @@ button, a {
   }
 }
 
+.item-bottom {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-right: var(--inner-padding-end);
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .item-bottom {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+    padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+    -webkit-padding-end: var(--inner-padding-end);
+    padding-inline-end: var(--inner-padding-end);
+  }
+}
+
 .item-detail-icon {
   color: var(--detail-icon-color);
   font-size: var(--detail-icon-font-size);
@@ -269,7 +292,7 @@ button, a {
   z-index: 1;
 }
 
-::slotted(ion-label) {
+::slotted(ion-label:not([slot=end])) {
   flex: 1;
 }
 
@@ -303,26 +326,31 @@ button, a {
 .item-inner-highlight {
   left: 0;
   right: 0;
+  top: 0;
   bottom: 0;
+  border-radius: inherit;
   position: absolute;
-  background: var(--highlight-background);
-  z-index: 1;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(0);
+  transition: transform 200ms, border-bottom-width 200ms;
+  z-index: 2;
+  box-sizing: border-box;
+  pointer-events: none;
 }
 
-.item-highlight {
-  height: var(--full-highlight-height);
-}
-
-.item-inner-highlight {
-  height: var(--inset-highlight-height);
+:host(.item-interactive.item-has-focus) .item-native {
+  caret-color: var(--highlight-background);
 }
 
+:host(.item-interactive.ion-focused),
 :host(.item-interactive.item-has-focus),
 :host(.item-interactive.ion-touched.ion-invalid) {
   --full-highlight-height: calc(var(--highlight-height) * var(--show-full-highlight));
   --inset-highlight-height: calc(var(--highlight-height) * var(--show-inset-highlight));
 }
 
+:host(.item-interactive.ion-focused),
 :host(.item-interactive.item-has-focus) {
   --highlight-background: var(--highlight-color-focused);
 }
@@ -335,6 +363,19 @@ button, a {
   --highlight-background: var(--highlight-color-invalid);
 }
 
+:host(.item-interactive.ion-invalid) ::slotted([slot=helper]) {
+  display: none;
+}
+
+::slotted([slot=error]) {
+  display: none;
+  color: var(--highlight-color-invalid);
+}
+
+:host(.item-interactive.ion-invalid) ::slotted([slot=error]) {
+  display: block;
+}
+
 :host(:not(.item-label)) ::slotted(ion-select) {
   --padding-start: 0;
   max-width: none;
@@ -379,6 +420,40 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
+:host(.item-fill-solid) ::slotted([slot=start]),
+:host(.item-fill-solid) ::slotted([slot=end]),
+:host(.item-fill-outline) ::slotted([slot=start]),
+:host(.item-fill-outline) ::slotted([slot=end]) {
+  align-self: center;
+}
+
+::slotted([slot=helper]),
+::slotted([slot=error]),
+.item-counter {
+  padding-top: 5px;
+  font-size: 12px;
+  z-index: 1;
+}
+
+.item-counter {
+  margin-left: auto;
+  padding-inline-start: 16px;
+  white-space: nowrap;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .item-counter {
+    margin-left: unset;
+    -webkit-margin-start: auto;
+    margin-inline-start: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item-highlight,
+.item-inner-highlight {
+    transition: none;
+  }
+}
 :host {
   --min-height: 48px;
   --background: var(--ion-item-background, var(--ion-background-color, #fff));
@@ -392,11 +467,9 @@ ion-ripple-effect {
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --transition: opacity 15ms linear, background-color 15ms linear;
   --padding-start: 16px;
-  --color: var(--ion-item-color, var(--ion-text-color, #000));
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
-  --highlight-height: 2px;
+  --highlight-height: 1px;
   --highlight-color-focused: var(--ion-color-primary, #3880ff);
   --highlight-color-valid: var(--ion-color-success, #2dd36f);
   --highlight-color-invalid: var(--ion-color-danger, #eb445a);
@@ -405,10 +478,65 @@ ion-ripple-effect {
   text-transform: none;
 }
 
+:host(.item-fill-outline) {
+  --highlight-height: 2px;
+}
+
+:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  transform: scaleX(1);
+  border-width: 0 0 var(--full-highlight-height) 0;
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-none.item-interactive.ion-focus) .item-native,
+:host(.item-fill-none.item-interactive.item-has-focus) .item-native,
+:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-bottom-color: var(--highlight-background);
+}
+
+:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight {
+  transform: scaleX(1);
+}
+
+:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  border-width: var(--full-highlight-height);
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  transform: scaleX(1);
+  border-width: 0 0 var(--full-highlight-height) 0;
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-solid.item-interactive.ion-focus) .item-native,
+:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,
+:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-bottom-color: var(--highlight-background);
+}
+
 :host(.ion-color.ion-activated) .item-native::after {
   background: transparent;
 }
 
+:host(.item-has-focus) .item-native {
+  caret-color: var(--highlight-color-focused);
+}
+
 :host(.item-interactive) {
   --border-width: 0 0 1px 0;
   --inner-border-width: 0;
@@ -440,6 +568,28 @@ ion-ripple-effect {
   --show-inset-highlight: 0;
 }
 
+/**
+ * When `fill="outline"`, reposition the highlight element to cover everything but the `.item-bottom`
+ */
+:host(.item-fill-outline) .item-highlight {
+  --position-offset: calc(-1 * var(--border-width));
+  left: var(--position-offset);
+  top: var(--position-offset);
+  width: calc(100% + 2 * var(--border-width));
+  height: calc(100% + 2 * var(--border-width));
+  transition: none;
+}
+:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight, :host-context([dir=rtl]).item-fill-outline .item-highlight {
+  left: unset;
+  right: unset;
+  right: var(--position-offset);
+}
+
+:host(.item-fill-outline.ion-focused) .item-native,
+:host(.item-fill-outline.item-has-focus) .item-native {
+  border-color: transparent;
+}
+
 :host(.item-multi-line) ::slotted([slot=start]),
 :host(.item-multi-line) ::slotted([slot=end]) {
   margin-top: 16px;
@@ -468,12 +618,19 @@ ion-ripple-effect {
   }
 }
 
+:host(.item-fill-solid) ::slotted([slot=start]),
+:host(.item-fill-solid) ::slotted([slot=end]),
+:host(.item-fill-outline) ::slotted([slot=start]),
+:host(.item-fill-outline) ::slotted([slot=end]) {
+  align-self: center;
+}
+
 ::slotted(ion-icon) {
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   font-size: 24px;
 }
 
-:host(.ion-color) ::slotted(ion-icon) {
+:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon) {
   color: var(--ion-color-contrast);
 }
 
@@ -503,6 +660,19 @@ ion-ripple-effect {
   }
 }
 
+:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),
+:host(.item-fill-outline) ::slotted(ion-icon[slot=start]) {
+  margin-right: 8px;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host(.item-fill-solid) ::slotted(ion-icon[slot=start]),
+:host(.item-fill-outline) ::slotted(ion-icon[slot=start]) {
+    margin-right: unset;
+    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
+  }
+}
+
 ::slotted(ion-toggle[slot=start]),
 ::slotted(ion-toggle[slot=end]) {
   margin-left: 0;
@@ -520,7 +690,7 @@ ion-ripple-effect {
   font-size: 11px;
 }
 
-::slotted(ion-note[slot]) {
+::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])) {
   padding-left: 0;
   padding-right: 0;
   padding-top: 18px;
@@ -593,7 +763,7 @@ ion-ripple-effect {
 ::slotted(ion-label) {
   margin-left: 0;
   margin-right: 0;
-  margin-top: 11px;
+  margin-top: 10px;
   margin-bottom: 10px;
 }
 
@@ -641,6 +811,8 @@ ion-ripple-effect {
   --padding-start: 0;
 }
 
+:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),
+:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
   color: var(--ion-color-primary, #3880ff);
@@ -652,4 +824,105 @@ ion-ripple-effect {
 
 :host(.item-label-color) {
   --highlight-color-focused: var(--ion-color-base);
+}
+
+:host(.item-fill-solid.ion-color),
+:host(.item-fill-outline.ion-color) {
+  --highlight-color-focused: var(--ion-color-base);
+}
+
+:host(.item-fill-solid) {
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --background-hover: var(--ion-color-step-100, #e6e6e6);
+  --background-focused: var(--ion-color-step-150, #d9d9d9);
+  --border-width: 0 0 1px 0;
+  --inner-border-width: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host-context([dir=rtl]):host(.item-fill-solid), :host-context([dir=rtl]).item-fill-solid {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+:host(.item-fill-solid) .item-native {
+  --border-color: var(--ion-color-step-500, gray);
+}
+
+:host(.item-fill-solid.ion-focused) .item-native,
+:host(.item-fill-solid.item-has-focus) .item-native {
+  --background: var(--background-focused);
+}
+
+:host(.item-fill-solid.item-shape-round) {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round), :host-context([dir=rtl]).item-fill-solid.item-shape-round {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@media (any-hover: hover) {
+  :host(.item-fill-solid:hover) .item-native {
+    --background: var(--background-hover);
+    --border-color: var(--ion-color-step-750, #404040);
+  }
+}
+:host(.item-fill-outline) {
+  --ripple-color: transparent;
+  --background-focused: transparent;
+  --background-hover: transparent;
+  --border-color: var(--ion-color-step-500, gray);
+  --border-width: 1px;
+  border: none;
+  overflow: visible;
+}
+
+:host(.item-fill-outline) .item-native {
+  --native-padding-left: 16px;
+  border-radius: 4px;
+}
+
+:host(.item-fill-outline.item-shape-round) .item-native {
+  --inner-padding-start: 16px;
+  border-radius: 28px;
+}
+
+:host(.item-fill-outline.item-shape-round) .item-bottom {
+  padding-left: 32px;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host(.item-fill-outline.item-shape-round) .item-bottom {
+    padding-left: unset;
+    -webkit-padding-start: 32px;
+    padding-inline-start: 32px;
+  }
+}
+
+:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)),
+:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)),
+:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)),
+:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)),
+:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)),
+:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)) {
+  transform: translateY(-14px);
+}
+
+@media (any-hover: hover) {
+  :host(.item-fill-outline:hover) .item-native {
+    --border-color: var(--ion-color-step-750, #404040);
+  }
+}
+.item-counter {
+  color: rgba(0, 0, 0, 0.6);
+  letter-spacing: 0.0333333333em;
 }

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

@@ -1,8 +1,8 @@
 ion-item-options {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   top: 0;
   right: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-end;
   display: none;
   position: absolute;
@@ -15,18 +15,18 @@ ion-item-options {
   justify-content: flex-start;
 }
 [dir=rtl] ion-item-options:not(.item-options-end), :host-context([dir=rtl]) ion-item-options:not(.item-options-end) {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-end;
 }
 
 .item-options-start {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-start;
 }
 [dir=rtl] .item-options-start, :host-context([dir=rtl]) .item-options-start {

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

@@ -1,8 +1,8 @@
 ion-item-options {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   top: 0;
   right: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-end;
   display: none;
   position: absolute;
@@ -15,18 +15,18 @@ ion-item-options {
   justify-content: flex-start;
 }
 [dir=rtl] ion-item-options:not(.item-options-end), :host-context([dir=rtl]) ion-item-options:not(.item-options-end) {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-end;
 }
 
 .item-options-start {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   right: auto;
   left: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   justify-content: flex-start;
 }
 [dir=rtl] .item-options-start, :host-context([dir=rtl]) .item-options-start {

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

@@ -20,7 +20,7 @@ ion-item-sliding .item {
 }
 
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   padding-left: 100%;
   order: 1;
   transition-duration: 0.6s;
@@ -31,7 +31,7 @@ ion-item-sliding .item {
 }
 
 .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   padding-right: 100%;
   order: -1;
   transition-duration: 0.6s;

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,  27px,  0);
+  transform: translate3d(0,  29px,  0);
   transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
@@ -86,8 +86,12 @@
   transform-origin: right top;
 }
 
+:host-context(.item-textarea).label-floating {
+  transform: translate3d(0,  28px,  0);
+}
+
 :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: translate3d(0,  0,  0) scale(0.82);
 }
@@ -138,7 +142,7 @@
   color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
 }
 
-:host-context(.ion-color)::slotted(p) {
+:host(.in-item-color)::slotted(p) {
   color: inherit;
 }