@venite/components 0.16.35 → 0.16.36

package/dist/node_modules/@ionic/core/dist/collection/components/progress-bar/progress-bar.md.css

@@ -1,10 +1,10 @@
 :host {
   /**
-  * @prop --background:  Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
-  * @prop --progress-background: Color of the progress bar
-  * @prop --buffer-background: Color of the buffer bar
-  */
-  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.2);
+   * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
+   * @prop --progress-background: Background of the progress bar representing the current value
+   * @prop --buffer-background: DEPRECATED, use `--background` instead
+   */
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
   --progress-background: var(--ion-color-primary, #3880ff);
   --buffer-background: var(--background);
   display: block;
@@ -15,22 +15,11 @@
   overflow: hidden;
 }
 
-:host(.ion-color) {
-  --progress-background: var(--ion-color-base);
-  --buffer-background: rgba(var(--ion-color-base-rgb), 0.2);
-}
-
-:host(.progress-bar-indeterminate) {
-  background: var(--buffer-background);
-}
-
 .progress,
 .progress-indeterminate,
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
-.progress-buffer-bar,
-.progress-buffer-bar:before,
-.buffer-circles {
+.progress-buffer-bar {
   left: 0;
   right: 0;
   top: 0;
@@ -40,9 +29,26 @@
   height: 100%;
 }
 
+.buffer-circles-container,
+.buffer-circles {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.buffer-circles {
+  /* stylelint-disable property-disallowed-list */
+  right: -10px;
+  left: -10px;
+  /* stylelint-enable property-disallowed-list */
+}
+
 .progress,
-.progress-buffer-bar {
-  /* stylelint-disable-next-line property-blacklist */
+.progress-buffer-bar,
+.buffer-circles-container {
+  /* stylelint-disable-next-line property-disallowed-list */
   transform-origin: left top;
   transition: transform 150ms linear;
 }
@@ -54,21 +60,21 @@
 }
 
 .progress-buffer-bar {
-  background: #fff;
+  background: var(--buffer-background);
   z-index: 1;
 }
-.progress-buffer-bar:before {
-  background: var(--buffer-background);
-  content: "";
+
+.buffer-circles-container {
+  overflow: hidden;
 }
 
 .indeterminate-bar-primary {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   top: 0;
   right: 0;
   bottom: 0;
   left: -145.166611%;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   animation: primary-indeterminate-translate 2s infinite linear;
 }
 .indeterminate-bar-primary .progress-indeterminate {
@@ -77,12 +83,12 @@
 }
 
 .indeterminate-bar-secondary {
-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
   top: 0;
   right: 0;
   bottom: 0;
   left: -54.888891%;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */
   animation: secondary-indeterminate-translate 2s infinite linear;
 }
 .indeterminate-bar-secondary .progress-indeterminate {
@@ -91,22 +97,18 @@
 }
 
 .buffer-circles {
-  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
+  background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);
+  /* stylelint-disable property-disallowed-list */
+  background-repeat: repeat-x;
+  background-position: 5px center;
   background-size: 10px 10px;
+  /* stylelint-enable property-disallowed-list */
   z-index: 0;
   animation: buffering 450ms infinite linear;
 }
 
-:host(.progress-bar-reversed) .progress,
-:host(.progress-bar-reversed) .progress-buffer-bar {
-  /* stylelint-disable-next-line property-blacklist */
-  transform-origin: right top;
-}
-:host(.progress-bar-reversed) .buffer-circles,
-:host(.progress-bar-reversed) .indeterminate-bar-primary,
-:host(.progress-bar-reversed) .indeterminate-bar-secondary,
-:host(.progress-bar-reversed) .progress-indeterminate {
-  animation-direction: reverse;
+:host(.progress-bar-reversed) {
+  transform: scaleX(-1);
 }
 
 :host(.progress-paused) .indeterminate-bar-secondary,
@@ -115,6 +117,19 @@
   animation-play-state: paused;
 }
 
+:host(.ion-color) .progress-buffer-bar {
+  background: rgba(var(--ion-color-base-rgb), 0.3);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
+}
+
+:host(.ion-color) .progress,
+:host(.ion-color) .progress-indeterminate {
+  background: var(--ion-color-base);
+}
+
 @keyframes primary-indeterminate-translate {
   0% {
     transform: translateX(0);

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

@@ -26,7 +26,12 @@
   contain: layout size style;
 }
 
-button {
+.radio-icon,
+.radio-inner {
+  box-sizing: border-box;
+}
+
+label {
   left: 0;
   top: 0;
   margin-left: 0;
@@ -41,20 +46,41 @@ button {
   cursor: pointer;
   appearance: none;
   outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
 }
-[dir=rtl] button, :host-context([dir=rtl]) button {
+[dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;
   right: unset;
   right: 0;
 }
 
-button::-moz-focus-inner {
+label::-moz-focus-inner {
   border: 0;
 }
 
-.radio-icon,
-.radio-inner {
-  box-sizing: border-box;
+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(:focus) {
+  outline: none;
 }
 
 :host {

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

@@ -26,7 +26,12 @@
   contain: layout size style;
 }
 
-button {
+.radio-icon,
+.radio-inner {
+  box-sizing: border-box;
+}
+
+label {
   left: 0;
   top: 0;
   margin-left: 0;
@@ -41,20 +46,41 @@ button {
   cursor: pointer;
   appearance: none;
   outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
 }
-[dir=rtl] button, :host-context([dir=rtl]) button {
+[dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;
   right: unset;
   right: 0;
 }
 
-button::-moz-focus-inner {
+label::-moz-focus-inner {
   border: 0;
 }
 
-.radio-icon,
-.radio-inner {
-  box-sizing: border-box;
+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(:focus) {
+  outline: none;
 }
 
 :host {

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;
@@ -79,7 +79,7 @@
   }
 }
 [dir=rtl] .range-knob-handle, :host-context([dir=rtl]) .range-knob-handle {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 
@@ -104,7 +104,7 @@
 }
 
 [dir=rtl] .range-bar, :host-context([dir=rtl]) .range-bar {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 
@@ -127,7 +127,7 @@
 }
 
 [dir=rtl] .range-knob, :host-context([dir=rtl]) .range-knob {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 

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;
@@ -79,7 +79,7 @@
   }
 }
 [dir=rtl] .range-knob-handle, :host-context([dir=rtl]) .range-knob-handle {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 
@@ -104,7 +104,7 @@
 }
 
 [dir=rtl] .range-bar, :host-context([dir=rtl]) .range-bar {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 
@@ -127,7 +127,7 @@
 }
 
 [dir=rtl] .range-knob, :host-context([dir=rtl]) .range-knob {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 
@@ -270,7 +270,7 @@
   left: 50%;
   top: 3px;
   margin-left: -13px;
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   border-radius: 50% 50% 50% 0;
   position: absolute;
   width: 26px;
@@ -295,7 +295,7 @@
   }
 }
 [dir=rtl] .range-pin::before, :host-context([dir=rtl]) .range-pin::before {
-  /* stylelint-disable-next-line property-blacklist */
+  /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
 }
 

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

@@ -133,11 +133,18 @@ ion-refresher.refresher-native ion-spinner {
   display: none;
   animation: var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;
 }
+
 .refresher-native .refresher-refreshing {
   display: none;
   animation: 250ms linear refresher-pop forwards;
 }
 
+.refresher-native ion-spinner {
+  width: 32px;
+  height: 32px;
+  color: var(--ion-color-step-450, #747577);
+}
+
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,
 .refresher-native.refresher-completing .refresher-pulling ion-spinner {
   display: none;
@@ -154,6 +161,11 @@ ion-refresher.refresher-native ion-spinner {
   display: none;
 }
 
+.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon {
+  transform: scale(0) rotate(180deg);
+  transition: 300ms;
+}
+
 @keyframes refresher-pop {
   0% {
     transform: scale(1);

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

@@ -182,8 +182,8 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  border: 1px solid #ececec;
-  background: white;
+  border: 1px solid var(--ion-color-step-200, #ececec);
+  background: var(--ion-color-step-250, #ffffff);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {

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

@@ -126,7 +126,18 @@
   appearance: none;
 }
 
-:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
+.searchbar-clear-button:focus {
+  opacity: 0.5;
+}
+
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }
 

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

@@ -126,7 +126,18 @@
   appearance: none;
 }
 
-:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
+.searchbar-clear-button:focus {
+  opacity: 0.5;
+}
+
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
   display: block;
 }
 

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

@@ -14,6 +14,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
+  user-select: none;
 }
 
 :host(.segment-scrollable) {

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

@@ -14,6 +14,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
+  user-select: none;
 }
 
 :host(.segment-scrollable) {

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

@@ -164,6 +164,10 @@
   opacity: var(--background-focused-opacity);
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 @media (any-hover: hover) {
   :host(:hover) .button-native {
     color: var(--color-hover);

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

@@ -164,6 +164,10 @@
   opacity: var(--background-focused-opacity);
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 @media (any-hover: hover) {
   :host(:hover) .button-native {
     color: var(--color-hover);
@@ -288,10 +292,6 @@ ion-ripple-effect {
   text-transform: uppercase;
 }
 
-.button-native {
-  min-width: 90px;
-}
-
 :host(.segment-button-disabled) {
   opacity: 0.3;
 }

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

@@ -51,7 +51,7 @@
   opacity: var(--placeholder-opacity);
 }
 
-button {
+label {
   left: 0;
   top: 0;
   margin-left: 0;
@@ -66,20 +66,41 @@ button {
   cursor: pointer;
   appearance: none;
   outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
 }
-[dir=rtl] button, :host-context([dir=rtl]) button {
+[dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;
   right: unset;
   right: 0;
 }
 
-button::-moz-focus-inner {
+label::-moz-focus-inner {
+  border: 0;
+}
+
+button {
+  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;
 }
 
 .select-icon {
   position: relative;
-  opacity: 0.33;
 }
 
 .select-text {
@@ -94,7 +115,7 @@ button::-moz-focus-inner {
 .select-icon-inner {
   left: 5px;
   top: 50%;
-  margin-top: -3px;
+  margin-top: -2px;
   position: absolute;
   width: 0;
   height: 0;
@@ -120,4 +141,5 @@ button::-moz-focus-inner {
 .select-icon {
   width: 12px;
   height: 18px;
+  opacity: 0.33;
 }

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

@@ -51,7 +51,7 @@
   opacity: var(--placeholder-opacity);
 }
 
-button {
+label {
   left: 0;
   top: 0;
   margin-left: 0;
@@ -66,20 +66,41 @@ button {
   cursor: pointer;
   appearance: none;
   outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
 }
-[dir=rtl] button, :host-context([dir=rtl]) button {
+[dir=rtl] label, :host-context([dir=rtl]) label {
   left: unset;
   right: unset;
   right: 0;
 }
 
-button::-moz-focus-inner {
+label::-moz-focus-inner {
+  border: 0;
+}
+
+button {
+  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;
 }
 
 .select-icon {
   position: relative;
-  opacity: 0.33;
 }
 
 .select-text {
@@ -94,7 +115,7 @@ button::-moz-focus-inner {
 .select-icon-inner {
   left: 5px;
   top: 50%;
-  margin-top: -3px;
+  margin-top: -2px;
   position: absolute;
   width: 0;
   height: 0;
@@ -113,11 +134,44 @@ button::-moz-focus-inner {
 :host {
   --padding-top: 10px;
   --padding-end: 0;
-  --padding-bottom: 11px;
+  --padding-bottom: 10px;
   --padding-start: 16px;
 }
 
 .select-icon {
   width: 19px;
   height: 19px;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0.55;
+}
+
+/**
+ * Adjust the arrow so that it appears in the middle
+ * of the item. If the item has fill="outline" then
+ * we should adjust the entire ion-select rather than
+ * just the outline so the selected value appears centered too.
+ */
+:host-context(.item-label-stacked) .select-icon,
+:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
+:host-context(.item-label-floating.item-fill-outline) {
+  transform: translate3d(0,  -9px,  0);
+}
+
+:host-context(.item-has-focus) .select-icon {
+  transform: rotate(180deg);
+}
+
+/**
+ * Ensure that the translation we did
+ * above is preserved when we rotate the select icon.
+ */
+:host-context(.item-has-focus.item-label-stacked) .select-icon,
+:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
+  transform: translate3d(0,  -9px,  0) rotate(180deg);
+}
+
+:host-context(ion-item.ion-focused) .select-icon,
+:host-context(.item-has-focus) .select-icon {
+  color: var(--highlight-color-focused);
+  opacity: 1;
 }